ECMAScript2015-解构

前言

解构赋值是我个人觉的ECAMScript6对于变成便利性提升最大的扩展


数组的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。

以前变量赋值,只能直接指定值。

1
2
let a = 1;
let b = 2;

ES6 允许写成下面这样

1
let [a, b, c] = [1, 2, 3];

上面的代码标识,可以从数组中提取值,按照对应位置,对变量赋值。

本质上,这种写法属于模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值

1
2
3
4
let [foo, [[bar], baz] = [1, [[2], 3]];

let [x, y] = [1];
// y undefined

如果解构不成功,变量的值就等于undefined

另一种情况属于不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

1
let [x, y] = [1, 2, 3];

如果等号右边不是可遍历的解构,解构赋值就会报错。

1
2
3
4
5
6
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

上述解构赋值操作都会报错,因为等号右边的值,要么转为对象以后不具备Interator接口,要么本身就不具备Interator接口。

对于Set结构,也可以使用数组的解构赋值。

1
let [x, y, z ] = new Set(['a', 'b', 'c']);

事实上,只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。

1
2
3
4
5
6
7
8
function* fibs() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a+ b];
}
}

上面代码中,fibs是一个Generator函数,原生具有Iterator接口。解构赋值会依次从这个接口获取值。

默认值

解构赋值允许制定默认值。

1
2
3
4
let [foo = true] = [];
let [x, y = 'b'] = ['a', undefined];
let [x = 1] = [null];
// x null

注意,ES6内部使用严格相等运算符,判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined

如果默认值是一个表达式,那么这个表达式是惰性求值,即只有在用到时才会求值

1
2
3
4
5
function f() {
console.log('aaa');
}

let [x = f()] = [1];

上面代码中,因为x能取到值,所以函数f根本不会执行。

默认值可以引用解构赋值的其他变量,但该变量必须已经声明

1
let [x = 1, y = x] = [2];

对象的解构赋值

解构不仅可以用于数组,还可以用于对象。对象的解构与数组最大的不同是对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

1
2
3
const { bar, foo } = { foo: 'aaa', bar: 'bbb'};
foo; // "aaa"
bar; // "bbb"

如果解构失败,变量的值等于undefined。与数组一样,解构也可以用于嵌套结构的对象。

1
2
3
4
5
6
7
8
9
10
11
let obj = {
p: [
'Hello',
{ y: 'World'}
]
};

let { p, p: [x, { y }]} = obj;
p; // ["Hello", { y: "World" }]
x; // "Hello"
y; // "World"

如果解构模式是嵌套的对象,而且自对象所在的父属性不存在,那么将会报错。

1
let {foo: {bar}} = {baz: 'baz'};

对象的解构赋值可以取得继承的属性。

注意点

如果要将一个已经声明的变量用于解构赋值,必须非常小心

1
2
3
let x;
{x} = {x: 1};
// SyntaxError: syntax error

上面代码报错是因为JavaScript引擎会将{X}理解成一个代码块,从而发生语法错误。解决的方法是不要将大括号写在行首

1
2
let x;
({x} = {x: 1});

由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构

1
2
3
4
let arr = [1,2,3];
let {0: first, [arr.length - 1] : last} = arr;
first; // 1
last; // 3

其他解构赋值

字符串的解构赋值

字符串可以解构赋值。这是因为此时,字符串被转换为一个类数组对象

1
const [a, b, c, d, e] = 'hello';

数组和布尔值的解构赋值

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象

1
2
3
4
let { toString: s} = 123;
s === Number.prototype.toString; // true
let { toString: s} = true;
s === Boolean.prototype.toString; // true

上面代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefinednull无法转为对象,所以对它们进行解构赋值,都会报错。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!