解構賦值

這兩天有點事，所以沒有繼續寫es6的東西，今天就說一下解構賦值

首先什麼是解構賦值？個人理解就是從數組和對象中提取值，對變量進行賦值。

舉個例子：這樣就很快的完成a,b值的交換，如果等號兩邊模式相同，左邊變量就會被賦予相應值。

爲了驗證一下：

既然是從數組和對象中取值，那麼我們先說一下

數組中的解構賦值

1. 解構賦值的嵌套，結構一致

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

    

2. 解構失敗，值爲undefined(就是說 = 右邊缺少值)
    

   let [a, b, [ c, d ]] = [1, 2, [3]];
   console.log(a, b, c, d) // 1 2 3 undefined

    

3. 不完全解構（就是說 = 左邊缺少變量）
    

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

    

4. 默認賦值
    

   let [a = 1] = [];
   let [b = 1] = [null];
   console.log(a, b);// 1 null

   從上面的例子可以看出只有當右側的值等於undefined纔會使用默認賦值

5. 錯誤解構
   錯誤解構就是 = 左右兩邊結構不一致會報錯

對象中的解構賦值

對象的解構賦值是按照屬性名（鍵）決定的，如果沒有找到對應的屬性，那就賦予undefined

例如：

let { a,b,c } = {"a":1,"c":3,"b":2};
console.log(a, b, c) // 1 2 3

如果我們想要聲明的變量與屬性名不同,可以這麼做：

let {one: a, two: b, three: c = 3} = { one: 1, two: 2}
console.log(a, b, c);// 1 2 3

1. 解構賦值的嵌套，結構一致

   let {one: a, two: b, three: c = 3} = { one: 1, two: 2}
   console.log(a, b, c);// 1 2 3

    

2. 字符串的解構賦值

   let [a, b, c, d, e, f, g, h, i, j, k] = 'hello world';
   console.log(a, b, c, d, e, f, g, h, i, j, k);//h e l l o   w o r l d

    

解構賦值的用途：

1. 交換變量
2. 函數多值返回

   function s(){
       return [1, 2, 3];
   }
   let [a, b, c] = s();

    

3. 函數定義參數

   function s({a, b, c}){
       console.log(a, b, c);
   }
   s({a: 1, b: 2, c: 3});

    

4. 提取數據

   let data= {
      a: 1,
      b: '哈哈',
      c: [2, 3]
   }
   let {a, b, c: d} = data;
   console.log(a, b, d);//1 "哈哈" (2) [2, 3]