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

JavaScript 对象解构赋值介绍

假设您有一个 具有两个属性 firstNamelastNameperson 对象:。

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

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

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

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

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

在这个例子中,firstNamelastName 属性的值分别赋给 fNamelName变量。

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

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

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

let { firstName, lastName } = person;

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

在此示例中,我们声明两个变量 firstNamelastName,并在同一语句中将 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() || {};

现在,不会发生错误。firstNamelastName 将是 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 中经常使用。

结论

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