美文网首页js
JS优雅写法记录

JS优雅写法记录

作者: 倘浩洋 | 来源:发表于2019-03-28 22:00 被阅读27次

    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)
    
    
    
    

    相关文章

      网友评论

        本文标题:JS优雅写法记录

        本文链接:https://www.haomeiwen.com/subject/scwcbqtx.html