ES6解构赋值，了解这些可以解决80%业务场景

什么是解构？

在ES5的时候，如果对象中提取某个字段，得进行申明变量后赋值的操作，步骤较为繁琐。ES6通过解构赋值操作, 可以将属性/值从对象/数组中取出，快速赋值给其他变量。

简单的例子：

// 对象
const author = {
  name: 'cmyh',
};
const {name} = author;  // 等同于 const name = user.name;
console.log(name); // cmyh

// 数组
const arr = [10, 20, 30, 40, 50];
[a, b, ...rest] = arr;
console.log(a, b, rest);  // 10 20 [30, 40, 50]

从简单中进行升级：

1. 如何赋初值？

const author = {
  name: 'cmyh',
};
const {age = '18'} = author;
console.log(age); // 18

2. 如何重命名?

（例如我不想要name，要换成nickname）

const author = {
  name: 'cmyh',
};
const {name: nickname} = author;
console.log(nickname); // 注意此时再取name就找不到了哦

3. 对象里面有对象/数组咋办？
 

const author = {
  name: 'cmyh',
  age: {
    value: '18'
  }
};
const {age: {value}} = author;
console.log(value); // 此处可以给value重命名和赋初值哦，结合上面的

做出这个题目，吃透解构：

const author = {
  name: 'cmyh',
  age: {
    value: '18'
  },
  html: {
    dom: {
      key: 'div',
      style: ['color: #333', 'width: 100','height: 100'],
    }
  }
};
// 要求：
// 1.把dom中的key取出来，并且赋值给变量domName，默认值为'body'
// 2.把style中的'color: #333'取出来，赋值给变量color，['width: 100','height: 100']赋值给变量area