通过模式匹配从数组或对象中提取值,使代码更加清晰美观
只要具有 Iterator 接口,就可以使用数组形式的解构赋值
可以指定默认值
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象
数组的解构赋值:
let [a, b, c] = [1, 2, 3];
let [x, , y] = [1, 2, 3];
[a, b] = [b, a + b];
// 可以指定默认值
let [x, y = 'b'] = ['a'];
对象的解构赋值:
数组和对象的解构都是通过属性名对应取值的,只是数组的结构使得它隐去了自己的属性名
let { foo, bar } = { foo: "aaa", bar: "bbb" };
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
// baz = 'aaa'
let obj = {
p: {
x: 'World'
}
};
let { p, p: {x} } = obj;
// p = { x: 'world' } x = 'world'
对象的结构赋值实际上是下面形式的简写:
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
错误的写法:
{x} = {x: 1}; // JS引擎会把 {x} 作为代码块去解释
// 需要改为:
({x} = {x: 1});
看个例子:
let {1: a, 0: b} = [2, 3]
console.log(a, b) // 3 2
let [b, a] = {0: 2, 1: 3}
console.log(a, b) // {(intermediate value)(intermediate value)} is not iterable
第一种通过 array[1] 这种方式拿值,所以可以取到
第二种 Iterator 的方式拿值,所以报错了
下面的情形也是同样的道理:
const [a, b, c] = 'cat';
a // "c"
b // "a"
c // "t"
let {length : len} = 'hello';
len // 5
作用
交换变量的值:
let x = 1, y = 2;
[x, y] = [y, x];
函数参数默认值:
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};