ECMAScript 6 变量的解构赋值

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

数组的解构赋值

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

ES6 允许写成下面这样。

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

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

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

解构的默认值：

解构赋值是允许使用默认值的

注意undefined和null的区别。

undefined 相当于什么都没有，foo取默认值。

null相当于有值，但值为null。所以foo并没有取默认值，而是解构成了null。

对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

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

变量没有对应的同名属性，导致取不到值，最后等于undefined。

如果变量名与属性名不一致，必须写成下面这样。

圆括号的使用

如果在解构之前就定义了变量，这时候你再解构会出现问题

因为 JavaScript 引擎会将{foo}理解成一个代码块，从而发生语法错误。只有不把大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

将整个解构赋值语句，放在一个圆括号里面，就可以正确执行。

字符串解构

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

函数参数的解构赋值

函数的参数也可以使用解构赋值

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。