迹忆客 专注技术分享

在本篇文章中，我们将学习什么是嵌套对象以及如何在 JavaScript 中创建它们。

在应用程序代码中，对象通常是嵌套的。一个对象可以有另一个对象作为属性，它可以有一个属性，一个包含更多对象的数组。

嵌套对象是位于另一个对象内部的对象。你可以在嵌套对象中创建嵌套对象。

在以下示例中，Salary 是一个位于名为 Employee 的主对象内的对象。点符号可以访问嵌套对象的属性。

const employeeInfo = {
    employeeName: "John Doe",
    employeeId: 27,
    salary: {
        2018-19: "400000INR",
        2019-20: "500000INR",
        2020-21: "650000INR"
    },
    address: {
        locality: {
            address1: "1600 pebble road",
            address2: "Nearby XYZ Bank",
        },
        city: "Mumbai",
        state: "Maharashtra",
        country: "India"
    }
}

解构赋值语法允许你将数组值或对象属性解包到不同的变量中。

解构是添加到 ES6 版本的 JavaScript 中的一个方便的特性。它可以快速方便地将对象和数组中的属性或数据提取到单独的变量中。

语法：

({key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3});

rest 属性收集解构模式尚未选择的剩余可枚举属性键。

你可以在 Destructuring assignment 的文档中找到有关 Destructuring assignment 的更多信息。

让我们首先了解如何在 JavaScript 中解构对象。

const { salary } = employeeInfo;
console.log(salary);

const { address: {locality} = {}} = employeeInfo;
console.log(locality);

在上面的例子中，我们从 employee 对象中提取 salary 对象，从 address 对象中提取 location 对象，嵌套在 employee 对象下。

如果找不到地址对象，则会抛出错误。为了避免这个错误，我们可以在提取地址对象的同时初始化空对象。

输出：

{
    2018-19: "400000INR",
    2019-20: "500000INR",
    2020-21: "650000INR"
}

{
    address1: "1600 pebble road",
    address2: "Nearby XYZ Bank"
}

属性访问方法使用点表示法或方括号表示法提供对对象属性的访问。点表示法用于逐步提取对象属性。

首先，让我们看看如何在 JavaScript 中访问对象的嵌套属性。

语法：

object.property
object['property']

在讨论对象的属性时，通常会区分属性和方法。

方法是可以调用的属性（例如，如果它具有对 Function 实例的引用作为其值）。

你可以在 Property accessors 的文档中找到有关属性访问器的更多信息。

console.log(employeeInfo.salary);
console.log(employeeInfo.address.locality);

在示例中，我们假设地址对象将出现在员工对象中。如果地址对象不存在，则会抛出错误：can not read the property of undefined。

输出：

{
    2018-19: "400000INR",
    2019-20: "500000INR",
    2020-21: "650000INR"
}

{
    address1: "1600 pebble road",
    address2: "Nearby XYZ Bank"
}