JavaScript 中的巢狀物件
本教程文章將解釋我們如何在 JavaScript 中的另一個物件中建立多個物件。
JavaScript 物件是鍵值對的集合，巢狀物件是內部具有其他物件作為其屬性的物件。巢狀是一種廣泛使用的程式設計實踐，因為它為程式碼提供了更多增強的細節。
每個物件都有自己的屬性或鍵，用於儲存物件的詳細資訊。逗號分隔每個屬性或鍵。
讓我們來看看我們如何在 Javascript 中建立物件和屬性。
const layer0 = {
layer1Item1: "Layer 1 Item 1 Text",
layer1Item2: "Layer 1 Item 2 text",
layer1Item3: "Layer 1 Item 3 Text",
layer1Item4: "Layer 1 Item 4 text"
}
在這裡，如果你能看到，const layer0 是物件的名稱。這就是我們在 Javascript 中建立物件的方式。現在在物件中，如你所見，layer1Item1、layer1Item2、layer1Item3 和 layer1Item4 是物件的屬性。這些屬性必須是獨一無二的，並且是將一個物件與另一個物件區分開來的區分因素。
現在，如果你想在另一個物件中建立一個物件，內部物件被建立為外部物件的一個屬性，並且這個內部物件只能使用外部物件訪問。
在 JavaScript 中建立巢狀物件
const layer0 = {
layer1Item1: "Layer 1 Item 1 Text",
layer1Item2: {
layer2Item1: "Layer 2 Item 2 Text",
layer2Item2: false
}
};
在此示例中，layer1Item2 是另一個物件內的新物件。但是，layer1Item1 是物件的屬性，而 layer1Item2 是一個物件。兩者看起來很相似，因為新建立的物件也是作為外部物件 layer0 的屬性建立的。
現在，如果你想訪問內部物件，你會寫出外部物件的名字，在一個點之後，你會寫出內部物件的名字。
layer0.layer1Item2
如果你想訪問內部物件中的某些屬性，程式碼將是：
layer0.layer1Item2.layer2Item1
Javascript 中的多重巢狀
Javascript 中的巢狀沒有限制。你可以建立 n 個層次結構。訪問物件的方法與訪問內部物件的方法相同，如前面的示例中所述。
const layer0 = {
layer1Item1: "Layer 1 Item 1 Text",
layer1Item2: {
layer2Item1: "Layer 2 Item 2 Text",
layer2Item2: false,
layer2Item3: {
layer3Item1: "Layer 3 Item 2 Text"
}
}
};
在此示例中，建立了 3 個物件，layer0、layer1 和 layer2。layer2 物件位於 layer1 內，而 layer1 位於 layer0 內。本示例中有 3 個層或層次結構。現在，layer2 被寫成 layer1 的一個屬性。
要訪問 layer2 的屬性，我們將編寫以下程式碼。
layer0.layer1Item2.layer2Item1.layer3Item1
現在，要在以下程式碼中向物件新增新屬性：
let layer0 = {
layer1Item1: "Layer 1 Item 1 Text",
layer1Item2: "Layer 1 Item 2 text",
layer1Item3: "Layer 1 Item 3 Text",
layer1Item4: "Layer 1 Item 4 text"
}
我們將簡單地將物件名稱與物件屬性附加一個點，併為其分配一個如下所示的值：
layer0.layer1Item5 = "New Item created";
現在生成的物件將如下所示：
{
layer1Item1: "Layer 1 Item 1 Text",
layer1Item2: "Layer 1 Item 2 text",
layer1Item3: "Layer 1 Item 3 Text",
layer1Item4: "Layer 1 Item 4 text",
layer1Item5: "New Item Created"
}
如果要從物件中刪除任何屬性，這很容易理解。我們將 delete 關鍵字與附加在物件屬性上的物件名稱一起使用，並用要刪除的點分隔。看下面的例子：
考慮我們有以下物件。
let layer0 = {
layer1Item1: "Layer 1 Item 1 Text",
layer1Item2: "Layer 1 Item 2 text",
layer1Item3: "Layer 1 Item 3 Text",
layer1Item4: "Layer 1 Item 4 text"
}
我們要刪除 layer1Item4 屬性；我們將編寫以下程式碼。
delete layer0.layer1Item4;
現在物件將如下所示。
{
layer1Item1: "Layer 1 Item 1 Text",
layer1Item2: "Layer 1 Item 2 text",
layer1Item3: "Layer 1 Item 3 Text",
}