在本教程中，您将学习 JavaScript 对象解构，它将对象的属性分配给多个变量。如果您想了解如何解构数组，可以阅读数组解构教程。

JavaScript 对象解构赋值介绍

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

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

在 ES6 之前，当你想将 person 对象的属性赋值给变量时，你通常会这样做：

let firstName = person.firstName;
let lastName = person.lastName;

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

let { firstName: fname, lastName: lname } = person;

在这个例子中，firstName 和 lastName 属性的值分别赋给 fName 和 lName变量。

在这个语法中，冒号 : 前的标识符是对象的属性，冒号后的标识符是变量。

let { property1: variable1, property2: variable2 } = object;
请注意，无论是对象字面量还是对象解构语法，属性名称始终位于左侧。

如果变量与对象的属性同名，可以使代码更简洁，通常你都是已这种方式解构对象，还使你的代码更以于阅读。如下所示：

let { firstName, lastName } = person;

console.log(firstName); // 'John'
console.log(lastName); // 'Doe'

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

可以将声明和赋值分开。但是，您必须将变量括在括号中，如果不使用括号，JavaScript 引擎会将左侧解释为块并抛出语法错误。

({firstName, lastName} = person);

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

let { firstName, lastName, middleName } = person;
console.log(middleName); // undefined

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

设置默认值

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

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

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

console.log(middleName); // ''
console.log(age); // 28

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

此外，我们还将 person 对象 age  属性分配给 currentAge 变量并将 currentAge 变量默认值设置为 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); // 28

解构空对象

在某些情况下，函数可能会返回一个对象或 null。例如：

function getPerson() {
    return null;
}

然后你使用对象解构赋值：

let { firstName, lastName } = getPerson();

console.log(firstName, lastName);

上面的代码将抛出 TypeError: Cannot destructure property 错误：

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

为避免这种情况，您可以使用或运算符 || 将 null 对象回转换为返回空对象 {}：

let { firstName, lastName } = getPerson() || {};

现在，不会发生错误。firstName 和 lastName 将是 undefined。

嵌套对象解构

假设你有一个 employee 对象，它有一个 name 对象作为 employee 对象的属性：

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

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

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

console.log(firstName); // John
console.log(lastName); // Doe

可以将一个属性多次赋值给多个变量：

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' }

解构函数参数

假设您有一个显示人物对象的函数：

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

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

display(person);

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

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

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

display(person);

它看起来不会那么冗长，尤其是当函数参数的对象有许多属性时。这种技术在 React 中经常使用。

结论

  • 对象解构默认将对象的属性分配给具有相同名称的变量。