在js中变量的值分为基本数据类型和复合数据类型，基本数据类型包括字符串、数值、布尔值、null、undefined；复合数据类型包括对象、数组、函数；接下来针对以上分类来说明各个数据类型的解构赋值；
那么什么是解构赋值呢？
- 解构的英文是destructuring,解构赋值意思是按照一定的规则从数组和对象中提取值，然后对变量进行赋值；
- 它用来快速地从数组和对象中提取值；在以前的开发中，如果我们想要拿到一个对象的不同属性的值，需要如下写代码；
const obj = {
name: '陈子君'，
age: 'secret',
weight: 'secret'
}
// 如果我们想要拿到obj的age值和name值，需要写如下代码；
const name = obj.name;
const age = obj.age;
以上写法很有相似的代码，现在只需要以下写法就可以
const {name, age} = obj;
一：数组的解构赋值
// 如果我们想要得到数组的值并设变量，可用以下方式
let [a,b,c] = [1,2,3]
// a=1,b=2,c=3
本质上这种写法属于‘模式匹配’，只要等号两边的模式相同，左边的变量会被赋予对应的值。
解构还可以使用嵌套数组的方式
let [a,[[b],c] = [1, [[2],3]]
// a=1,b=2,c=3
let [head, ...tail] = [1,2,3,4]
// head=1,tail=[2,3,4]
如果解构不成功，变量的值为undefined,如以下例子
let [a]=[]
// a为undefined
let [a, b] = [1]
// a=1,b为undefined
不完全结构：等号的左边只匹配等号右边的数组，这种情况下，解构依然可以成功；
let [x, y] = [1, 2, 3];
// x为1
// y 为2
还有一种情况，如果等号的右边不是数组，将会报错
let [a] = 1
let [b] = false
let [c] = NAN
以上情况都会报错
值得注意的是，解构赋值可以指定默认值，内部实现机制是：ES6内部使用严格相等运算符（===）判断一个位置是否有值；如果一个数组成员不严格相等于undefined，默认值是不会生效的。
let [foo = true] = []
// 这个例子foo指定的默认值会生效，因为如果不指定默认值，foo会为undefined
let [bar=1] = [3]
// 上面这个例子，bar指定的默认值不会生效，因为如果不指定默认值bar会为3
默认值也可以是一个表达式，但是这个表达式是惰性求值的，就是只有用到时才会求值
function fn() {
alert('haha');
}
let [x = fn()] = [1];
以上例子，fn函数不会执行，因为x可以解析到1，其实以上例子就等于以下写法
let x;
if ([1][0] === undefined) {
x = fn();
} else {
x = [1][0];
}
默认值可以引用解构赋值的其他变量，但是变量必须已经声明过；
let [x = 1, y = x] = [];
// x=1, y =1
let [ x=y, y = 1] = [];
// 上面的代码就会报错，因为当解构x时，x用到变量y，这时y还没有声明，所以会报错
二：对象的解构赋值
对象的解构赋值与数组的不同是：数组的解构赋值是由变量取值的位置决定的；而对象的解构赋值是由属性名决定，变量必须与属性同名才能取到正确的值；
let { bar, foo} = { foo: 'aaa', bar: 'bbb'};
// bar为bbb,foo为aaa,从上面的例子可以看出虽然左边的两个变量的次序与等号右边两个同名属性的次序不一致，但是取值完全没有影响；
实际上对象的解构赋值是下面形式的简写：
let { foo: foo, bar:bar} = {foo:'aa', bar:'bb'};
也就是说，对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量。真正被赋值的是后者，而不是前者
所以，如果你想定一个和属性名不一样的变量来接收值，可以写成以下方式
let { foo: abc } = {foo:'aa', bar:'bb'};
// 此时abc的值为aa, 打印foo的话就会报错，报错信息为foo is not defined
三：字符串的解构赋值
字符串也可以解构赋值，这是因为此时字符串被转换成了一个类似数组的对象
类似数组的对象都有一个length属性，因此还可以对这个属性进行解构赋值
let { length : len} = 'hello';
// len = 5
四、数值和布尔值的解构赋值
数值和布尔值解构赋值时，会先转为对象，即为包装对象，包装对象都有toString属性
let {toString: s} = 333;
// s即为Number.prototype.toString的值
由于undefined 和 null 无法转为对象，所以对它们进行解构赋值都会报错；
五、函数参数的解构赋值
函数的参数也可以使用解构赋值，如下例
function getParam（[a,b]）{
console.log(a);
console.log(b);
}
getParam([2,3])
// a 为2，b为3
参数表面上看是个数组，其实在传入参数的时候就被解构成了a,b变量；
函数参数的解构也可以使用默认值，代码如下
function add ({x=0,y=0}){
return x+y
}
add({x:3,y:4})
// 返回值为7
add（{}）;
// 返回值为0
六：用途
- 交换变量的值
let a = 1;
let b = 2;
// 如果要市b=1,a=2,如果按照es5的写法还要再定义一个中间变量，并且还要写好几句交换代码，但是现在只需要一句代码就可以搞定；
[a, b] = [b, a];
// a为2，b为1
- 从函数返回多个值
function fn() {
return {
a:1,
b:2,
c:3
}
}
let {a,b,c} = fn();
- 可以使参数与变量名对应起来
function fn({a,b,c}){}
fn({b:1, a:2, c:4})
4.简写函数参数的默认值
如果按照es5的方式设置函数参数的默认值，以下写法
function add([a,b]){
a = a || 0;
b = b || 0;
return a+b;
}
// 使用es6的写法如下
function add([a=0,b=0]){
return a+b;
}
// 两种写法得到的结果是一样的
- 引入模块时指定引入的特定方法
import React, { Component } from 'react';
