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 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