JavaScript 中的嵌套对象

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

目录

1.在JavaScript 中创建嵌套对象

2. 通过解构对象访问嵌套对象属性

3. . ( dot)使用符号访问嵌套对象属性


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

2. 通过解构对象访问嵌套对象属性

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

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

句法

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

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

您可以在 .Destructring assignment

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

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

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

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

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

输出:

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

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

3. . ( 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"
}

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值