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

什麼是陣列？

文法

建立包含多個物件的陣列

向物件新增嵌套鍵值對

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

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

方法2

範例 2

结论

首頁

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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7831

Java教學

1648

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1239

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。