ES6 Destructuring

本文最后更新于 2024年3月11日 上午

Introduction

ES6 提供了一个称为解构赋值的新功能,将对象的属性或数组的元素解构为单独的变量。

ES 5 old-school style

在 ES 5 及以前,要想将数组的元素或对象的属性赋值给单独的变量需要使用以下语法:

Array

1
2
3
4
const scores = [70, 80, 90]
let x = scores[0],
y = scores[1],
z = scores[2]

Object

1
2
3
4
5
6
7
const user = {
name: 'stein',
age: 23,
}

let name = user.name
let age = user.age

Array Destructuring

从 ES 6 开始,可以使用如下的语法进行数组解构赋值:

1
2
const scores = [70, 80, 90]
let [x, y, z] = scores

如果 scores 数组只有两个值,那么变量 z 将会被赋值为 undefined,如果 scores 数组的元素长度大于 3,那么多余的元素将会被丢弃。

Array Destructuring Assignment and Rest syntax

可以使用 rest parameter (…) 将数组的所有剩余元素全部添加到一个新的数组中。

1
2
3
const scores = [60, 70, 80, 90, 100]
let [x, y, ...rest] = scores
console.log(rest) // [ 80, 90, 100 ]

Setting default values

如果不想给变量设置为 undefined,那么可以使用如下语法为解构数组对应的变量设置默认值:

1
2
3
const scores = [60, 70]
let [x, y, z = 80] = scores
console.log(z) // 80

Nested array destructuring

1
2
3
4
const nestedArr = ['John', 'Doe', ['Red', 'Green', 'Blue']

let [firstName, lastName, [red, green, blue]] = nestedArr
console.log(firstName, lastName, red, green, blue) // John Doe Red Green Blue

Object Destructuring

ES6 引入了对象解构语法,提供了另一种将对象属性分配给变量的方法:

1
2
3
4
5
6
let user = {
firstName: 'Stein',
lastName: 'Albert',
}

let { firstName: fName, lastName: lName } = user

firstName 和 lastName 属性分别分配给 fname 和 lname 变量。冒号(:)之前的标识符是对象的属性,冒号之后的标识符是变量。

如果变量与对象的属性具有相同的名称,则可以使代码更加简洁,如下所示:

1
2
3
let { firstName, lastName } = user
console.log(firstName) // 'Stein'
console.log(lastName) // 'Albert'

当对象的属性不存在时,可以为变量分配默认值。

1
2
3
4
5
6
7
8
9
10
let person = {
firstName: 'John',
lastName: 'Doe',
currentAge: 28,
}

let { firstName, lastName, middleName = '', currentAge: age = 18 } = person

console.log(middleName) // ''
console.log(age) // 28

Nested object destructuring

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let employee = {
id: 1001,
name: {
firstName: 'John',
lastName: 'Doe',
},
}

let {
name: { firstName: f, lastName: l },
} = employee

console.log(f) // John
console.log(l) // Doe

Destructuring function arguments

1
2
3
4
5
6
7
let display = ({ firstName, lastName }) =>
console.log(`${firstName} ${lastName}`)
let person = {
firstName: 'John',
lastName: 'Doe',
}
display(person)

ES6 Destructuring
https://stein283036.github.io/2024/03/06/ES6-Destructuring/
作者
倪京龙
发布于
2024年3月6日
更新于
2024年3月11日
许可协议