ES 6 系列 - 赋值的新方式：解构赋值

变量的解构赋值

es 6 允许按照一定的模式，从数组和对象中提取值，然后对变量进行赋值，这被称之为解构；

一.数组的解构赋值

　　最基本写法：

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

　　更多的写法：

//---------- 完全解构成功
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
 
//---------- 解构失败
let [foo] = [];
let [bar, foo] = [1];
foo // undefined
 
//---------- 报错，等号右边不是数组（或者严格说，不是可遍历的结构）
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

二、对象的解构赋值

　　1.标准写法：

let { foo: aoo, bar: boo } = { foo: "aaa", bar: "bbb" };

　　简写：

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

　　注意： 对象的结构不需要像数组那样注重顺序，只需要注意保证变量（等号左边）名与对象属性（等号右边）名相同即可；

　　2.如果变量名和属性名不一致，必须写成下面的格式：(注意变量声明时的顺序以及使用的符号)

let { foo: css } = { foo: 'aaa', bar: 'bbb' };
css// "aaa"
 
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

　　3.对象的嵌套解构

let obj = {
　　p: [
　　　　'Hello', 
　　　　{ y: 'World' } 
　　] 
}; 
let { p: [x, { y }] } = obj; 
x // "Hello" 
y // "World"

　　我承认，一开始是看不懂的。

　　let 花括号中的 p 是模式，不是变量，同理，标准写法中也是这个原理；如果想要 p 作为变量进行赋值，可以写成：

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

　　下面这个例子，看看能不能写出结果：

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

　　答案如下：

line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}
 
// 上面的代码有三次解构赋值，分别是对 loc、 start、 line 三个属性的解构赋值；
// 最后一次对 line 属性的解构赋值之中，只有 line 是变量， loc 和 start 都是模式，不是变量；

　　

　　还有一些符合规则但应用很少的情况就不列举，详情请移步：字符串的解构赋值-阮一峰 ;

三、关于以上两种解构的默认值

　　数组解构的默认值：

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

　　es 6 的内部使用严格相等运算符（===），判断一个位置是否有值。只有严格等于 undefined，默认值才会生效。

let [x = 1] = [undefined];
x // 1
 
let [x = 1] = [null];
x // null

　　对象解构的默认值：

var {x = 3} = {};
x // 3
 
var {x, y = 5} = {x: 1};
x // 1
y // 5
 
var {x: y = 3} = {};
y // 3
 
var {x: y = 3} = {x: 5};
y // 5
 
var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

　　同样遵守严格相等的模式：

var {x = 3} = {x: undefined};
x // 3
 
var {x = 3} = {x: null};
x // null

四、字符串的解构赋值

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 都能取到值。

解构赋值的规则（实质）是：只要等号右边的值不是对象或者数组，就先将其转化成对象。而由于 undefined 和 null 无法转成对象，故对他们的解构赋值都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

六、函数参数的解构赋值

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

// 1.
function add([x, y]){
  return x + y;
}
 
add([1, 2]); // 3
 
// 2.
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
 
//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]