变量的解构赋值

数组的解构

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

默认值：解构赋值允许指定默认值

(1)（ES6 内部使用严格相等运算符（===），只有当一个数组成员严格等于undefined，默认值才会生效）

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

(2)如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值

(3)默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

对象的解构赋值

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

(2)如果解构失败，变量的值等于undefined

(3)更改属性名：foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

(4)与数组一样，解构也可以用于嵌套结构的对象

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量
(5)对象的解构赋值可以取到继承的属性

const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);

const { foo } = obj1;
foo // "bar"

(6)对象的解构也可以指定默认值(默认值生效的条件是，对象的属性值严格等于undefined)

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

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

// 正确的写法
let x;
({x} = {x: 1});

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

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

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;//方括号这种写法，属于“属性名表达式”
first // 1
last // 3

 

字符串的解构赋值

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

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

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

let {length : len} = 'hello';
len // 5

数值和布尔值的解构赋值

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

函数参数的解构赋值

圆括号问题(建议只要有可能，就不要在模式中放置圆括号)

不能使用圆括号的情况

以下三种解构赋值不得使用圆括号。

（1）变量声明语句

（2）函数参数

函数参数也属于变量声明，因此不能带有圆括号

（3）赋值语句的模式

可以使用圆括号的情况

可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号