zhengrenzhe's blog   About

ES6解构赋值总结

结构赋值是 ES6 新增的强大特性,通过它我们可以用更简洁的代码完成变量的赋值 / 交换。

数组的解构赋值

解构赋值允许从数组或对象中提取值来对变量赋值,只要等号两边满足相同的‘模式’即可。

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

console.log(a); // 1

console.log(b); // 2

console.log(c); // 3

可以看到,只要满足同样的模式,就能完成解构赋值。解构赋值同样能应用在嵌套结构中:

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

console.log(a); // 1

console.log(b); // 2

console.log(c); // 3

即使左边缺少了变量,解构赋值依然是可以成功的:

var [a, b] = [1, 2, 3];

console.log(a); // 1

console.log(b); // 2

var [, , c] = [1, 2, 3];

console.log(3); // 3

使用结构赋值时,虽然等号左边看上去像个数组,但他并不是数组,里面的变量还是独立的。

如果赋值不成功,则变量等于undefined,因为该变量已经通过左边的结构创建了,只是为找到值赋给它而已。

var [a, b] = 1;

console.log(a); // 1

console.log(b); // undefined

要注意的是,如果等号右边是一个字符串,就会出现下面这种情况:

var [a, b] = 'abcde';

console.log(a); // a

console.log(b); // b

显然,js引擎是吧字符串当成数组用了,只要等号右边的数据是可迭代的,那它都能进行解构赋值。

进行解构赋值时,同样可以使用let或const来声明变量或常量,声明后的变量或常量仍遵守相应规则。

对象的解构赋值

对象的解构赋值规则与数组基本相同,但需要注意,数组的解构赋值是依据数组内元素的位置,而对象的解构赋值是依据对象的属性名的,只要属性名相同,就能赋值成功,这与两边对象内的次序无关。

var {b, a} = {a: 1, b: 2};

console.log(a); // 1

console.log(b); // 2

可以看到,即使等号左边是先b后a,等号右边是先a后b,只要要被赋值的变量的名称与右边对象的属性名相同,就能赋值成功。 但如果被赋值的变量名与右边对象的属性名不同,则被赋值的变量要写成对象的形式,且两边属性名要相同,这样才能赋值成功。

var {a: ha, b: he} = {a: 1, b: 2};

console.log(ha); // 1

console.log(h2); // 2

可以看到,ha和he就是要被赋值的变量,它们的名称与右边对象的属性名不同,所以需要将左边构造为对象,将变量写在属性值的位置上,同时保证两边属性名相同,这样变量才会被正确赋值。

← ES6声明总结  协同开发时的一些git操作 →