什么是解构赋值

本质上依然是赋值, 将左右的值对应

• 数组的解构赋值
• 对象的解构赋值
• 字符串的解构赋值
• 布尔值的解构赋值
• 函数参数的解构赋值
• 数值的解构赋值

1 数组的解构赋值

{
  // 数组的解构赋值
  let a, b, rest
  ;[a, b] = [1, 2]
  console.log(a, b) // 1 2
}

依次将右边数组的 1,2 赋值给左边数组的变量 a 和 b

剩余参数

{
  // 剩余参数的解构赋值
  let a, b, rest
  ;[a, b, ...rest] = [1, 2, 3, 4, 5, 6]
  console.log(a, b, rest)
}

依次将右边数组的 1,2 赋值给左边数组的变量 a 和 b, 将剩余部分赋值给 rest

参数个数不一致的情况

{
  // 参数个数不一致的情况
  let a, b, c, rest
  ;[a, b, c] = [1, 2]
  console.log(a, b, c) // 1 2 undefined
}

依次赋值

• 如果变量多, 值少, 多出来的变量为 undefined
• 如果变量少, 值多, 依次对应即可

默认值

{
  // 默认值
  let a, b, c, rest
  ;[a, b, c = 3] = [1, 2]
  console.log(a, b, c) // 1 2 3
}

可以解决的实际问题

示例

// 变量的交换
{
  // 变量交换
  let a = 1,
    b = 2
  ;[a, b] = [b, a]
  console.log(a, b)
}

示例

返回多个值, 只需要使用其中的一部分

{
  function foo() {
    return [1, 2, 3, 4, 5]
  }

  let [a, , , b] = foo()
  console.log(a, b) // 1 4
}

{
  function foo() {
    return [1, 2, 3, 4, 5]
  }

  let [a, , ...b] = foo()
  console.log(a, b) // 1 [3,4,5]
}

2 对象的解构赋值

{
  // 对象的解构赋值
  let { a, b } = { a: 1, b: 2 }
  console.log(a, b)
}

将右边对象中的属性 a 和 b 提取出来分别赋值给变量 a 和变量 b

默认值

{
  let { a = 10, b = 5 } = { a: 3 }
  console.log(a, b) // 3 5
}

应用场景

示例

{
  // 函数返回值解构
  function getData(id) {
    // todo 根据id查数据库, 返回数组
    return {
      number: 10,
      price: 99,
    }
  }

  let { number, price } = getData(1)
  console.log('total:' + number * price)
}

{
  const metaData = {
    title: 'outer',
    msg: [
      {
        title: 'inner',
        desc: 'description',
      },
    ],
  }

  let {
    title: outTitle,
    msg: [{ title: innerTitle }],
  } = metaData

  console.log(outTitle, innerTitle) // outer inner
}

其它的解构赋值都是基于数组和对象的解构.

#