ES6 中變數的解構賦值

1. 陣列的解構賦值

解構： ES6 中允許按照一定的模式從陣列和物件中提取值，然后對變數進行賦值，這被稱為解構(Destructuring).

1. 基本用法

本質上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變數就會被賦予相應的值，

• 完全解構

let [a, b, c] = [1, 2, 3];
console.log(a); // 輸出1
let [a, b] = [1];
console.log(b); // 解構不成功時回傳undefined

• 不完全解構

  等號左邊只匹配到等號右邊的一部分，

  let [a, [b], c] = [1, [2, 3], 4];
  console.log(b); // 輸出2，只匹配到右邊的右邊陣列[2, 3]中的2 
  

• 不能解構情況

  如果等號右邊不是可遍歷的解構，或者說等號右邊的值或是轉換為物件以后也不具備 Iterator 介面，那么就會解構失敗，

  let [a] = 1;
  let [a] = false;
  let [a] = NaN;
  let [a] = undefined;
  let [a] = null;
  let [a] = {}
  

  總結：事實上，只要某種資料結構具有 Iterator 介面，都可以采用陣列形式的解構賦值，

2. 默認值

解構賦值允許指定默認值，

ES6內部使用嚴格相等運算子(===)判斷陣列的某個位置是否有值，所以，如果一個陣列成員不嚴格等于undefined，默認值是不會生效的，

let [a = 2] = [null];
// a = null
let [a = 2] = [];
// a = 2

如果默認值是一個運算式，那么這個運算式是惰性求值的

function f() {
    return 2;
}
let [a = f()] = [1];
// a = 1, f函式不會執行

let [a = f()] = [];
// a = 2, f函式會執行

默認值可以參考解構賦值的其它變數，但是該變數必須已經宣告

let [x = 1, y = x] = [];
// x = 1, y = 1
let [x = y, y = 1] = [];
// ReferenceError,在使用變數y時還并沒有宣告

2. 物件的解構賦值

物件解構賦值的內部機制是先找到同名屬性，然后再賦值給對應的變數，真正被賦值的是后者而不是前者

舉例說明：

let {foo:bar} = {foo:"aaa"};
console.log(bar); // bar = "aaa"
console.log(foo); // ReferenceError, foo is not defined
console.log({foo:bar}.foo); // {foo:bar}.foo = "aaa"

上面代碼中 foo 是匹配的模式，通過 foo 匹配到物件 {foo:bar} 中 foo 屬性的值( bar 變數)，然后將值賦給 bar 變數，這樣物件 {foo:bar} 中 foo 屬性就有值了，即 bar 的值 "aaa".

// 實際上
let {foo1, foo2} = {foo1:"aaa", foo2:"bbb"};
// 是下面陳述句的簡寫形式
let {foo1:a, foo2:b} = {foo1:"aaa", foo2:"bbb"};

物件的解構也可以指定默認值，默認值生效的條件是，物件的屬性值嚴格等于undefined

let {x = 3} = {x: undefined};
// x = 3
// 上面的陳述句等價于
let {x:x = 3} = {x: undefined};
// x = 3
// {x:x = 3} = 3 

let {x = 3} = {x: null};
// x = null

如果解構模式是嵌套的物件，而且子物件所在的父屬性不存在，那么將會報錯

let {foo: {bar}} = {bar: 'bar'};
// 報錯，因為foo = {bar} = undefined,{bar}物件中的bar屬性在解構時會報錯，因為{bar}是undefined，undefined是不能轉換為物件的，對undefined取bar屬性會報錯， 
// 和下面的代碼原理一樣：
let obj = {bar: "bar"};
obj.foo.bar // 報錯，因為obj.foo = undefined,對undefined取屬性會報錯，
"bar".foo // undefined,不會報錯，因為字串可以轉換為物件

在將已經宣告的變數進行解構賦值時，要注意解構賦值陳述句不能直接寫在行首

let x;
{x} = {x: 1}; // 報錯，這個地方不是很懂
// 書上的解釋是：JS引擎將{x}理解成一個代碼塊，從而發生語法錯誤，
// 若想避免這個錯誤，可以這樣寫：
({x} = {x: 1});

3. 字串的解構賦值

字串可以解構賦值是因為字串可以轉換成一個類似陣列的包裝物件，

let [a, b, c, d, e] = "hello";
// a = 'h'  b = 'e'  c = 'l'  d = 'l'  e = 'o'

由于類似陣列的包裝物件有一個 length 屬性，因此在解構賦值時可以利用這個屬性，

let {length: len} = 'hello';
// len = 5

4. 數值和布林值的解構賦值

解構賦值時，如果等號右邊是數值或布林值，則會先轉為物件

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

數值 123 被轉換為物件，數值物件中有 toString 方法，與 toString 匹配，變數 s 中存盤的是 toString 方法，該方法就是 Number 原型物件中的 toString 方法，

5. 函式引數的解構賦值

函式引數的解構也可以使用默認值

function f({x = 0, y = 0} = {}) {
	return {x, y};
}
console.log(f({x: undefined, y: 1}));
// 輸出： {0， 1}

詳細程序：呼叫函式f后，{x = 0, y = 0}={x:undefined,y:1}

由于x是undefined，故x使用默認值即x=0，由于y:1故通過解構賦值后y=1.

之前的誤區：注意是解構賦值，并不是物件之間的賦值，

再看下面這個例子：

function f({x, y} = {x: 0, y: 0}) {
    return {x, y};
}
console.log(f({x: undefined, y: 1}));
// 輸出： {undefined, 1}
// 呼叫函式后，{x,y}={x:udefined,y:1}，解構賦值后x=undefined,y=1
console.log(f({x: 1, y: 1}));
// 輸出： {1, 1}
// 呼叫函式后，{x,y}={x:1,y:1}，解構賦值后x=1,y=1
console.log(f({}));
// 輸出： {undefined, undefined}
// 呼叫函式后，{x,y}={}={undefined,undefined}，解構賦值后x=undefined,y=undefined
console.log(f());
// 輸出： {0, 0}  當不傳遞實參時，形參的值是原有的值
// 呼叫函式后，{x,y}={x:0,y:0},解構賦值后x=0,y=0

再次重申一下 {x,y}={x:1,y:2} 這種形式是解構賦值，千萬不要理解成物件之間的賦值！

6. 圓括號問題

對于編譯器而言，一個式子到底是模式還是運算式，沒有辦法一開始就知道，必須決議到(或決議不到)等號才能知道

• 不能使用圓括號的情況

  1. 變數宣告陳述句
  2. 函式引數
  3. 賦值陳述句運算式

• 可以使用圓括號的情況

  賦值陳述句中的非模式部分可以使用圓括號，

  [(a)] = [3]; // a并不是模式
  （{ p: (d) } = {}）; // p是模式，d并不是模式
  

建議：無論什么情況都盡量不要在模式中使用圓括號

7. 解構賦值的作用

1. 交換變數的值

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

2. 方便處理函式回傳值

   function f([x, y]) {
       return [x+1, y+2];
   }
   let [a, b] = f([1, 1]);
   

3. 函式引數定義

   解構賦值可以方便地將一組引數與變數名對應起來，

   function f1({x, y, z}){
       return x+y+z;
   }
   f1({y: 1, z: 2, x: 3 }); // 可以做到實參沒有次序
   

4. 提取JSON資料

   可以很方便地從JSON中提取需要的資料，

   let JSON = {
       name: "happyCoding1024",
       age: 18,
       hobby: "coding"
   }
   let [name, age, hobby] = JSON;
   

5. 函式引數默認值

   非常簡化方便地使用函式引數默認值，

   function f([x=0,y=0] = []){
       return x+y;
   }
   f([]); // 當傳入的是undefined時，就會使用默認值
   

6. 遍歷Map結構

   任何部署了 Iterator 介面的物件都可以用 for...of 回圈遍歷，Map 結構原生支持 Iterator 介面，配合變數的解構賦值獲取鍵名和鍵值非常方便，

   let map = new Map();
   map.set('first', 'hello');
   map.set('second', 'world');
   for (let [key, value] = map){
       console.log(key + "is" + value);
   }
   

7. 輸入模塊的指定方法

   加載模塊時，往往需要制定輸入的方法，解構賦值使得輸入陳述句非常清晰，

   const {SourceMapConsumer, SourceNode} = require("source-map");
   

標籤：JavaScript

上一篇：Node.js的框架-express

下一篇：初探 jQuery