基本语法
let a = 1;
let b = 2;
let c = 3;
可以写成：
let [a, b, c] = [1, 2, 3];
只要等号两边的模式相同，左边变量就会被赋予对应的值。
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 // []
如果解构不成功，变量的值就等于 undefined
let [foo] = [];
let [bar, foo] = [1];
以上两种情况都属于解构不成功，foo 的值就等于 undefined
对于Set解构，也可是使用数组的解构赋值
let [x, y, z] = new Set(['a', 'b', 'c']);
x // 'a'
事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的结构赋值。
默认值
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 [x = 1] = [null];
x // null
ES6 内部使用严格相等运算符(===)，判断是否有值。如果一个数组成员不严格等于 undefined，默认值是不会生效的。
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值
function f() {
console.log('aaa');
}
let [x = f()] = [1];
上面代码中，因为 x 能取到值，所以函数 f 根本不会去执行。
默认值可以引用结构赋值的其它变量，但该变量 必须已经声明。
let [x = y, y = 1] = []; //ReferenceError
对象的结构赋值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' }
foo // 'aaa'
bar // 'bbb'
如果变量名与属性名不一致，必须写成下面这样，
var { foo: baz } = { foo: 'aaa', bar: 'bbb' }
baz // 'aaa'
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
解构也可以用于嵌套解构的对象
let obj = {
p: [
'hello',
{ y: 'world' }
]
}
let { p: [x, { y }] } = obj;
x // 'hello'
y // 'world'
注意，这时 p 是模式，不是变量，因此不会被赋值。如果 p 也要作为变量赋值，可以写成
let {p, p: [x, { y }]} = obj;
x // 'hello'
y // 'world'
p // ['hello', {y: 'world'}]
字符串的结构赋值
const [a, b, c, d, e] = 'hello';
a // 'h'
b // 'e'
c // 'l'
d // 'l'
e // 'o'
类似数组的对象都有一个 length 属性，因此还可以对这个属性结构赋值。
let {length: len} = 'hello';
len // 5
数值和布尔值的结构赋值
如果等号右边是数值和布尔值，则会先转为对象。
let { toString: s } = 123;
s === Number.prototype.toString // true
数值的包装对象有toString属性，因此变量 s 能取到值。
结构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于 undefined 和 null 无法转为对象，所以对它们进行结构赋值，都会报错。
let { prop: x } = undefined; // TypeError
let { prop: y} = null; // TypeError
函数参数的解构赋值
function add([x, y]) {
return x + y;
}
add([1, 2]); // 3
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [3, 7]
圆括号问题
对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到(或即系不到)等号才能知道。
所以最好不要在模式中放置圆括号。
不能使用圆括号的情况
- 变量声明语句
let [(a)] = [1]; - 函数参数
function f([(z)]) { return z; } - 赋值语句的模式
({p: a}) = { p: 42 }
以上代码全部报错。
可以使用圆括号的情况
[(b)] = [3]; // 正确
({ p: (d) } = {}); //正确
[(parseInt.prop)] = [3]; //正确
用途
- 交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
- 从函数返回多个值
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
- 函数参数的定义
- 提取JSON的数据
- 函数参数的默认值
function example({name = 'abc', age = 12}) {
}
- 遍历Map解构
- 输入模块的指定方法
const { View, Span } = require("react-native");
