x-note
Search…
ECMAScript 6 变量的解构赋值
ES6 允许按照一定模式,从数组和对象中快速的取值

解构数组

一般用法:
1
// 按数组索引
2
let [ n1, n2, n3 ] = [ 1, 2, 3, 4, 5, 6 ];
3
console.log(n1, n2, n3); // 1, 2, 3
4
5
// 多重数组解构
6
let [ n1, [ [ n211 ], n22 ] ] = [1, [ [2], 3 ]];
7
console.log(n1, n211, n22); // 1, 2, 3
8
9
// 省略部分索引
10
let [ , , n3] = ['one', 'two', 'three'];
11
console.log(n3); // three
12
13
// 扩展运算符
14
let [first, ...others] = [1, 2, 3, 4];
15
console.log(first, others); // 1 [2, 3, 4]
Copied!
只要某种数据结构实现了Iterator 接口,都可以采用数组形式的解构赋值。
1
function* fibs() {
2
let a = 0;
3
let b = 1;
4
while (true) {
5
yield a;
6
[a, b] = [b, a + b];
7
}
8
}
9
10
let [first, second, third, fourth, fifth, sixth] = fibs();
11
console.log(first, second, third, fourth, fifth, sixth); // 0 1 1 2 3 5
Copied!
解构赋值允许指定默认值。
1
/**
2
* 当解构的值严格意义上为 undefined 时 val === undefined
3
* 会采用默认值
4
**/
5
let [a, b, c = 3, d = 4, e] = [1, null, undefined];
6
console.log(a, b, c, d, e); // 1 null 3 4 undefined
Copied!

解构对象

一般用法。
1
// 根据属性名解构,区分大小写
2
let { a, b } = { a: 1, b: 2 };
3
console.log(a, b); // 1 2
4
5
// 解构对象时,能够采用别名
6
let {
7
a: aliasA,
8
} = { a: 1 };
9
console.log(a, aliasA); // undefiend 1
10
11
// 和数组一样,能够适用于嵌套对象
12
let obj = {
13
a: [
14
'Hey',
15
{ b: 'Girl' }
16
]
17
};
18
let {
19
a: [
20
x,
21
{
22
b:y
23
}
24
]
25
} = obj;
26
console.log(x, y); // Hey Girl
Copied!

解构字符串

由于 ES6 里 String 对象实现了 Iterator 接口,所以能够对字符串按数组解构的方式进行解构
1
// 一般用法
2
const [c1, c2, c3] = 'Hey';
3
console.log(c1, c2, c3); // H e y
4
5
// 使用扩展运算符
6
const [...str] = 'Hey';
7
console.log(str); // Hey
Copied!

解构数值和布尔值

解构赋值时,如果等号右边时数值或布尔值,会先转换成对应的对象类型。
1
let { toString: numToString } = 123;
2
numToString === Number.prototype.toString // true
3
let { toString: boolToString } = true;
4
boolToString === Boolean.prototype.toString // true
Copied!

函数参数的解构赋值

1
function move({x, y} = { x: 0, y: 0 }) {
2
return [x, y];
3
}
4
move({x: 3, y: 8}); // [3, 8]
5
move({x: 3}); // [3, undefined]
6
move({}); // [undefined, undefined]
7
move(); // [0, 0]
Copied!