1、概念

ES6 提供了更简洁的赋值模式，从数组和对象中提取值，这被称为解构。

2、什么是解构赋值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值

通俗来说，即解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量。
示例：

	const arr = [1,2,3]
    const [a,b,c]= arr
    console.log(a,b,c);

将数组里的值获取出来，赋值给 a,b,c

3、数组解构

3.1 数组解构的概念

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

3.2 基本语法

赋值运算符 = 左侧的 [ ] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
变量的顺序对应数组单元值的位置依次进行赋值操作。

通过例子来理解一下：

第一种方法

 	//普通的数组
    const arr = [1, 2, 3]
    //批量声明变量a,b,c
    //同时将数组单元值1，2，3依次赋值给变量a,b,c
    const [a, b, c] = arr
    console.log(a, b, c);//1,2,3

第二种方法

 	//同时将数组单元值1，2，3依次赋值给变量a,b,c
    const [a, b, c] = [1, 2, 3]
    console.log(a, b, c);//1,2,3

3.3 典型应用交互2个变量

1、传统写法

	let a = '张三'
    let b = '李四'
    let tem = ''
    tem = a
    a = b
    b = tem
    console.log(a,b); //李四，张三

2、数组解构写法

 	let a = '张三'
    let b = '李四';//这里必须要有分号
    [b,a] = [a,b]
    console.log(a,b);

3.4 解构函数

 	function getValue() {
      return [1, 2]
    }
    let [a, b] = getValue()
    console.log(a, b);//1,2

3.5 变量多单元值少的情况

    const [a,b,c,d] = ['张三','李四','王五']
    console.log(a,b,c,d);//张三 李四 王五 undefined

变量的数量大于单元值数量时，多余的变量将被赋值为 undefine

防止有undefined传递单元值的情况，可以设置默认值。

    const [a='张三',b='李四',c='王五',d='赵六'] = ['张三','李四','王五']
    console.log(a,b,c,d);//张三 李四 王五 赵六

3.6 变量少单元值多的情况

    const [a,b] = ['张三','李四','王五']
    console.log(a,b);//张三 李四

利用剩余参数解决变量少单元值多的情况：

	const [a,...b] = ['张三','李四','王五']
    console.log(a,b);//张三 (2) ['李四', '王五']

3.7 按需导入，忽略某些返回值

你可以有选择性的跳过一些不想得到的返回值

    const [a, , b] = ['张三', '李四', '王五']
    console.log(a, b);//张三 王五

3.8 支持多维数组的解构

 	const [a,b] = ['张三', ['李四', '王五']]
    console.log(a);//张三
    console.log(b);//['李四', '王五']

想要拿到王五怎么办？

 	const [a,[b,c]] = ['张三', ['李四', '王五']]
    console.log(a);//张三
    console.log(b);//李四
    console.log(c);//王五

4、对象解构

4.1 对象解构的概念

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法。

4.2 基本语法

赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
对象属性的值将被赋值给与属性名相同的变量
注意解构的变量名不要和外面的变量名冲突否则报错.
对象中找不到与变量名一致的属性时变量值为 undefine

通过一个小例子理解一下，和数组解构差不多。

	//普通对象
    const user = {
      name: '张三',
      age: 18
    }
    // 批量声明变量name,age
    const { name, age } = user
    console.log(name);//张三
    console.log(age);//18

注：变量名必须和对象的属性名一致。不然返回结果是undefined。

 		//普通对象
        const user = {
            name: '张三',
            age: 18
        }
        // 批量声明变量names,ages
        const { names, ages } = user
        console.log(names);
        console.log(ages);

4.3 给新的变量名赋值

如果在解构对象之前有一个对象的同名变量，在后面进行解构赋值的时候将会报错，提示我们标识符“uname”已经声明。

	let uname = 1//同名变量
    const user = {
      uname: '张三', 
      age: 18
    }
    const { uname, age } = user
    console.log(uname);
    console.log(age);

这个时候我们就可以通过给新的变量名赋值的方法解决这个问题。

 	let uname = 1
    const user = {
      uname: '张三', 
      age: 18
    }
    const { uname: username, age } = user
    console.log(username);
    console.log(age);

4.4 数组对象解构

	const user = [
      {
        name: '李四',
        age: 18
      }
    ]
    const [{ name, age }] = user
    console.log(name, age);//李四 18

4.5 多级对象解构

	const dog = {
      name: '狗剩'
      ,
      family: {
        mother: '狗娘'
        ,
        father: '狗爹'
        ,
        sister: '狗儿'
      },
      age: 6
    }
    const { name, family: { mother, father, sister } } = dog
    console.log(name,mother,father,sister);//狗剩 狗娘 狗爹 狗儿