JavaScript 解构赋值
解构赋值语法
解构赋值语法将对象属性解包到变量中
let {firstName, lastName} = person;
它还可以解包数组和其他任何可迭代对象
let [firstName, lastName] = person;
对象解构赋值
示例
// 创建一个对象
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// 解构赋值
let {firstName, lastName} = person;
尝试一下 »
属性的顺序无关紧要
示例
// 创建一个对象
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// 解构赋值
let {lastName, firstName} = person;
尝试一下 »
注意
解构赋值不是破坏性的。
解构赋值不会改变原始对象。
对象默认值
对于可能缺失的属性，我们可以设置默认值
示例
// 创建一个对象
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// 解构赋值
let {firstName, lastName, country = "US"} = person;
尝试一下 »
对象属性别名
示例
// 创建一个对象
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// 解构赋值
let {lastName : name} = person;
尝试一下 »
字符串解构赋值
解构赋值的一种用途是解包字符串字符。
注意
解构赋值可以用于任何可迭代对象。
数组解构赋值
我们可以将数组变量提取到我们自己的变量中
示例
// 创建一个数组
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// 解构赋值
let [fruit1, fruit2] = fruits;
尝试一下 »
跳过数组值
我们可以使用两个或多个逗号跳过数组值
示例
// 创建一个数组
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// 解构赋值
let [fruit1,,,fruit2] = fruits;
尝试一下 »
数组位置值
我们可以从数组的特定索引位置提取值
示例
// 创建一个数组
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// 解构赋值
let {[0]:fruit1 ,[1]:fruit2} = fruits;
尝试一下 »
剩余属性
您可以在解构赋值语法中使用剩余属性。
此语法会将所有剩余的值存储到一个新的数组中
示例
// 创建一个数组
const numbers = [10, 20, 30, 40, 50, 60, 70];
// 解构赋值
const [a,b, ...rest] = numbers
尝试一下 »
解构映射
示例
// 创建一个映射
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// 解构赋值
let text = "";
for (const [key, value] of fruits) {
text += key + " is " + value;
}
尝试一下 »
交换 JavaScript 变量
您可以使用解构赋值交换两个变量的值
示例
let firstName = "John";
let lastName = "Doe";
// 解构赋值
[firstName, lastName] = [lastName, firstName];
尝试一下 »
