JavaScript 中的嵌套对象

在本教程中，你将学习什么是嵌套对象、如何在 JavaScript 中创建一个嵌套对象，以及如何使用解构赋值、点表示法和方括号表示法读取其属性。

在 JavaScript 中创建嵌套对象

嵌套对象是作为另一个对象的属性存储的对象。该属性可以包含另一个对象、一个数组，或者两者兼有。例如，员工记录可以将薪资历史和地址详情分别归入各自的属性之下。下面的带引号的年份键是字符串，因此要用方括号表示法来读取它们。

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

const { salary } = employeeInfo;
const { address: { locality } = {} } = employeeInfo;

console.log(salary['2020-21']);
console.log(locality.address1);
console.log(employeeInfo.address.city);
console.log(employeeInfo['address']['country']);
console.log(employeeInfo.contact?.email);

650000 INR
1600 Pebble Road
Mumbai
India
undefined

第一行读取 '2020-21' 薪资键对应的值。接下来的三行从逐层嵌套的对象中读取 address1、city 和 country。最后一行对该记录中未定义的 contact 使用可选链进行求值，并输出 undefined。

你可以通过将一个对象赋值给某个属性，然后将下一个相关值放入其中，来添加更多层级。让每一层都专注于一个有用的分组：在这里，address 对位置详情进行分组，locality 对街道地址进行分组。这种结构还让代码中通向某个值的路径清晰可见，例如 employeeInfo.address.locality.address1。

解构赋值将选定的属性复制到变量中。在此示例中，salary 指向薪资对象，而嵌套模式将 locality 对象赋值给一个同名变量。当 address 为 undefined 时，会应用默认值 {}，因此提取出的 locality 此时为 undefined。该默认值处理的是 address 属性缺失的情况；它无法防范 address 为 null 的情况，因为 JavaScript 无法从 null 中读取嵌套属性。

对于是有效 JavaScript 标识符的属性名，使用点表示法，例如 employeeInfo.address.city。方括号表示法接受字符串或变量作为键，因此适用于诸如 '2019-20' 这样无法写在点号后面的名称。当要读取的属性在运行时才确定时，变量键很有用：const year = '2020-21'; employeeInfo.salary[year]。两种形式都可以链式调用，以读取更深层的属性。请参阅 MDN 关于解构赋值和属性访问器的文档。

诸如 employeeInfo.contact.email 这样的直接链式访问在 contact 为 undefined 或 null 时会抛出 TypeError。可选链（?.）在遇到空值（nullish）的中间值时会停止并返回 undefined，如 employeeInfo.contact?.email 所示。当中间属性可能缺失时使用它；它不会创建该属性，也不会提供备用值。若要改为显示备用值，可将可选链与空值合并运算符结合使用，例如 employeeInfo.contact?.email ?? 'No email provided'。这样可以在保持原始记录不变的同时，为使用数据的代码提供一个可显示的值。