JavaScript 中的嵌套对象

Shraddha Paghdar 2023年10月12日
JavaScript 中的嵌套对象

在本教程中,我们将学习什么是嵌套对象以及如何在 JavaScript 中创建它们。

在 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"
}

使用 .(dot) 表示法访问嵌套对象属性

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

首先,让我们看看如何在 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"
}

你可以在此处运行本教程中讨论的代码。

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相关文章 - JavaScript Object