变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。只要某种数据结构具有Iterator 接口,都可以采用数组形式的解构赋值。如果解构不成功,变量的值就等于undefined。
let [a, b, c] = [1, 2, 3];
//等同于如下语句
let a = 1;
let b = 2;
let c = 3;
如果属于不完全解构的话,解构依然成功。
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
解构赋值允许指定默认值。只有解构不成功或者变量解析之后的值为undefined的时候才会使用默认值进行赋值。
let [x = 1] = [undefined];
x // 1,使用默认
let [x = 1] = [null];
x // null
对象的解构,数组解构是按照数组的排列顺序进行解构的,但是如果是对象的话需要属性名相同才能够正确解构,次序不一致对于对象的解构完全没有影响。解构失败的话依旧是undefined。
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}
上面代码有三次解构赋值,分别是对loc
、start
、line
三个属性的解构赋值。注意,最后一次对line
属性的解构赋值之中,只有line
是变量,loc
和start
都是模式,不是变量。对象的解构也可以指定默认值。
解构赋值允许等号左边的模式中不放置任何变量名。
({} = [true, false]);
({} = 'abc');
({} = []);
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
字符串的解构。字符串可以转换成一个类似数组的对象,对象有length属性。
let {length : len} = 'hello';
圆括号:只要有可能导致解构的歧义,就不得使用圆括号。
可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。
[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确
用途
(1)交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
(2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
(3)提取 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]
(4)遍历 Map 结构
任何部署了 Iterator 接口的对象,都可以用for...of
循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world