前端开发中的一些tips(持续更新)

本文记录分享一些在日常开发中经常遇到的一些问题的解决方案及常用小技巧，如有错误之处还请批评指正。
CSS相关：
1.如何修改chrome记住密码后自动填充表单的黄色背景？

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #FFF; 
    background-image: none;
    color: #333;
  }

2.鼠标选中文本时添加背景色

<style>
　　p::selection{
　　　　color:red,
　　　　background:yellow
　　}
</style>

<p>Custom text selection color</p>

 

JS相关：
1. axios请求参数问题:

　　post/put有3个参数：url、data、config。

　　get/delete有2个参数：url、config。

　　get、delete请求传参区别：

　　　　get请求需要将入参的数据作为config中params属性的值，以request parameter形式发送。

　　　　delete请求需要将入参的数据作为config中data属性的值，以request body形式发送。

//get请求参数拼接在url中，如 http://www.A.com/?name="xxx"&age="18"
axios.get('url',{
　　params:{
　　　　name:'xxx',
　　　　age:18
　　}
}

//delete请求参数在request body中
axios.delete('url',{
　　data:{
　　　　name:'xxx',
　　　　age:18
　　}
})

　　

2.使用form表单，提交时按钮使用了button标签但未添加type属性，点击提交会刷新页面。

　　原因：form表单下的按钮在没有指定type类型的时候，button会有一个默认的type="submit"

　　解决办法：1.添加type="button"属性  <button type="button">确认</button>

　　　　　　　2.使用<input type="button"/>

　　　　　　　3.button点击事件里阻止默认行为，event.preventDefault()

　　　　　　　4.如果配合UI框架如element等，请使用框架封装的button按钮，如 el-button

 

3.使用reduce方法同时实现map和filter

　　假设有一个数组，你需要更新它的项并且过滤出一部分，如果先使用map后使用filter的话，数组将被遍历两次，此时用reduce方法更方便。

//将数组的值翻倍并且筛选出大于40的数据项
var arr = [10,20,30,40,50];
const result = arr.reduce((list,curNum)=>{
    curNum = curNum * 2;
    if(curNum > 40){
        list.push(curNum);        
    }
    return list;
},[])

result;     //[60,80,100]

 

4.使用reduce计算数组中元素出现的次数

//计算数组中元素出现的次数
var arr = ["a","b","c","d","c","a","e","b"];
var result = arr.reduce((obj,item)=>{
    if(item in obj){
        obj[item]++
    }else{
        obj[item] = 1
    }
    return obj
},{})
console.log(result)   //{a: 2, b: 2, c: 2, d: 1, e: 1}

 

 

5.使用reduce将对象的key转换成中文

// 将{name:'Jack',age:19,gender:'male'}中的key值转换成中文;

 

var obj = {name:'Jack',age:19,gender:'male'};

var objMap = {name:'姓名',age:'年龄',gender:'性别'};  // 创建映射关系

 

function transKey(data,dataMap){

　　return Object.keys(data).reduce((newObj,currentKey)=>{

　　let newKey = dataMap[currentKey]

　　newObj[newKey] = data[currentKey]

　　return newObj

},{})

}

console.log(transKey(obj,objMap)) 

// {姓名:'Jack',年龄:19,性别:'male}

 

6.使用解构来交换参数数值

//以往我们通常使用 var temp = a; a = b; b = temp;
//来交换两个参数的数值，现在我们不妨用ES6提供的变量的解构赋值来代替。

let param1 = 1;
let param2 = 2;
[param1,param2] = [param2,param1];
console.log(param1)  //2;
console.log(param2)  //1;

 

7.深拷贝

function deepCopy(source) {
    let target = Array.isArray(source) ? [] : {}
    for (var k in source) {
        if (typeof source[k] === 'object') {
            target[k] = deepCopy(source[k])
        }else {
            target[k] = source[k]
        }
    }
    return target
}

 

8.封装cookie方法

//set cookie
export function setCookie(name, value, expiredays) {
    let exdate = new Date();
    exdate.setTime(exdate.getTime() + expiredays*24*60*60*1000);
    document.cookie = name + '=' + encodeURI(value) + ((expiredays == null) ? '' : '; expires = ' + exdate.toGMTString());
}

//get cookie
export function getCookie(name, cookieText = '') {
    cookieText = document.cookie;
    const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
    const arr = cookieText.match(reg);
    let ret = '';
    if (arr) {
        ret = decodeURIComponent(arr[2]);
    }
    return ret;
}

//delete cookie
export function deleteCookie(key) {
    let name = decodeURI(key);
    let expires = new Date(0);
    document.cookie = name + '=' + '; expires = ' + expires.toUTCString();
}

 

 

9.格式化日期为YYYY-MM-DD HH：MM：SS格式

function formatDate(time){
    var date = new Date(time);
    var year = date.getFullYear(),
        month = date.getMonth() + 1,//月份是从0开始的
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();

        month = month < 10 ?  '0' + month : month
        day = day < 10 ?  '0' + day : day
        hour = hour < 10 ?  '0' + hour : hour
        min = min < 10 ?  '0' + min : min
        sec = sec < 10 ? '0 '+ sec : sec

    var newTime = year + '-' +
                month + '-' +
                day + ' ' +
                hour + ':' +
                min + ':' +
                sec;
    return newTime;         
}
formatDate(Date.now())  //2019-07-04 17:27:28