跳到主要内容

JavaScript 解构赋值

提示
  1. 简化赋值：ES6引入的解构赋值允许将数组值和对象属性轻松分配给不同的变量。
  2. 默认值和变量交换：解构赋值支持为变量指定默认值，以及使用数组解构语法交换变量值。
  3. 跳过和剩余元素：在数组解构中可以跳过不需要的元素，同时使用扩展语法...将剩余元素分配给单个变量。

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

在上述程序中，通过使用逗号分隔符,来省略第二个元素。

将剩余元素分配给单个变量​

您可以使用展开语法...将数组的剩余元素分配给一个变量。例如，

const arrValue = ["one", "two", "three", "four"];

// 数组中的解构赋值
// 将剩余元素分配给y
const [x, ...y] = arrValue;

console.log(x); // one
console.log(y); // ["two", "three", "four"]

这里，one被分配给x变量。其余的数组元素被分配给y变量。

您也可以将对象的其余属性分配给单个变量。例如，

const person = {
  name: "Sara",
  age: 25,
  gender: "female",
};

// 解构赋值
// 将剩余属性分配给rest
let { name, ...rest } = person;

console.log(name); // Sara
console.log(rest); // {age: 25, gender: "female"}

注意：带有展开语法的变量不能有尾随逗号,。您应该将这个剩余元素（带有展开语法的变量）作为最后一个变量使用。

例如，

const arrValue = ['one', 'two', 'three', 'four'];

// 抛出错误
const [ ...x, y] = arrValue;

console.log(x); // 错误

嵌套解构赋值​

您可以对数组元素进行嵌套解构。例如，

// 嵌套数组元素
const arrValue = ["one", ["two", "three"]];

// 数组中的嵌套解构赋值
const [x, [y, z]] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

这里，变量y和z被分配了嵌套元素two和three。

为了执行嵌套解构赋值，您必须将变量放在数组结构中（通过放在[]内部）。

您也可以对对象属性进行嵌套解构。例如，

const person = {
  name: "Jack",
  age: 26,
  hobbies: {
    read: true,
    playGame: true,
  },
};
// 嵌套解构
const {
  name,
  hobbies: { read, playGame },
} = person;

console.log(name); // Jack
console.log(read); // true
console.log(playGame); // true

为了执行对象的嵌套解构赋值，您必须将变量放在对象结构中（通过放在{}内部）。

注意：解构赋值特性是在 ES6 中引入的。一些浏览器可能不支持解构赋值的使用。访问 JavaScript 解构支持情况 了解更多。

最后于 更新