解构，一种黑魔法
解构是从对象中提掏出更小元素的历程。赋值是对解构出来的元素举行从新赋值。
下面的代码你能够没法在浏览器上及时测试，推荐在babel官网在线测试代码：在线测试ES6代码网址
解构的分类
1、对象解构
2、数组解构
3、夹杂解构
4、解构参数
对象解构
对象解构简朴的例子
let obj = {
a: 1,
b: [1, 2]
}
// 对象解构
const { a, b } = obj
console.log(a, b) //1 [1, 2]
在函数中运用解构赋值
解构是将对象也许数组的元素一个个提掏出来，而赋值是给元素赋值，解构赋值的作用就是给对象也许数组的元素赋值。
在挪用test()函数的时刻，我们给参数设置了默认值3，假如不从新赋值，则打印出3,3，然则举行解构赋值后，将props对象的参数解构赋值给a和b，所以打印结果是{a: 1, b: 2}
let props = {
a: 1,
b: 2
}
function test(value) {
console.log(value)
}
test({a=3, b=3} = props) // {a: 1, b: 2}
下面这个例子定义了a = 3,b = 3两个变量，如今我们想修正这2个变量的值，采纳解构赋值的体式格局能够如许做：定义一个props对象，该对象包括2个属性a和b，然后举行解构赋值，这时候就可以更新变量a和b的value。
let props = {
a: 1,
b: 2
},
a = 3,
b = 3;
//解构赋值
({ a, b } = props)
console.log(a, b) // 1, 2
在react的父子组件通报参数历程当中，也运用到了解构赋值。react demo在线测试
class Parent extends React.Component {
render() {
const {a = 3, b = 3} = this.props
return <h1>{a}-{b}</h1>
}
}
ReactDOM.render(
<Parent a="1" b="2" />,
document.getElementById('root')
);
//在浏览器衬着 1-2，默认值是 3-3，然则由于通报了新的props进来，实行了解构赋值以后a和b更新了。
嵌套对象解构
当对象条理较深时，你也能够解构出来。
let obj = {
a: {
b: {
c: 5
}
}
}
const {a: {b}} = obj
console.log(b.c) // 5
数组解构
数组解构比对象解构简朴，由于数组只要数组字面量，不需要像对象一个运用key属性。
数组解构
你能够选择性的解构元素，不需要解构的元素就运用逗号替代。
let arr = [1, 2, 3]
//解构前2个元素
const [a, b] = arr
console.log(a,b) //1 2
//解构中心的元素
const [, b,] = arr
console.log(b) // 2
解构赋值
假如你没有看邃晓上面说到的对象解构赋值的寄义，那末看完下面的数组解构赋值，也许你会有比较清楚的明白。
这个例子中，一般状况下打印a的值是haha，然则将数组arr的第一个元素解构赋值给a，a的值就变成了1。
//初始化一个变量a
let a = "haha";
//定义一个数组
let arr = [1, 2, 3];
//解构赋值a，将arr数组的第一个元素解构赋值给a，
[a] = arr;
console.log(a); // 1
运用解构赋值，还能够换取2个变量的值。
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1
嵌套数组解构
let arr = [1, [2, 3], 4];
let [a, [,b]] = arr;
console.log(a, b) // 1 3
//现实解构历程，左侧的变量和右侧的数组元素一一对应下标。
var a = arr[0],
_arr$ = arr[1],
b = _arr$[1];
不定元素解构
三个点的解构赋值必需放在一切解构元素的最末端，不然报错。
let arr = [1, 2, 3, 4];
let […a] = arr;
console.log(a) //[1,2,3,4] 这类做法就是克隆arr数组。
夹杂解构
夹杂解构指的是对象和数组夹杂起来，实行解构操纵，没什么难度。
let obj = {
a: {
id: 1
},
b: [2, 3]
}
const {
a: {id},
b:[...arr]
} = obj;
console.log(id, arr) //id = 1, arr = [2, 3]
解构参数
当给函数通报参数时，我们能够对每一个参数举行解构，我给option的参数设置了默认值，如许能够防备没有给option传参致使的报错状况。
function Ajax(url, options) {
const {timeout = 0, jsonp = true} = options
console.log(url, timeout, jsonp)
};
Ajax('baidu.com', {
timeout: 1000,
jsonp: false
}) // "baidu.com" 1000 false
总结
本章讲解了对象解构赋值和数组解构赋值，以及对象和数组夹杂状况下的解构赋值操纵，末了一个知识点是解构函数的参数。每一个都是重点，特别是末了一个，解构参数生怕你常常在用了，只是一般你没发明。
