对象解构（Object Destructure）

const { key1: 变量名1, key2: 变量名2 } = { key1: value1, key2: value2 }

使用对象的结构声明变量：key是要提取的数据的key，value是声明的变量名
- 如果要提取的key与变量名称相同，可以简写成一个
- 如果对象中没有指定的key，那么变量值会是undefined

变量默认值：key : value = 值 、key = 值

在key-value右侧使用=指定默认值，变量值为undefined时使用

const { a, b: otherB } = { a : 1, b : 2 }    // 简写     a = 1; otherB = 2
const { a: otherA = 1, b = 2 } = {}          // 默认值   otherA = 1; otherB = 2

可变元素（RestElement）

const obj = {
    a: 1,
  b: 2,
  c: 3
}

const { a, ...rest } = obj  // a = 1, rest = { b: 2, c: 3 }

语法 ...变量名，变量名随意
对象解构中，可变元素会提取剩余的所有键值对，是一个对象
可变元素只能有一个，且只能写最后

数组解构（Array Destructure）

const [ 变量名1, 变量名2 ] = [ value1, value2 ]

使用数组的结构声明变量，每一个具体的元素都是变量
- 右侧数据会根据顺序被赋值给左侧的变量
- 如果对应位置没有数据，那么变量值会是undefined
变量默认值：变量 = 值
- 如果提取的数据是undefined，就会使用默认值
可以使用逗号进行占位，跳过某些元素，只提取指定位置的元素占位

右侧数据可以是任意的可迭代对象或字符串（因为字符串的包装类型）

const [a = 3] = []                    // 默认值      a = 3
const [,c,,d] = [1, 2, 3, 4]          // 占位        c = 2; e = 4
const [e,,,f] = 'abcd'                // 字符串       e = 'a'; f = 'd'
const [g, h] = new Set([1, 2])        // 可迭代对象   g = 1; h = 2

可变参数（RestElement）

const arr = [1, 2, 3, 4, 5]
const [a, ...b] = arr     // a = 1; b = [2, 3, 4, 5]

语法 ...变量名，变量名随意
一个可变元素可以同时提取多个数据
- 会提取从自身位置开始到最后的所有数据
- 可变元素是一个数组，元素是提取的数据
可变元素只能有一个，且只能写最后

解构嵌套

const obj = {
    size: {
      width: 100,
    height: 200
  },
  items: ['Cake', 'Donut'],
  extra: true
}

const { size: { width, height }, items: [ cake, donut ], extra } = obj
// width = 100; height = 200; cake = 'Cake'; donut = 'Donut'; extra = true

解构表达式可以进行嵌套，用于提取复杂结构的数据
语法：在需要嵌套的地方，将变量名替换为对应的解构表达式，就可以进行深层解构
- 简单来说，只要保持两边结构的一致即可

特殊使用场景

函数形参

function xxx ({x, y}) {
    console.log(x + y)
}

xxx({ x:1, y:2 })

函数接收一个对象，将其中的属性解构出来，方便大量参数的传递

JavaScript

解构赋值（Destructure）

对象解构（Object Destructure）

可变元素（RestElement）

数组解构（Array Destructure）

可变参数（RestElement）

解构嵌套

特殊使用场景

函数形参