JS优雅写法记录

1、ES6语法篇

//ES6语法
// spread扩展符(...)，

2、js简洁写法

//js转换成bool值的六个false
    !0 = true,              !undefined = true
    !'' = true,             !NaN  = true
    ! null = true ,         !false  = true

    //1.丢弃小数部分，保留整数部分
    parseInt(3.5);  //3
    parseInt(-3.5);  //-3
    //同上
    ~~3.5  //3
    ~~-3.5 //-3
    //同上
    3.5 | 0  //3
    -3.5 | 0  //-3

    //2.向上取整，有小数就加1
    console.log(Math.ceil(3.5));  //4
    console.log(Math.ceil(-3.5));  //-3

    //3.四舍五入
    console.log(Math.round(3.5) ); //4
    console.log(Math.round(-3.5) ); //-3

    //4.向下取整
    console.log(Math.floor(3.5) );  //3
    console.log(Math.floor(-3.5) );  //-4

    //5.正常处理
    console.log(parseFloat('3.5') );  //3.5
    console.log(parseFloat('3.5rf') );  //3.5
    console.log(parseFloat('-3.5') );  //-3.5
    console.log(parseFloat('-3.5rf') );  //-3.5

    //6.if语句写法
    var a = 1;
    var b = 1;

    if(a === 1){
       a = 'a等于1';
    }else if(a === 2){
       a = 'a等于2';
    }else if(a === 3){
       a = 'a等于3';
    }
    可以更改为：(a === 1) && (a = 'a等于1') || (a === 2) && (a = 'a等于2') || (a === 3) && (a = 'a等于3')
    以上写法效果等同

3、js数组篇

//1、数组元素的新增
   var arr = [];
   console.log(arr.push(1));   //数组直接push，返回的是数组长度
   arr.push(1);
   console.log(arr);   //push之后，数组已经变成：[1]

//2、数组元素的删除
   var arr1 = [1 , 2];
   console.log(arr1.splice(1, 1));    //直接删除，返回的是删除掉的元素
   arr1.splice(1, 1);  //先删除再打印，是删除后剩余的结果splice(index, len)分别为起始下标和要删除的长度
   console.log(arr1);

//3、拼接两个数组
   //方式一
   var a = [1,2,3];
   var b = [...a,2];   // b = [1,2,3,2]
   //方式二
  var b = a.concat(b)

//4、字符串转数组
   var c = [...'abc']; // c = ['a','b','c']

//5、深拷贝数组的几种方式
   var b = [1,2];
   var a = b;
   b[0] = 2;
   console.log(a,b);  //a和b都变成[2,2]
   //方式一：
   var b = [1,2];
   var a = [...b];
   b[0] = 2;
   console.log(a,b);  // a = [1,2]; b = [2,2]

   //方式二：
   var b = [1,2];
   var a = JSON.parse(JSON.stringify(b)); //如果数组元素为对象，且对象有方法会导致方法丢失
   console.log(a,b);  // a = [1,2]; b = [2,2]

   //方式三：
   var b = [1,2];
   var a = b.concat();
   b[0] = 2;
   console.log(a,b); // a = [1,2]; b = [2,2]

   //方式四
   var b = [1,2];
   var [...a] = b;
   b[0] = 2;
   console.log(a,b); // a = [1,2]; b = [2,2]

//6、拷贝一个对象
   var a = {
       a : 1,
       b : true,
       c : {
           c1 : 'ci'
       },
       d : [1,2],
       e : function () {
           console.log('123')
       }
   };

   //方式一：
   var b = {...a};
   a.a = 3;
   console.log(a,b);  //改变a.a不会影响b.a的值

   //方式二： 注意，次方式只能拷贝数据，如果原对象有方法，会直接丢失，
   var b = JSON.parse(JSON.stringify(a));

//7、 数组去重，js filter()方法ES5已存在，ES6之后里面可以嵌套箭头函数了，
   // 方式一：
   var arrUniqe = [1,2,3,2,1,'a','b','a'];
   Array.prototype.unique = function() {
       var a = this.concat();
       for(var i=0; i<a.length; ++i) {
           for(var j=i+1; j<a.length; ++j) {
               if(a[i] === a[j])
                   a.splice(j, 1);
           }
       }
       return a;
   };
   console.log(arrUniqe.unique());   //去重结果  [1,2,3,'a','b'];执行效率比较高的方式

   //方式二：  //filter可以传三个值，分别是item，index，self，self是数组arr本身
   var arr = [1,2,3,2,1,'a','b','a'];
   var arr2 = arr.filter((item,index,self) => self.indexOf(item) === index);
   console.log(arr2);

//8、数组过滤：
   //1、过滤数组某些特征的值，ES5写法
   var list1=[
       {id:1,age:9},
       {id:2,age:14},
       {id:3,age:17},
       {id:4,age:1}
   ];
   var list2 = list1.filter(function (item) {
       if(item.age > 10) return item
   });
   console.log(list2);

   //2、ES6写法
   const list2 = list1.filter(item=>(
       item.age>10
   ));
   console.log(list2);

   //3、过滤掉空值，如：''，0，undefined
   var arr1 = [0,'',undefined,1,'a'];
   var arr2 = arr1.filter(item => item);
   console.log(arr2);  //[1,'a']

//9、js判断两个数组是否相等，包括普通数组和包含对象的数组
   //情况一：两个普通数组
   var a = [1,true,undefined,3];
   var b = [1,true,undefined,3];
   function diff(a,b) {  //这种方式只能对比两个是值的数组是否相等，如果数组的项是对象{}，此方法失效
       var arr1 = [...a].sort();
       var arr2 = [...b].sort();
       return arr1.toString() == arr2.toString()
   }
   console.log(diff(a,b));

   //情况二：包含对象的两个数组
   var a = [{id:1,name:'a'},{id:2,name:'b'},{id:2,name:'b'}];
   var b = [{id:1,name:'a'},{id:2,name:'b'},{id:2,name:'b'}];
   function diff(a,b,key1,key2) {  //三个或者四个参数分别为两个数组，key1，key2分别为两个数组必须要相等的属性值，其他可以不等
       var arr1 = [...a];
       var arr2 = [...b];
       var diff = false;
       if(arr1.length == arr2.length){
           if(arr1.length <= 0){
               diff = true
           }else {
               for(var j=0;j<arr1.length;j++){
                   for(var k=0;k<arr2.length;k++){
                       if(arr1[j][key1] == arr2[k][key1] && arr1[j][key2] == arr2[k][key2]){
                           arr1[j] = '';
                           arr2[k] = '';
                       }
                   }
               }
               if(arr1.filter(item => item).length <= 0) diff = true;
           }
       }
       return diff
   }
   console.log(diff(a,b,'id','name'));

//10、两个数组a1(新),a2(旧)，a1是重新变化后的数组，新数组a1和旧数组a2对比，key一样时，保留旧数组a2已经设置的其他项，其他用新数组a1的项，
        var a1 = [{k:'key1',v:''},{k:'key2',v:''},{k:'key4',v:''}];  //新数组
        var a2 = [{k:'key1',v:'name1'},{k:'key2',v:'name2'},{k:'key3',v:'name3'}];  //老数组
        function updateArr(a1,a2,key) { //三个参数，分别是新数组、老数组、要对比的必须一样的key，key一样，
            if(a1.length != 0 && a2.length != 0){
                for(var i=0;i<a1.length;i++){
                    for(var j=0;j<a2.length;j++){
                        if(a1[i][key] == a2[j][key]){
                            a1[i] = a2[j];
                            break
                        }
                    }
                }
            }
            return a1;
        }
        var arr = updateArr(a1,a2,'k');   //[{k:'key1',v:'name1'},{k:'key2',v:'name2'},{k:'key4',v:''}]
        console.log(arr)