1、ES6語法篇

//ES6語法
// spread擴展符(...)，

//另：
//1、函數聲明：
    var fun1 = tit =>{ console.log(tit) };
    var fun2 = (tit) =>{ console.log(tit) };
    fun1('fun1');
    fun2('fun2');

    //函數柯里化：是將多參函數轉換成一系列的單參函數。
    //示例：
    var add1 = (a, b) => console.log(a + b);
    add1(1, 2);  // => 3
    //修改
    var add2 = a => b => console.log(a + b);
    add2(1)(2);  // => 3

    //組合函數：實現方式類似于Array.prototype.reduce 和 RxJS.reduce
    var compose = (fn1, fn2) => (arg) => fn1(fn2(arg));
    var a = arg => arg + 'a';
    var b = arg => arg + 'b';
    //reduce in React中：
    export default function compose(...funcs) {
      if (funcs.length === 0) {
         return arg => arg
      } else {
        const last = funcs[funcs.length - 1]
        const rest = funcs.slice(0, -1)
        return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
      }
     }
    
var c = compose(a, b); // 將a,b函數進行組合
c('c');  // => cba

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);
   方式二：
   console.log(['1','2','3','4'].filter((item,index,self) => self.indexOf('2') !== index));
   //["1", "3", "4"]

//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之后里面可以嵌套箭頭函數了，
   //方式一：使用Set：
    var str = 'foo';
    var set = new Set([1,2,3,1]);
    var arr = Array.from(set);
    console.log(arr);  //[1,2,3]

   //方式二：  //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);

   // 方式三：
   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);
                   i--
               }
           }
       }
       return a;
   };
   console.log(arrUniqe.unique());   //去重結果  [1,2,3,'a','b'];執(zhí)行效率比較高的方式

   //方式四：  //如果項目使用了RxJS，則可以：
   //不過RxJS這種創(chuàng)建數據流的方式速度上要慢，如果可以更建議使用上面的方式
   import { from } from "rxjs/internal/observable/from";
   import { distinct } from "rxjs/operators";
   var arr = [1,2,3,2,1,'a','b','a'];
   from(arr).pipe(distinct(),toArray()).subscribe(
     val => console.log(val)
   )

   //使用RxJS實現包含對象的數組去重，例如：
   import { from } from "rxjs/internal/observable/from";
   import { distinct } from "rxjs/operators";
   var a = [{id:1,name:'a'},{id:2,name:'b'},{id:2,name:'b'},{id:3,name:'b'}];
   //如果認為name相同時就為相同項，則：
   from(a).pipe(distinct(item =>
     item.name
   )).subscribe(
     val => console.log(val)  // {id:1,name:'a'},{id:2,name:'b'}
   );
   //如果認為name和id都相同時才為相同項，則：
   from(a).pipe(distinct(item =>
     item.name && item.id
   )).subscribe(
     val => console.log(val)    // {id:1,name:'a'},{id:2,name:'b'},{id:3,name:'b'}
   );

//8、數組對象去重
    方式一：
    let lists= [
        {id: 6, age: 16},
        {id: 7, age: 17},
        {id: 8, age: 18},
        {id: 9, age: 19},
        {id: 8, age: 18},
        {id: 9, age: 19},
    ];
    let list = lists.reduce((cur,next) => {
        //如果只要id相同就是同一個數據
        cur.filter((item)=> item.id === next.id).length === 0 && cur.push(next);
        //如果必須id和age都相同才認定是同一個數據
        //cur.filter((item)=> item.id === next.id && item.age=== next.age).length === 0 && cur.push(next);
        return cur;
    },[]);
    console.log(list);  //[{id: 6, age: 16},{id: 7, age: 17},{id: 8, age: 18},{id: 9, age: 19}]

//9、數組過濾：
   //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']

//10、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'));

//11、兩個數組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)