JavaScript 解构赋值
提示
- 简化赋值:ES6引入的解构赋值允许将数组值和对象属性轻松分配给不同的变量。
- 默认值和变量交换:解构赋值支持为变量指定默认值,以及使用数组解构语法交换变量值。
- 跳过和剩余元素:在数组解构中可以跳过不需要的元素,同时使用扩展语法
...
将剩余元素分配给单个变量。
JavaScript 解构
在 ES6 中引入的解构赋值使得将数组值和对象属性分配给不同变量变得容易。例如,
ES6之前:
// 将对象属性赋值给变量
const person = {
name: "Sara",
age: 25,
gender: "female",
};
let name = person.name;
let age = person.age;
let gender = person.gender;
console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female
从ES6开始:
// 将对象属性赋值给变量
const person = {
name: "Sara",
age: 25,
gender: "female",
};
// 解构赋值
let { name, age, gender } = person;
console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female
注意:在对象解构中,名称的顺序并不重要。
例如,您可以将上述程序写为:
let { age, gender, name } = person;
console.log(name); // Sara
注意:在解构对象时,你应该使用与相应对象键相同的变量名。
例如,
let { name1, age, gender } = person;
console.log(name1); // undefined
如果您想为对象键分配不同的变量名,可以使用:
const person = {
name: "Sara",
age: 25,
gender: "female",
};
// 解构赋值
// 使用不同的变量名
let { name: name1, age: age1, gender: gender1 } = person;
console.log(name1); // Sara
console.log(age1); // 25
console.log(gender1); // female
数组解构
您也可以以类似的方式进行数组解构。例如,
const arrValue = ["one", "two", "three"];
// 数组中的解构赋值
const [x, y, z] = arrValue;
console.log(x); // one
console.log(y); // two
console.log(z); // three
分配默认值
在使用解构时,您可以为变量分配默认值。例如,
let arrValue = [10];
// 分配默认值5和7
let [x = 5, y = 7] = arrValue;
console.log(x); // 10
console.log(y); // 7
在上述程序中,arrValue只有一个元素。因此,
- x变量将是 10
- y变量取默认值 7
在对象解构中,您可以以类似的方式传递默认值。例如,
const person = {
name: "Jack",
};
// 如果未定义,则为age分配默认值26
const { name, age = 26 } = person;
console.log(name); // Jack
console.log(age); // 26
交换变量
在这个示例中,使用解构赋值语法交换了两个变量。
// 交换变量的程序
let x = 4;
let y = 7;
// 交换变量
[x, y] = [y, x];
console.log(x); // 7
console.log(y); // 4
跳过项
您可以跳过数组中不想分配给局部变量的项。例如,
const arrValue = ["one", "two", "three"];
// 数组中的解构赋值
const [x, , z] = arrValue;
console.log(x); // one
console.log(z); // three
在上述程序中,通过使用逗号分隔符,
来省略第二个元素。