1、數組的解構賦值

1.1、基本用法

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。
很久很久以前，我們為這里賦值，只能直接指定值。

let a = "x";
let b = "x";
let c = "b";

現在，用ES6，我們可以寫成：

let [a, b, c] = ["x", "x", "b"];

使用嵌套數組進行結構例子。

let [a, ...b] = [1, 2, 3, 4];
// 輸出
a // 1
b // [2, 3, 4]

解構賦值

let [x, y, ...z] = ["x"];
x // "x"
y // undefined
z // []

解構賦值

如果解構不成功，變量的值就等于undefined

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

解構賦值

1.2、默認值

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

let [a = true] = [];
let [x, y = "b"] = ["a", "diudiudiu"];
let [o, p = "hehe'] = ["haha", undefined];

注意，ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，如果一個數組成員不嚴格等于undefined，默認值是不會生效的。

解構賦值

2、對象的解構賦值

let {a, b} = {a: "x", b: "y"};

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

對象解構賦值

如果變量名與屬性名不一致，必須寫成下面這樣。

let {a: c} = {a: "x", b: "y"};
c // x

let o = {first: "x", last: "b"};
let {first: f, last: l} = o;

對象解構賦值

這實際上說明，對象的解構賦值是下面形式的簡寫。

let { foo: foo, bar: bar } = { foo: "x", bar: "b" };

也就是說，對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。

let {a: c} = {a: "x", b: "y"};

上面代碼中，a是匹配的模式，c才是變量。真正被賦值的是變量c，而不是模式a。

對象解構賦值

對象的解構也可以指定默認值。

let {a: b = 1} = {a: 0};
let {x: y = 3} = {x: 5};

對象解構賦值

默認值生效的條件是，對象的屬性值嚴格等于undefined。
如果解構不成功，變量的值就等于undefined

let {a} = {b: "c"};
a // undefined

由于數組本質是特殊的對象，因此可以對數組進行對象屬性的解構。

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

對象解構賦值

數組arr的0鍵對應的值是1，[arr.length - 1]就是2鍵，對應的值是3。

3、字符串的解構賦值

字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。

let [a, b, c] = "xxb";

字符串解構賦值

類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。

let {length: len} = "xxb666";

字符串解構賦值

————
前端·小b
紙上學來終覺淺，絕知此事要躬行