本文最后更新于 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)
|
Setting default values
如果不想给变量设置为 undefined
,那么可以使用如下语法为解构数组对应的变量设置默认值:
1 2 3
| const scores = [60, 70] let [x, y, z = 80] = scores console.log(z)
|
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)
|
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) console.log(lastName)
|
当对象的属性不存在时,可以为变量分配默认值。
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)
|
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) console.log(l)
|
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)
|