Published 2021-11-20

ES6 - 解构赋值

ES6(ECMAScript 2015)引入了解构赋值(Destructuring Assignment)语法,它是一种方便地从数组或对象中提取值并赋给变量的方式。解构赋值可以简化代码,使得操作数据更加灵活和可读。

解构赋值可以用于数组和对象,下面分别解释它们的用法:

数组解构赋值:

数组解构赋值允许我们通过模式匹配的方式从数组中提取值并赋给变量。

示例:

const numbers = [1, 2, 3, 4, 5]

// 通过解构赋值提取数组中的值
const [a, b, c, d, e] = numbers

console.log(a) // 输出: 1
console.log(b) // 输出: 2
console.log(c) // 输出: 3
console.log(d) // 输出: 4
console.log(e) // 输出: 5

在上述示例中,我们使用解构赋值从数组 numbers 中提取了每个元素的值,并将它们分别赋给变量 abcde

解构赋值还可以使用默认值,以防提取的值为 undefined

示例:

const numbers = [1, 2]

const [a, b, c = 3] = numbers

console.log(a) // 输出: 1
console.log(b) // 输出: 2
console.log(c) // 输出: 3

在上述示例中,数组 numbers 只有两个元素,但我们通过解构赋值提取了三个变量。由于第三个元素不存在,变量 c 使用了默认值 3

对象解构赋值:

对象解构赋值允许我们通过模式匹配的方式从对象中提取值并赋给变量。

示例:

const person = {
  name: 'John',
  age: 30,
  address: '123 Main St'
}

// 通过解构赋值提取对象中的值
const {name, age, address} = person

console.log(name) // 输出: 'John'
console.log(age) // 输出: 30
console.log(address) // 输出: '123 Main St'

在上述示例中,我们使用解构赋值从对象 person 中提取了每个属性的值,并将它们赋给了同名的变量。

对象解构赋值也可以使用默认值:

示例:

const person = {
  name: 'John',
  age: 30
}

const {name, age, address = 'Unknown'} = person

console.log(name) // 输出: 'John'
console.log(age) // 输出: 30
console.log(address) // 输出: 'Unknown'

在上述示例中,对象 person 中没有 address 属性,但我们通过解构赋值为变量 address 设置了默认值 'Unknown'

解构赋值还可以嵌套使用,同时可以结合数组和对象的解构赋值。它还支持使用剩余运算符(Rest Operator)来获取剩余的数组元素或对象属性。

总结起来,ES6 的解构赋值语法提供了一种简洁而强大的方式来从数组和对象中提取值并赋给变量。它使得代码更加简洁可读,并且可以结合默认值、嵌套和剩余运算符等功能实现更复杂的数据操作。