ES6/ES2015中的解構和擴展運算符

Javascript ES6/ES2015，其中許多特性其實是為了簡化代碼。解構運算符，擴展運算符，和rest運算符就是其中很好的特性，它們可以通過減少賦值語句的使用，或者減少通過下標訪問數組或對象的方式，使代碼更加簡潔優雅，可讀性更佳。

解構

解構的作用是可以快速取得數組或對象當中的元素或屬性，而無需使用arr[x]或者obj[key]等傳統方式進行賦值

數組解構賦值：

let arr = ["我是字符竄","app","3"];
      //1.傳統方式賦值
     // var a=arr[0],b=arr[1],c=arr[2]
      //2.解構賦值
      let [a,b,c] = arr;

      console.log(a,b,c)//我是字符竄 app 3

嵌套數組解構：

let arr = [["我是字符竄","app","3"],["12","34",56],["aa","bb","cc"]]

        let  [[a,b,c],d,e] = arr;
    console.log([a,b,c,d,e])//["我是字符竄", "app", "3", Array[3], Array[3]]

函數傳參解構：

 let arr = ["我是字符竄","app","3"];

        function fn([a,b,c]){
            console.log(a,b,c)//我是字符竄 app 3
        }

          fn(arr)

for循環解構：

 let arr = [["我是字符竄","app","3"],["12","34",56],["aa","bb","cc"]]

        for(let [a,b,c] of arr){
           console.log(a,b,c);//我是字符竄 app 3   12 34 56   aa bb cc


            /*console.log(b);
            console.log(c)*/
        }

對象賦值解構：

let obj = {
        name:"小明",
        sex:"男",
        age:"18",
        hobby:{
          hobby1:"籃球",
          hobby2:"游泳",
          hobby3:"唱歌"
        }
      };

      let {name,sex,age,hobby}=obj;
      console.log(name+","+sex+","+age+","+hobby)//小明,男,18,[object Object]
      console.log(hobby);//Object {hobby1: "籃球", hobby2: "游泳", hobby3: "唱歌"}
      let {hobby1,hobby2,hobby3}=hobby;
      console.log(hobby1,hobby2,hobby3)//籃球 游泳 唱歌*/

對象傳參解構：

let obj = {
        name: '小頭爸爸',
        sex: '男',
        age: 26,
        son: {
          sonname: '大頭兒子',
          sonsex: '男',
          sonage: 1
        }
      };

        function fn({name,sex,age,son}){
              console.log(name+"--"+sex+"--"+age+"--"+son);//小頭爸爸--男--26--[object Object]

              console.log(son)//Object {sonname: "大頭兒子", sonsex: "男", sonage: 1}
        }
          fn(obj)

變量名與對象屬性名不一致解構：

let obj = {
        name:"jack",
        age:12,
        sex:"男"
      };
     // let {name:newName,age:newAge,sex:newSex} = obj;
      //相當於
//      let newName = obj.name;
//      let newAge = obj.age;
//      let newSex = obj.sex;

//當屬性名等於屬性變量名可以簡寫如{name:name}<==>{name}


      console.log(newName+","+newAge+","+newSex)//jack,12,男

嵌套對象解構：

let obj = {
       name: '小頭爸爸',
       sex: '男',
       age: 26,
       son: {
      　　　　 sonname: '大頭兒子',
      　　　　 sonsex: '男',
      　　　　 sonage: 1
       　　}
       };
       let {name,sex,age,son:{sonname,sonage,sonsex}} = obj;

       console.log(sex+"--"+sonage)//男--1
       */

    /* let obj = {
        name: 'jack',
        sex: '男',
        age: [1, 2, 3]
      };

     let  {name, sex, age:[a, b, c]} = obj;
      console.log(name+"/"+a);//jack/1

嵌套對象屬性重名，解構時需要更改變量名：

 

let obj = {
        name: '小頭爸爸',
        sex: '男',
        age: 26,
        son: {
          name: '大頭兒子',
          sex: '男',
          age: 1
        }
      };

      let {name,sex,age,son:{name:sonName,age:sonAge,sex:sonSex}} = obj;
        console.log(name+"|"+sonName)//小頭爸爸|大頭兒子

      //傳參解構

        function fn({name,sex,age,son:{name:sonName,age:sonAge,sex:sonSex}}){
            console.log(name+","+age+","+sonName+","+sonAge)//小頭爸爸,26,大頭兒子,1

        }
        fn(obj)*/

 

循環解構對象：

let arr = [{name: '小明', age: 22}, {name: 'jack', age: 23}, {name: 'misa',age: 26}];

        for(let {name,age} of arr){

          console.log(name+"|"+age) //小明|22 jack|23 misa|26
        }

解構的特殊應用場景：

//1.字符串解構
      let str = "happy";
      let [a,b,c,d,e] = str;
      console.log(a+"--"+b+"--"+c+"--"+d+"--"+"--"+e)  //h--a--p--p----y
//2.變量互換*/
      let x =1, y = 2;
      [x,y]=[y,x];
      console.log(x,y)  //2 1

擴展運算符

擴展運算符用三個點號表示，功能是把數組或類數組對象展開成一系列用逗號隔開的值

ar fn = function(a, b, c) {
        console.log(a);
        console.log(b);
        console.log(c);
      }

      var arr = [1, 2, 3];

//傳統寫法
      fn(arr[0], arr[1], arr[2]);

//使用擴展運算符
      fn(...arr);
//1
//2
//3

特殊應用場景：

//數組深拷貝
      var arr2 = arr;
      var arr3 = [...arr];
      console.log(arr===arr2); //true, 說明arr和arr2指向同一個數組
      console.log(arr===arr3); //false, 說明arr3和arr指向不同數組

//把一個數組插入另一個數組字面量
      var arr4 = [...arr, 4, 5, 6];
      console.log(arr4);//[1, 2, 3, 4, 5, 6]

//字符串轉數組
      var str = 'love';
      var arr5 = [...str];
      console.log(arr5);//[ 'l', 'o', 'v', 'e' ]

rest運算符

rest運算符也是三個點號，不過其功能與擴展運算符恰好相反，把逗號隔開的值序列組合成一個數組

//主要用於不定參數，所以ES6開始可以不再使用arguments對象
     let  bar = function(...args) {
        for (let el of args) {
          console.log(el);
        }
      }

      bar(1, 2, 3, 4);
//1
//2
//3
//4

      bar = function(a, ...args) {
       console.log(a);
       console.log(args);
       }

       bar(1, 2, 3, 4);
       //1
       //[ 2, 3, 4 ]

rest運算符配合解構使用：

 let  [a, ...rest] = [1, 2, 3, 4];
      console.log(a);//1
      console.log(rest);//[2, 3, 4]

個人小結：

等號表達式是典型的賦值形式，函數傳參和for循環的變量都是特殊形式的賦值。解構的原理是賦值的兩邊具有相同的結構，就可以正確取出數組或對象里面的元素或屬性值，省略了使用下標逐個賦值的麻煩。

對於三個點號，三點放在形參或者等號左邊為rest運算符; 放在實參或者等號右邊為spread運算符（擴展運算符），或者說，放在被賦值一方為rest運算符，放在賦值一方為擴展運算符。

 

另有前輩總結：

• 在等號賦值或for循環中，如果需要從數組或對象中取值，盡量使用解構。
• 在自己定義函數的時候，如果調用者傳來的是數組或對象，形參盡量使用解構方式，優先使用對象解構，其次是數組解構。代碼可讀性會很好。
• 在調用第三方函數的時候，如果該函數接受多個參數，並且你要傳入的實參為數組，則使用擴展運算符。可以避免使用下標形式傳入參數。也可以避免很多人習慣的使用apply方法傳入數組。
• rest運算符使用場景應該稍少一些，主要是處理不定數量參數，可以避免arguments對象的使用。