其他章节请看：
解构
我们经常使用数组或对象存储数据，然后从中提取出相关数据信息
试图解决的问题
以前开发者为了从对象或数组中提取出特定数据并赋值给变量，编写了很多重复的代码，就像这样：
function demo1(obj){
let key1 = obj.key1
let key2 = obj.key2
let key3 = obj.key3
let key4 = obj.key4
// 使用key1,key2,key3,key4变量，做进一步操作
}
demo1({
key1: 'value1',
key2: 'value2',
key3: 'value3',
key4: 'value4'
})
解决的方法
es6引入新特性：解构。来解决上面的问题，请看下面：
function demo1({key1, key2, key3, key4}){
console.log(key2) // value2
// 使用key1,key2,key3,key4变量，做进一步操作
}
demo1({
key1: 'value1',
key2: 'value2',
key3: 'value3',
key4: 'value4'
})
可以把解构简单理解成赋值
更详细的介绍请看下面补充部分
补充
对象解构
对象解构的语法：在赋值操作符左边放置一个对象字面量
声明变量时使用解构
let obj = {
key1: 'value1',
key2: 'value2'
}
let {key1, key2} = obj
console.log(key1) // value1
不要忘记初始化
// 语法错误
var {key1, key2}
// 语法错误
let {key1, key2}
变量赋值时使用解构
let obj = {
key1: 'value1',
key2: 'value2'
}
let key1 = '11';
// 一定要用小括号包裹赋值语句。否则js引擎将{}是为代码块，而代码块不允许出现在赋值语句的左侧
({key1} = obj)
console.log(key1) // value1
解构时的默认值
let obj = {
key1: 'value1',
key2: 'value2',
key5: undefined
}
let {key1, key2, key3, key4 = 'value4', key5 = 'value5'} = obj
console.log(key2) // value2
console.log(key3) // undefined 该变量名在obj中不存在，则赋值undefined
console.log(key4) // value4 对应的属性不存在，使用默认值
console.log(key5) // value5 对应属性值为undefined，使用默认值
非同名变量赋值
let obj = {
key1: 'value1'
}
let {key1: v1, key2: v2 = 'value5'} = obj
console.log(v1) // value1
console.log(v2) // value5
嵌套对象的解构
let obj = {
loc: {
key1: 'value1',
}
}
let {loc: {key1, key2, key3 = 'value3'}} = obj;
console.log(key1) // value1
console.log(key2) // undefined
console.log(key3) // value3
数组解构
数组解构语法：与对象解构语法相比要简单多了，使用的是数组字面量
声明变量时使用解构
let arr = ['value1', 'value2', 'value3', 'value4', 'value5']
let [,,key3,key4,key5] = arr
console.log(key3) // value3 逗号是占位符
console.log(key5) // value5
不要忘记初始化
// 语法错误
let [,,key3,key4,key5]
变量赋值时使用解构
不需要用小括号包裹表达式，这一点与对象解构不同
let arr = ['value1', 'value2']
let key1, key2;
[key1, key2] = arr
console.log(key1) // value1
数组解构有一个独特用法：交换两个变量的值
let key1 = 'value1';
let key2 = 'value2';
[key1, key2] = [key2, key1];
console.log(key1) // value2
console.log(key2) // value1
解构时的默认值
let arr = ['value1']
let [key1, key2 = 'value2'] = arr
console.log(key2) // value2
嵌套数组的解构
let arr = ['value1', ['value2', 'value3'], 'value4']
let [key1,[key2],key4] = arr
console.log(key2) // value2
console.log(key4) // value4
不定元素
前面我们介绍了不定参数，而在数组解构语法中有一个与之类似的概念：不定元素。在数组中，可以通过三个点（...）的语法将数组中的其余元素赋值给一个特定的变量，就像这样：
let arr = ['value1', 'value2', 'value3', 'value4']
let [key1, ...restKeys] = arr
console.log(key1) // value1
console.log(restKeys.length) // 3
console.log(restKeys[0]) // value2
注：与不定参数一样，不定元素也必须是最后一个
可以使用不定元素克隆数组
let arr = ['value1', 'value2']
let [...copy] = arr
console.log(Array.isArray(copy)) // true
console.log(copy[1]) // value2
解构参数
解构参数必须传值
function demo(key1, {key2, key3}){
console.log(key2) // value2
}
// 正确
demo('value1', {key2: 'value2'})
// 报错
demo('value1')
当调用 demo('value1') 时，js引擎实际上做了这些事:
function demo(key1, options){
let {key2, key3} = options
}
如果需要让解构参数可选，必须为其提供默认值
function demo(key1, {key2, key3} = {}){
console.log(key2) // undefined
}
// 正确
demo('value1')
下面这种写法，让解构参数支持可选，并且能提供默认值：
function demo(key1, {key2 = 'value2', key3 = 'value3'} = {}){
console.log(key2)
}
demo('value1') // value2 解构参数支持可选
demo('value1', {}) // value2
demo('value1', {key2: 'value20'}) // value20
demo('value1', {key3: 'value30'}) // value2
其他章节请看：