JavaScript中解构的用法

解构赋值是对赋值运算符的扩展。解构赋值主要分为数组的解构和对象的解构。

1. 解构对象

使用解构将对象的属性赋值给变量。

let animal = {
  kind: 'dog',
  name: '旺财'
}
let { kind, name } = animal
console.log(kind, name)
// 输出如下：
// dog 旺财

需要注意，如果对象的属性是一个函数，则会报错。

let animal = {
  kind: 'dog',
  name: '旺财',
  action: () => {
    console.log('汪汪')
  }
}
let { kind, name } = animal
console.log(kind, name, action)

deconstruction.html:61 Uncaught ReferenceError: action is not defined

2. 结构数组

使用解构将数组的元素赋值给变量。

let animals = [
  {
    kind: 'dog',
    name: '旺财',
  },
  {
    kind: 'cat',
    name: '咪咪',
  }
]
let [dog, cat] = animals
console.log(dog, cat)
// 输出如下：
// {kind: 'dog', name: '旺财'} {kind: 'cat', name: '咪咪'}

需要注意，数组将按照顺序进行解构，如果对应顺序的元素不进行解构则跳过。同时即使元素的类型不同，亦可以解构。

let animals = [
  {
    kind: 'dog',
    name: '旺财',
  },
  {
    kind: 'cat',
    name: '咪咪',
  }, 1, 2
]
let [dog, cat, , b] = animals
console.log(dog, cat, b)
// 输出如下：
// {kind: 'dog', name: '旺财'} {kind: 'cat', name: '咪咪'} 2

与解构对象不同的是，即使数组元素是一个函数也可以解构。

let animals = [
  {
    kind: 'dog',
    name: '旺财',
  },
  {
    kind: 'cat',
    name: '咪咪',
  }, () => { console.log('test') }
]
let [dog, cat, test] = animals
console.log(dog, cat, test)
// 输出如下：
// {kind: 'dog', name: '旺财'} {kind: 'cat', name: '咪咪'} () => { console.log('test') }

3. 设定默认值

解构可以在值未定义的情况下为变量分配默认值。

解构对象设定默认值：

let animal = {
  kind: 'dog',
  name: '旺财'
}
let { kind, name, age = 5 } = animal
console.log(kind, name, age)
// 输出如下：
// dog 旺财 5

解构数组设定默认值：

let animals = [
  {
    kind: 'dog',
    name: '旺财',
  },
  {
    kind: 'cat',
    name: '咪咪',
  }
]
let [dog, cat, hamster = {
  kind: 'hamster',
  name: '小仓',
}] = animals
console.log(dog, cat, hamster)
// 输出如下：
// {kind: 'dog', name: '旺财'} {kind: 'cat', name: '咪咪'} {kind: 'hamster', name: '小仓'}

4. 解构对象变量赋别名

在开发过程中，对象的属性名和我们要用的变量往往会有不相同的时候，那么就可以在解构的时候赋予别名。

let animal = {
  kind: 'dog',
  name: '旺财',
  action: '吠'
}
let { kind, name, action: motion } = animal
console.log(kind, name, motion)
// 输出如下：
// dog 旺财 吠

5. 与延展操作符的搭配

可以通过"…"将剩余元素或属性分配给变量。

let animal = {
  kind: 'dog',
  name: '旺财',
  action: '吠',
  a: 'a',
  b: 'b',
  c: 'c'
}
let { kind, name, ...other } = animal
console.log(kind, name, other)
// 输出如下：
// dog 旺财 {action: '吠', a: 'a', b: 'b', c: 'c'}

let numArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
let [first, second, third, ...other] = numArray
console.log(first, second, third, other)
// 输出如下：
// 0 1 2 (7) [3, 4, 5, 6, 7, 8, 9]

6. 嵌套解构

解构可用于多层嵌套的对象和数组。

let animals = [
  {
    kind: 'dog',
    name: '旺财',
  },
  {
    kind: 'cat',
    name: '咪咪',
  }
]
let [{ }, { name: catName }] = animals
console.log(catName)
// 输出如下：
// 咪咪