JavaScript Destructuring 解构赋值

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;

字符串解构

解构的一个用途是解包字符串字符。

// 创建一个字符串
let name = "W3Schools";

// 解构
let [a1, a2, a3, a4, a5] = name;

数组解构

我们可以将数组变量提取到我们自己的变量中:

// 创建一个数组
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;

Rest 属性

您可以使用 Rest 属性结束解构语法。

此语法会将所有剩余值存储到一个新数组中:

// 创建一个数组
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];

浏览器支持

解构 是 ES6 特性。

自 2017 年 6 月起，所有现代浏览器均已完全支持 ES6。