JavaScript 对象解构 - JavaScript 教程

摘要：在本教程中，您将了解 JavaScript 对象解构，它将对象的属性分配给单个变量。

如果您想学习如何解构一个数组，您可以查看数组解构教程。

JavaScript 对象解构赋值简介

假设您有一个名为 person 的对象，它具有两个属性：firstName 和 lastName。

let person = {
    firstName: 'John',
    lastName: 'Doe'
};Code language: JavaScript (javascript)

在 ES6 之前，当您要将 person 对象的属性分配给变量时，通常会这样做

let firstName = person.firstName;
let lastName = person.lastName; Code language: JavaScript (javascript)

ES6 引入了对象解构语法，它提供了一种将属性从一个对象分配给变量的替代方法

let { firstName: fname, lastName: lname } = person;Code language: JavaScript (javascript)

在此示例中，firstName 和 lastName 属性分别分配给 fName 和 lName 变量。

在此语法中

let { property1: variable1, property2: variable2 } = object;Code language: JavaScript (javascript)

冒号 (:) 之前的标识符是对象的属性，冒号之后的标识符是变量。

请注意，无论它是对象文字还是对象解构语法，属性名始终位于左侧。

如果变量与对象的属性同名，您可以通过以下方式使代码更简洁

let { firstName, lastName } = person;

console.log(firstName); // 'John'
console.log(lastName); // 'Doe'Code language: JavaScript (javascript)

在此示例中，我们声明了两个变量 firstName 和 lastName，并将 person 对象的属性在同一条语句中分配给这些变量。

可以将声明和赋值分开。但是，您必须将变量括在括号中

({firstName, lastName} = person);

如果您不使用括号，JavaScript 引擎会将左侧解释为一个块，并抛出语法错误。

当您使用对象解构将不存在的属性分配给变量时，该变量将被设置为 undefined。例如

let { firstName, lastName, middleName } = person;
console.log(middleName); // undefinedCode language: JavaScript (javascript)

在此示例中，person 对象中不存在 middleName 属性，因此 middleName 变量为 undefined。

设置默认值

当对象的属性不存在时，您可以将默认值分配给变量。例如

let person = {
    firstName: 'John',
    lastName: 'Doe',
    currentAge: 28
};

let { firstName, lastName, middleName = '', currentAge: age = 18 } = person;

console.log(middleName); // ''
console.log(age); // 28Code language: JavaScript (javascript)

在此示例中，当 person 对象没有 middleName 属性时，我们将一个空字符串分配给 middleName 变量。

此外，我们将 currentAge 属性分配给 age 变量，默认值为 18。

但是，当 person 对象确实有 middleName 属性时，赋值将照常进行

let person = {
    firstName: 'John',
    lastName: 'Doe',
    middleName: 'C.',
    currentAge: 28
};

let { firstName,  lastName, middleName = '', currentAge: age = 18 } = person;

console.log(middleName); // 'C.'
console.log(age); // 28Code language: JavaScript (javascript)

解构空对象

在某些情况下，函数可能会返回对象或空值。例如

function getPerson() {
    return null;
}Code language: JavaScript (javascript)

然后使用对象解构赋值

let { firstName, lastName } = getPerson();

console.log(firstName, lastName);Code language: JavaScript (javascript)

代码将抛出 TypeError

TypeError: Cannot destructure property 'firstName' of 'getPerson(...)' as it is null.Code language: JavaScript (javascript)

为了避免这种情况，您可以使用 OR 运算符 (||) 将 null 对象回退到一个空对象

let { firstName, lastName } = getPerson() || {};Code language: JavaScript (javascript)

现在，不会出现错误。而 firstName 和 lastName 将为 undefined。

嵌套对象解构

假设您有一个名为 employee 的对象，它具有名为 name 的对象作为属性

let employee = {
    id: 1001,
    name: {
        firstName: 'John',
        lastName: 'Doe'
    }
};Code language: JavaScript (javascript)

以下语句将嵌套 name 对象的属性解构为单个变量

let {
    name: {
        firstName,
        lastName
    }
} = employee;

console.log(firstName); // John
console.log(lastName); // DoeCode language: JavaScript (javascript)

可以将一个属性的多次赋值分配给多个变量

let employee = {
    id: 1001,
    name: {
        firstName: 'John',
        lastName: 'Doe'
    }
};

let {
    name: {
        firstName,
        lastName
    },
    name
} = employee;

console.log(firstName); // John
console.log(lastName); // Doe
console.log(name); // { firstName: 'John', lastName: 'Doe' }Code language: JavaScript (javascript)

解构函数参数

假设您有一个显示 person 对象的函数

let display = (person) => console.log(`${person.firstName} ${person.lastName}`);

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

display(person);Code language: JavaScript (javascript)

可以像这样解构传递给函数的对象参数

let display = ({firstName, lastName}) => console.log(`${firstName} ${lastName}`);

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

display(person);Code language: JavaScript (javascript)

当您使用参数对象的许多属性时，它看起来不那么冗长。这种技术通常用于 React 中。

总结

对象解构将对象的属性分配给默认情况下同名的变量。

本教程有帮助吗？