ES6中的变量的解构赋值1

ES6中的变量的解构赋值1

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

数组的解构赋值

类似于：等号两边的模式相同，左边的变量就会被赋予右边对应的值。给几个例子：

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

可以看出左右两边的模式完全对应时，左边的变量能够被正确赋值。**若右边的值的数量少于左边变量的数量，则会导致解构失败，未能被正确赋值的变量则为undefined。注意，若是右边的值的数量多于左边变量个数，此时左边变量依然能够被正确赋值，这种情况叫做不完全解构。**例如以下的例子即为不完全解构

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

如果，等号的右边不是可遍历的结构，则会导致报错。对于Set结构也可以使用这种形式。

解构赋值允许有默认值

let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

ES6内部会使用严格相等运算符判断一个位置是否为undefined，若是，则默认值生效；否则默认值不会生效。例如若成员值为null，默认值也同样不会生效。因为null不严格等于undefined。默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

如果变量名与属性名不一致，就必须写成下面的格式：

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

const { log } = console;
log('hello') // hello

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

与数组一样，可以进行嵌套。但如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true]

注意上述圆括号是使用，是因为避免JS将{}解释为代码块，所以必须用圆括号括起来。

对象的解构赋值的默认值原则和数组相同，必须严格等于undefined才会生效。

解构赋值允许等号左边的模式之中，不放置任何变量名。

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

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

字符串的解构赋值

字符串会被转换成了一个类似数组的对象。也可以为length属性解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5

数值和布尔值的解构赋值

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

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

let {toString: s} = true;
s === Boolean.prototype.toString // true
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

本文只是个人学习总结，如有错误，欢迎指出