变量的解构赋值

概念：

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

1、数组

按照数组对应位置将数组右边的值赋给左边的变量或常量，如果没找到将赋值undefined。

//1、完全解构
let [a, b, c] = [1, 2, 3]; 
a // 1
b // 2
c // 3

// 2、部分解构
let [a, ,c] = [1, 2, 3];  
a // 1
c // 3

//3、超出解构
let [a, b, c] = [1]; 
a // 
b、c // undefined 

//4、扩展运算符解构
let [a, ...b] = [1, 2, 3];
a // 1
b // [2, 3]

//5、嵌套解构
let [a, [[b], c]] = [1, [[2], 3]];  
a // 1
b // 2
c // 3
// 其实嵌套解构同样也是根据数组数据的结构来取值的，无论嵌套基层，
// 同时也符合上面的解构规则。

// 6、默认值
let [a = 1, b = 2, b = 3] = [4, undefined, null]; 
a // 4
b // 2
c // null
// ES6 内部使用严格相等运算符（===），判断一个位置是否有值。
// 所以，只有当一个数组成员严格等于undefined，默认值才会生效。

2、对象

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

//1、完全解构
let {a, b, c} = {a: 1. b: 2, c: 3};
a // 1
b // 2
c // 3

//2、选择解构
let {b, c} = {a: 1. b: 2, c: 3};
b // 2
c // 3

//3、超出解构
let {a, b, c} = {a: 1, b: 2};
a // 1
b // 2
c // undefined

//4、扩展运算符解构
let {a, ...d} = {a: 1, b: 2, c: 3};
a // 1
d // {b: 2, c: 2}

//5、嵌套解构
let o = {
  mankind: "人类",
  type: ["男人", "女人"],
  act: { run: "跑步", eat: "吃饭"}
};

let {
  mankind,
  type: [man, woman],
  act: {run, eat}
} = o;
mankind // 人类
man // 男人
woman // 女人
run // 跑步
eat // 吃饭
type // error: typeis not defined
act  // error: act is not defined

// 上面的结构是不是很相似(因为按照结构规则去获取值的)，至于type和act为啥找不到，是因为
// 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。
// 真正被赋值的是后者，而不是前者。这其实是一种简写形式。例如
// 如果变量名与属性名一致
let {mankind: mankind} = o; 等价于 let {mankind} = o;
mankind // 人类
// 如果变量名与属性名不一致，必须写成下面这样。
let {mankind: foo} = o;
foo // 人类
mankind // error: mankind is not defined

//6、默认值
let {a = 1, b = 2, c = 3, d = 4} = {a: 5, b: undefined, c: null};
a // 5
b // 2
c // null
d // 4
// ES6 内部使用严格相等运算符（===），判断一个位置是否有值。
// 所以，只有当一个对象成员严格等于undefined或者属性值不存在时，默认值才会生效。

//7、如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
function f() {
  console.log('aaa');
}
let [x = f()] = [1];
// 上面代码中，因为x能取到值，所以函数f根本不会执行。

3、Set

Set的解构跟数组一样也是按照严格的位置来解析值的。

let set = new Set();
set.add(1);
set.add(2);
let [a, b] = set;
a // 1
b // 2

4、Map

Map的解构跟数组的嵌套解构很相似。

let map = new Map();
map.set("a", 1);
map.set("b", 2);
let [[aKey, aVal], [bKey, bVal]] = map;
aKey  // a
aVal // 1
bKey// b
bVal// 2

5、字符串

字符串同样也是根据位置来解构的。

let str = '12';
let [a, b] = str;
a // 1
b // 2

6、函数参数

函数参数解构可以根据传进来的参数类型进行相应规则的解构以及放置默认值，参数类型可能包含数组 [1,2]、对象 {a: 1, b: 2} 、字符串 '123'等等。

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

7、无法解构示例

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};