ES6: 数组解构

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1. 解构： 也就是从对象或者数组中提取变量进行赋值

2. 为什么提出： 提取数据对象需要逐个赋值，可能会为了一个小数据挖掘整个结构，ES6给数组和对象添加了解构可以方便提取数据

3.# 对象以及函数参数解构

数组解构

1. low

let a = 1
let b = 2

2. general

let a = 1, b = 2

3. good

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

类似于数值交换，可以用一行代码实现

let [a, b] = [1, 2]
[a, b] = [b, a]
console.log(a, b) // 2, 1

(1) 通过这种“模式匹配”，也就是可遍历的结构，右边的值会对应的赋予给左边的值
(2) 如果非可遍历的结构: 类似let [a] = 1，都会报错TypeError: 1 is not iterable
(3) 这是正常情况, 有时会遇到一些特殊情况

let [ , , a] = [0, 1, 2]
console.log(a) // 2

a对应的位置是右边的2，因此得到的也是2

let [a, ,b] = [1, 2, 3]
console.log(a) // 1
console.log(b) // 3

中间的自然是undefined，那么a在1的位置，b在3的位置

let [a, b, c] = [1]
console.log(a) // 1
console.log(b) // undefined
console.log(c) // undefined

从左开始对应，a对应了1后就没有值了，没有值的情况会默认赋予undefined，因此a得到1，b和c为undefined

let [a, b, ...c] = [1, null]
console.log(a) // 1
console.log(b) // null
console.log(c) // []

c是数组，如果是空则是空数组，b是非数组，如果是空则是undefined，如果是null，则是null

let [a, ...b] = [1, 2, 3, 4]
console.log(a) // 1
console.log(b) // [2, 3, 4]

数组可以把后面的值都吃掉
但不能在数组的后面定义，会报错，比如

let [...a, b] = [1, 2, 3, 4] 
// error: Rest element must be last element

let [a = 1, b] = []
console.log(a) // 1
console.log(b) // undefined

当结构里有默认值之后，会以默认值为优先，但有一种情况会覆盖，就是null

let [a = 1] = [null]
console.log(a) // null