ES6总结系列之 变量的解构赋值 篇

变量的解构赋值：分解一个对象的结构，对变量进行赋值，前提：等号两边的模式相同

数组的解构赋值

可从数组中提取值，按照对应位置，对变量赋值

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

let [ , ,c] = [1,2,3]; 
//省略赋值  c=3

let [a, [[b], c]] = [1, [[2], 3]];
//嵌套解构 a=1,c=2,c=3

let [a] = [];
//结构不成功，变量的的值就等于undefined， 所以a = undefined

let [x = 1，j = 1] = [undefined, null];
//x = 1; j = null;
//解构指定默认值， 只有严格等于(===)undefined是才起作用

//默认值为表达式时，其求值时惰性的，即需要用时才计算，如下
function f() {
  console.log('aaa');
}
let [x = f()] = [1];
//上面代码中，因为x能取到值，所以函数f根本不会执行。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined
默认值可以引用解构赋值的其他变量，但该变量必须已经声明
//上面最后一个表达式之所以会报错，是因为x用y做默认值时，y还没有声明。

对象的解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

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

//变量名与属性名不一样,应写成
let { foo : a, bar : b } = { foo: 'aaa', bar: 'bbb' };
//a = 'aaa'; b = 'bbb'
//foo = undefined; bar = underfined;
//对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者

let { baz } = { foo: 'aaa', bar: 'bbb' };
//baz = undefined  找不到名为baz的属性

var {x: y = 3} = {};
//y = 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

数值和布尔值的解构赋值

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

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

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

函数参数的解构赋值

function add([x, y]){
  return x + y;})
add([1, 2]; // 3

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

圆括号问题

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

// 特别注意,当大括号位于行首时，JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。，可通过加圆括号解决，如下

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

仅赋值语句的非模式部分，可以使用圆括号。

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

总结要点

• 解构赋值本质是对象的解构，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
• 只要某种数据结构具有 Iterator 接口，就可以用于数组的解构赋值，如arguments类数组对象，NodeList类数组对象
• 对象的解构赋值可以取到继承的属性
• 默认值生效的条件是，解构的值严格等于undefined
• 仅赋值语句的非模式部分，可以使用圆括号。

• ES6总结系列参考自阮一峰大神的《ECMAScript6入门》