（es6入门篇）变量的解构赋值

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

一、数组的解构赋值

以前，为变量赋值只能直接指定值 如下：

let a = 1
let b = 2
let c = 3

ES6 允许写成下面这样 如下：

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

上面的代码表示，可以从数组中提取值，按照对应位置对应变量赋值，这种写法属于‘模式匹配’， 只有等号两边的模式相同，左边的变量就会被赋予对应的值。

可进行嵌套赋值 如下：

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

let [a, ...b] = [1, 2, 3]
a // 1
b // [2, 3]

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

如果结构不成功，变量的值就等于undefind 如下：

let [a] = []
let [b, c] = [2]
a // undefined
b // 2
c // undefined

另外一种情况是解构不完全成功，即等号左边的模式只匹配一部分等号右边的数组，这种情况下，解构依然可以成功 如下：

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

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

如果等号右边是不可遍历的解构，那么将会报错 如下：

let [a] = 1
let [b] = false
let [c] = NaN
let [d] = undefind
let [e] = null
let [g] = {}

// 报错 null is not iterable  等

解构赋值允许指定默认值 如下：

let [a = 1] = []
a // 1
let [b = 1, c = b] = [3, 4]
b // 3
c // 4

需要注意的是 ES6 内部使用严格相等运算符（===） 判断一个位置是否有值，所以被解构成员如果不严格等于undefind,默认值是不会生效的

二、对象的解构赋值

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

let { a, b } = { a: 1, b: 2 }
a // 1
b // 2

如果变量名与属性名不一致，必须写成这样 如下：

let { foo: bar } = { foo: '1', b: '33' }
bar // '1'

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

let { foo: bar } = { foo: '1', b: '33' }
let { aa: aa } = { aa: '00', b: '33' }
bar // '1'
aa // '00'
foo // Uncaught ReferenceError: foo is not defined

上面的代码中，foo 是匹配的模式，bar才是变量，正真被赋值的是bar。

与数组一样,解构也可以用于嵌套解构的对象 如下：

let { foo: {bar} } = { foo: {bar： '66'} }
bar // '66'

对象也可以指定默认值， 默认值生效的条件是属性值严格等于undefined

let { a = 1 } = { a: 11 }
let { b = 2 } = { a: undefined }
let { c = 3 } = {}
a // 11
b // 2
c // 3

另外由于数组是特殊的对象，因此可以对数组进行对象属性的解构 如下：

let arr = [1, 2, 3]
let { 0: first, [arr.length - 1]: last } = arr
first // 1
last // 3

三、字符串的解构赋值

数组也可以解构赋值，因为此时数组被转为一个类似数组的对象 如下：

let [a, b, c] = 'hello'
a // h
b // e
c // l

类似数组的对象都有一个length属性，因此还可以对这个属性进行解构赋值

let {length: len} = 'hello'
len // 5

四、数值和布尔值的解构赋值

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

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

let { toString: bool} = 123
bool === Boolean.prototype.toString // true

解构赋值的规则是 只要等号右边的不是数组或者对象，则会先将其转为对象。由于undefined和null无法转为对象，所以对他们解构赋值时都会报错 如下：

let { prop: a } = undefined
let { prop: b } = null
// VM645:1 Uncaught TypeError: Cannot destructure property 'prop' of 'undefined' as it is undefined.

五、函数参数的解构赋值

function arr ([x = 22, y = 1]) {
	return x + y
}
arr([1, 2]) // 3
arr([33]) // 34

function obj ({ name = 'zhouqin', age = 18 }) {
	return `${name}${age}岁`
}
obj({name: '琴琴'}) // 琴琴18岁
obj({name: '周周', age: 16}) // 周周16岁