談談神祕的ES6——（四）解構賦值【數組篇】

今天，咱們來說一個新的概念，叫作解構賦值。那麼在ES6中，什麼是解構賦值呢？咱們先來給它下個定義。

在ES6中，容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）。知足解構賦值的前提是：1.等號兩邊結構同樣；2.聲明和賦值不能分開；3.右邊是具體的「東西」。

在ES5的時候，咱們想要對a,b,c三個變量賦值，通常來講都是var三個變量，寫三行賦值。有了解構，它能夠變成這個樣子：

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

固然，如下的寫法也是容許的：

let [[arr],str] = [["arr"],"str"];

let [ , , third] = ["foo", "bar", "baz"];
console.log(third) // "baz"

let [x, , y] = [1, 2, 3];
console.log(x) // 1
console.log(y) // 3

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

本質上，這種寫法屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。

數組的解構賦值

上邊用的例子，其實就是數組的解構賦值，它的特色是等號左右兩邊都是數組。

解構賦值的結果分類，可分爲解構成功、解構不成功和不徹底解構。上邊用的例子就是解構成功，那麼什麼是解構不成功呢，咱們來看一下：

let [x, y, ...z] = ['a'];
console.log(x) // "a"
console.log(y) // undefined
console.log(z) // []

let [foo] = [];
console.log(foo) // undefined

let [bar, foo] = [1];
console.log(foo) // undefined

若是解構不成功，變量的值就等於undefined

另外一種狀況是不徹底解構，即等號左邊的模式，只匹配一部分的等號右邊的數組。這種狀況下，解構依然能夠成功。

let [x, y] = [1, 2, 3];
console.log(x) // 1
console.log(y) // 2

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

若是等號的右邊不是數組（或者嚴格地說，不是可遍歷的結構），那麼將會報錯。

// 報錯
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

默認值

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

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

上面代碼中，若是一個數組成員是null，默認值就不會生效，由於null不嚴格等於undefined。

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

let x;
if ([1][0] === undefined) {
  x = f();
} else {
  x = [1][0];
}

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

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] = [];     // ReferenceError: y is not defined

上面最後一個表達式之因此會報錯，是由於x用y作默認值時，y尚未聲明。

                                                                                                       

若是想跟着振丹繼續學習，能夠微信關注【振丹敲代碼】（微信號：JandenCoding）

新博文微信同步推送，還附有講解視頻哦~

也可直接掃描下方二維碼關注。