前言
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
提示
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
(简单来说就是格式不匹配就会报错)
数组的解构赋值
只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo; // 1
bar; // 2
baz; // 3
let [, , third] = ["foo", "bar", "baz"];
third; // "baz"
let [x, , y] = [1, 2, 3];
x; // 1
y; // 3
let [head, ...tail] = [1, 2, 3, 4];
head; // 1
tail; // [2, 3, 4]
let [x, y, ...z] = ["a"];
x; // "a"
y; // undefined
z; // []
let [foo, [[bar], baz]] = [1, [4, 3]];
// Uncaught TypeError: [1,[4,3]] is not iterable at <anonymous>:1:27
// 这里报错的原因是 [bar] 最后只能匹配到 4 ，这两个结构不匹配
let [foo = true] = [];
foo; // true
let [x, y = "b"] = ["a"]; // x='a', y='b'
let [x, y = "b"] = ["a", undefined]; // x='a', y='b'
对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
例子
let obj3 = {
p: ["Hello", { y: "World" }],
q: { a: 15 }
};
let {
p,
p: [x, { y, z = 16 }],
q: Q
} = obj3;
x; // "Hello"
y; // "World"
p; // ["Hello", {y: "World"}]
z; // 16
q; // Uncaught ReferenceError: q is not defined
Q; // {a: 15}
总结
| 类别 | 结论 |
|---|---|
| 数组的解构 | 按照遍历器 iterator 来依次赋值 |
| 对象的解构 | 按照 key 来配对赋值 |
例子
let [a, b, c] = { 1: 15, 2: "a", 3: [1, 2, 3] };
// VM191:1 Uncaught TypeError: {(intermediate value)(intermediate value)(intermediate value)} is not iterable
var { 0: a, 1: b } = [12, 15];
a; // 12
b; // 15
其他数据类型的解构
其他数据类型在执行解构之前，会先转换成相应的对象，比如 123456 -> Number(123456), false ->Boolean(false) NaN -> NaN
回到目录
