变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。只要某种数据结构具有Iterator接口，都可以进行解构。解构的规则是，只要等号右边的值不是对象，就先将其转化为对象。

1.数组的解构赋值

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

let [ , , third] = ["foo", "bar", "baz"];//third ---- "baz"

let [x, , y] = [1, 2, 3];//x--- 1   y---3

let [head, ...tail] = [1, 2, 3, 4];//head --- 1   tail--- [2, 3, 4]

let [x, y, ...z] = ['a'];//x --- "a"    y --- undefined   z ---[]

let [x, y] = [1, 2, 3];//x --- 1  y ---2

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


//如果解构不成功，变量的值就等于undefined。
let [foo] = [];
let [bar, foo] = [1];
foo的值都会等于undefined。

//如果等号的右边不是数组,会报错
let [foo] = 1;    let [foo] = undefined;   let [foo] = null;    let [foo] = {};

2.默认值

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

注意： ES6内部使用严格相等“===”判断一个位置是否有值。所以，不严格等于undefined，默认值是不会生效的。
var {x = 3} = {x: undefined};
x;  // 3
var {x = 3} = {x: null};
x;  // null

3.对象的解构赋值

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

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

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

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"     foo // error: foo is not defined
上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

4.字符串的解构赋值

const [a, b, c, d, e] = 'hello';//a ---- "h"
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值
let {length : len} = 'hello';
len // 5

5.数值和布尔值的解构赋值

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

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

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

6.函数参数的解构赋值

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

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

②变量指定默认值:
function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

③参数指定默认值，而不是为变量指定默认值

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

所以会得到与前一种写法不同的结果。