ECMA Script 6_解構賦值_模式匹配

解構賦值

從數組中提取值，按照對應位置，對變量賦值

只要等號右邊的值不是對象或數組，就先將其轉爲對象。

因爲 undefined 和 null 沒法轉爲對象，因此對它們進行解構賦值，都會報錯

let [a, b, c] = [1, 2, 3];

只要某種數據結構具備 Iterator 接口，均可以採用數組形式的解構賦值

應用：

• const person = {
      name: 'RyenToretto',
      age: 22,
      sex: '男'
  };
  
  // 解構賦值
  const {name, age, sex} = person;    // 缺點： 必須同名屬性
  
  console.log(name. age, sex);
  
  // 對比以前，明顯好用了不少
  console.log(person.name, person.age, person.sex);

• const arr = [1, 3, 5, 7, 9];
  
  const [a, b, c, d, e, f=-1] = arr;    // 是一組有序的賦值, 容許默認賦值 此時 f=-1，由於索引值爲 undefined
  const [aa, , cc] = arr;    // aa=1, cc=5

   

• 若是解構不成功，變量的值就等於undefined。
• 如下會報錯

• //右邊的值  轉爲對象之後不具有 Iterator 接口
  let [foo] = 1;
  let [foo] = false;
  let [foo] = NaN;
  let [foo] = undefined;
  let [foo] = null;
  
  let [foo] = {};    // {} 自己就不具有 Iterator 接口

• 解構賦值容許指定默認值

• let [foo = true] = [];
  foo    // true
  
  let [x, y = 'b'] = ['a'];    // x='a', y='b'
  let [x, y = 'b'] = ['a', undefined];    // x='a', y='b'

注意，ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值

因此，只有當一個數組成員嚴格等於undefined，默認值纔會生效。

• let [x = 1] = [undefined];
  x    // 1
  
  let [x = 1] = [null];
  x    // null

若是默認值是一個表達式，那麼這個表達式是惰性求值的，即只有在用到的時候，纔會求值

• function f() {
      console.log('aaa');
  }
  
  let [x = f()] = [1];    // 因爲 x 能夠取 1 ，因此函數 f() 不會被執行

• 默認值能夠引用解構賦值的其餘變量，但該變量必須已經聲明

• let [x = 1, y = x] = [];      // x=1; y=1
  let [x = 1, y = x] = [2];    // x=2; y=2
  let [x = 1, y = x] = [1, 2];    // x=1; y=2
  let [x = y, y = 1] = [];      // Reference Error: y is not defined

• 對象的解構賦值

• let { foo, bar } = { foo: "aaa", bar: "bbb" };
  foo    // "aaa"
  bar    // "bbb"

  實際上的完整寫法： let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

• 也能夠指定 默認值，生效的條件是，對象的屬性值嚴格等於 undefined

• var {x = 1, y = 2} = {x: 1}
  console.log(x);    // 1
  console.log(y);    // 2

• 頗有用的，sin(90*Math.PI/180);

• let { log, sin, cos } = Math;
  console.dir(Math);
  console.dir(sin);    // let {sin} = {sin:function(){}, cos:function(){}}

• 因爲數組本質是特殊的對象，所以能夠對數組進行對象屬性的解構

• let arr = [1, 2, 3];
  let {0 : first, [arr.length - 1] : last} = arr;
  console.log(first);     // 1
  console.log(last);     // 3

• 字符串的解構賦值

此時，字符串被轉換成了一個相似數組的對象

• const [a, b, c, d, e] = 'hello';
  console.log(a);    // "h"
  console.log(b);    // "e"
  console.log(c);    // "l"
  console.log(d);    // "l"
  console.log(e);    // "o"

• 相似數組的對象都有一個 length 屬性，所以還能夠對這個屬性解構賦值 0

• let {length : len} = 'hello';
  console.log(len);    // 5

• 等號右邊是數值和布爾值，則會先轉爲對象

• let {toString: s} = 123;
  console.log(s === Number.prototype.toString); // true
  
  let {toString: s} = true;
  console.log(s === Boolean.prototype.toString); // true

• 函數的 實參 與 形參 也能夠進行 解構賦值

• function add([x, y]){
      return x + y;
  }
  
  add([1, 2]);     // 3

• 函數 參數默認值    對象傳參        參數是一組無序的值

• function add({name = "someone", age = -1} = {name:"kjf", age:"22"}) {
      return [name, age];
  }
  
  console.log(add({name:"Jack", age:"31"}));    // ["Jack", "31"]
  console.log(add({name:"Rose", age:"21"}));    // ["Rose", "21"]
  console.log(add({}));    // ["someone", -1]
  console.log(add());    // ["kjf", "22"]

• 函數 參數默認值    數組傳參        參數是一組有序的值

• function person([name="someone", age=-1] = ["kjf", 22]) {
      return name + " :  " +age;
  }
  
  console.log(person(["Jack", 30]));    // 'Jack :  30'
  console.log(person(["Rose"]));    // 'Rose :  -1'
  console.log(person([]));    // 'someone :  -1'
  console.log(person());    // 'kjf :  22'

應用：

• 交換變量的值

• let x = 1;
  let y = 2;
  
  [x, y] = [y, x];

• 快速提取 JSON 數據

• let jsonData = {
     " id": 42,
      "status": "OK",
      "data": [867, 5309]
  };
  
  let { id, status, data: number } = jsonData;
  
  console.log(id, status, number);    // 42, "OK", [867, 5309]

• for(let [attr1, attr2] of map){}

如此遍歷   for(let [key, value] of map){}

任何部署了 Iterator 接口的對象，均可以用 for...of 循環遍歷

• // 獲取鍵名
  for (let [key] of map) {
      // ...
  }
  
  // 獲取鍵值
  for (let [,value] of map) {
      // ...
  }