如何在 JavaScript 中建立具有多個嵌套鍵值對的多個物件的陣列？-js教程-PHP中文網

首頁

web前端

js教程

如何在 JavaScript 中建立具有多個嵌套鍵值對的多個物件的陣列？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2023 pm 08:13 PM

如何在 JavaScript 中创建具有多个嵌套键值对的多个对象的数组？

JavaScript 是一種通用語言，廣泛用於建立動態 Web 應用程式。 JavaScript 中最常用的資料結構之一是陣列。數組是元素的集合，可以是任何類型，包括物件。在本文中，我們將討論如何在 JavaScript 中建立具有多個嵌套鍵值對的多個物件的陣列。

什麼是陣列？

陣列是一種特殊類型的對象，用於儲存值的集合。這些值可以是任何資料類型，例如數字、字串、布林值，甚至其他陣列。數組是 JavaScript 中非常強大的功能，可用於許多不同類型的應用程式。

文法

let myArray = [20, 22, 24];
Or
const arr = [hello, ‘world’];

建立包含多個物件的陣列

首先，要在 JavaScript 中建立包含多個物件的數組，我們必須定義一個空數組，為此我們可以使用 [] 表示法。定義好數組後，我們就可以使用push()方法在數組中新增一個或多個物件。例如 -

let arr = [];
arr.push({
  key1: value1,
  key2: value2
});
arr.push({
  key1: value3,
  key2: value4
});

在給定的範例中，我們拒絕了一個名為「arr」的數組，該數組有兩個物件。我們使用了 push() 方法將每個物件新增到數組的末尾。這裡的陣列物件是使用具有鍵值對的大括號 {} 定義的。一旦我們建立了包含物件的數組，現在就可以使用 JavaScript 方法或操作來存取和操作物件及其屬性。

存取陣列中的物件有多種方法，一種方法是使用forEach 方法（）循環遍歷陣列並分別存取每個物件及其屬性，或者我們也可以使用諸如map() 或filter( ）用於轉換或操作數組中的元素。

向物件新增嵌套鍵值對

建立數組後，我們現在可以透過在另一個物件中定義一個物件來將嵌套鍵值對新增至物件中。例如 -

let myObj = {
  key1: value1,
  key2: {
    nestedKey1: nestedValue1,
    nestedKey2: nestedValue2
  }
};

在給定的範例中，我們將 myObj 定義為具有兩個鍵值對的物件。 key2 對的值是另一個具有兩個嵌套鍵值對的物件。

使用具有巢狀鍵值對的物件建立陣列

要建立具有巢狀鍵值對的物件的數組，我們可以結合上面討論的技術。例如 -

let arr = [];
arr.push({
  key1: value1,
  key2: {
    nestedKey1: nestedValue1,
    nestedKey2: nestedValue2
  }
});
arr.push({
  key1: value3,
  key2: {
    nestedKey1: nestedValue3,
    nestedKey2: nestedValue4
  }
});

上面，我們定義了一個空數組arr，並使用push()方法向其中添加了兩個對象，每個對象包含兩個鍵值對，key2的值是另一個具有兩個嵌套鍵值對的對象.

使用巢狀鍵值對存取物件數組中的資料

方法 1

在這個方法中，我們將使用點表示法和括號表示法的組合來存取具有巢狀鍵值對的物件陣列中的資料。點表示法允許直接存取物件的屬性，而在方括號表示法中，我們可以使用變數存取屬性。

作為範例，我們可以使用以下的點表示法來存取 arr 中第一個物件的 name 屬性 -

const objOne = arr[0];
const object = objOne.name;

這裡，我們將 arr 中的第一個物件指派給名為 objOne 的變數。現在使用點表示法，我們可以存取 objOne 的任何屬性並將其指派給名為 object 的變數。

為了存取 arr 中第二個物件的位址屬性的狀態屬性，我們可以使用如下的括號表示法 -

const objTwo = arr[1];
const address = objTwo["city"]["state"];

這裡，我們將 arr 中的另一個物件指派給名為 objTwo 的變數。現在使用括號表示法，我們可以存取 objTwo 的 city 屬性，然後將嵌套物件的 state 屬性指派給位址變數。

方法2

存取具有巢狀鍵值對的物件陣列中的資料的另一種方法是使用 forEach() 方法。在此方法中，使用 forEach() 方法迭代數組，並且對於數組中的每個對象，使用 for...in 迴圈來提取每個鍵值對的值。然後將這些值推入一個新數組中。

範例 1

此範例顯示如何建立一個包含多個具有巢狀鍵值對的物件的陣列。

我們建立了一個名為 arr 的空數組，並使用 push() 方法在其中新增了三個物件。每個物件都有一個鍵值對：key1 的值為“value1”，key2 的值為“value2”，依此類推。 Push() 方法將項目新增到陣列中，並採用一個或多個代表要新增的項目的參數，最後，這三個物件作為單獨的參數傳入。

<!DOCTYPE html>
<html>
   <body>
      <p id="array"></p>
      <script>
         let arr = [];
         arr.push({ key1: "value1" }, { key2: "value2" }, { key3: "value 3" });
         document.getElementById("array").innerHTML = JSON.stringify(arr);
      </script>
   </body>
</html>

範例 2

此範例顯示如何建立兩個數組，其中包含多個具有巢狀鍵值對的對象，並將它們新增至一個數組。

在下面的程式碼中，我們使用 for...in 迴圈來遍歷 arr1 和 arr2 中的每個對象，以存取與每個鍵關聯的值。然後，我們使用 arr3.push(object[key]) 僅將值推送到 arr3 陣列中。

<!DOCTYPE html>
<html>
   <body>
      <p id="array"></p>
      <script>
         const arr1 = [
            { key1: "value 1" },
            { key2: "value 2" },
            { key3: "value 3" },
         ];
         const arr2 = [
            { key4: "value 4" },
            { key5: "value 5" },
            { key6: "value 6" },
         ];
         const arr3 = [];
         arr1.forEach(function (object) {
            for (const key in object) {
               arr3.push(object[key]);
            }
         });
         arr2.forEach(function (object) {
            for (const key in object) {
               arr3.push(object[key]);
            }
         });
         document.getElementById("array").innerHTML = JSON.stringify(arr3);
      </script>
   </body>
</html>

结论

数组是 JavaScript 中的一种重要数据结构，可以存储任何数据类型（包括对象）的信息集合。创建具有多个嵌套键值对的多个对象的数组是一个简单的过程，为此，我们首先定义一个空数组并使用 push() 方法向其中添加对象，其中每个对象都使用 {} （花括号）定义)，包含使用逗号分隔的键值对。要访问和操作对象及其属性，我们可以使用 JavaScript 方法。

我们还可以通过在另一个对象中定义一个对象来向对象添加嵌套键值对。使用带有嵌套键值对的对象的方法可以在 JavaScript 中创建更强大、更灵活的数据结构。我们看到了不同的方法，包括点符号和括号符号的组合，或者使用 forEach() 方法和 for...in 循环来提取每个键值对的值，以访问嵌套对象数组中的数据键值对。

以上是如何在 JavaScript 中建立具有多個嵌套鍵值對的多個物件的陣列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。