JavaScript中解构赋值

写项目中经常会对后端传来得数据做提取，赋值，创建数据结构等。
传统赋值模式：

// 后端数据
data:{name:'lily',age:18,gender:'woman'}

let name = data.name
let age = data.age
let gender = data.gender

// 利用解构赋值
let {name,age,gender} = data

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

1.集合的解构赋值
注意点：变量名一定要和data中属性名一样才获取的到,解构失败结果为undefined。
内部机制：先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let data = {movie:'AA',time:2,price:{level:1,name:'fff'}}
// 1.简单得集合解构
let {movie,time,price} = data 
// movie:'AA',time:2,price:{level:1,name:'fff'}

// 2.获取集合中集合值
let {movie,time,price:{name:price}} = data
// movie:'AA',time:2,price:'fff'
冒号左边是属性名，右边是名称

// 3.复杂集合
let node = {
	loc: {
		start: {line:2,column:3}
	}
}
let {loc:{start: {line}}}
// line:2
// loc error:loc is undefined
// start error:start is undefined

2.数组得解构赋值
按照顺序，一一赋值，找不到的值则赋值为undefined

let [a,b,c,d] = [1,2,3]
// a-1 b-2 c-3 d-undefined

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

// 注意点：如果等号右边不是数组，则会报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

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

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

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

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