1. 数组的解构赋值
1.1 基础用法
js会按照位置依次赋值
let [a, b, c] = [1, 2, 3];
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值，结构不成功就返回undefined。下面是一些使用嵌套数组进行解构的例子。
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 [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。
1.2 默认值
解构赋值允许指定默认值。只有当有一个数组成员严格等于（===）undefined时，默认值才会生效
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
function f() {
console.log('aaa');
}
let [x = f()] = [1];
上述代码由于可以取到值，所以f函数不会执行
2. 对象的解构赋值
2.1 基础用法
在对象的解构赋值中，变量必须与属性同名，才能取到正确的值，而顺序没有影响，没有取到值也是undefined。
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
对象的解构赋值实际上是模式匹配，上面的代码是下面的代码的简写
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
// foo是匹配的模式，baz是存储的变量
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
例子：
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
// 报错
let {foo: {bar}} = {baz: 'baz'};
// 寻找模式为foo的属性，返回undefined，再取子属性时就会报错
注意，对象的解构赋值可以取到继承的属性。
const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);
// 指定obj1的原型为obj2
const { foo } = obj1;
foo // "bar"
2.2 默认值
和数组类似
2.3 注意
// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
// 正确的写法
let x;
({x} = {x: 1});
js会把第二行认为是一个代码块
3. 字符串解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象，那么他也可以取到类似length的属性。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5
4. 数值和布尔值的解构赋值
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。
在下面的代码中，数字被转换为包装类Number，所以可以获取到他的toString属性
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
undefined和null没有对应的包装类，所以无法解构
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
5. 函数参数的解构赋值
函数的参数也可以使用解构赋值，设置默认值。
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
6. 用途
交换变量的值
let a=1; let b=2; [a,b]=[b,a];从函数返回多个值
// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();函数参数的定义
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});提取 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]输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");