Wie erstelle ich in JavaScript ein Array aus mehreren Objekten mit mehreren verschachtelten Schlüssel-Wert-Paaren?-js-Tutorial-php.cn

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

JavaScript ist eine Allzwecksprache, die häufig zum Erstellen dynamischer Webanwendungen verwendet wird. Eine der am häufigsten verwendeten Datenstrukturen in JavaScript sind Arrays. Ein Array ist eine Sammlung von Elementen, die von beliebigem Typ sein können, einschließlich Objekten. In diesem Artikel besprechen wir, wie man in JavaScript ein Array aus mehreren Objekten mit mehreren verschachtelten Schlüssel-Wert-Paaren erstellt.

Was ist ein Array?

Ein Array ist ein spezieller Objekttyp, der zum Speichern einer Sammlung von Werten verwendet wird. Die Werte können einen beliebigen Datentyp haben, beispielsweise Zahlen, Zeichenfolgen, boolesche Werte oder sogar andere Arrays. Arrays sind eine sehr leistungsstarke Funktion in JavaScript, die in vielen verschiedenen Arten von Anwendungen verwendet werden kann.

Grammatik

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

Nach dem Login kopieren

Erstellen Sie ein Array mit mehreren Objekten

Um in JavaScript ein Array mit mehreren Objekten zu erstellen, müssen wir zunächst ein leeres Array definieren, für das wir die []-Notation verwenden können. Nachdem wir das Array definiert haben, können wir die Methode push() verwenden, um ein oder mehrere Objekte zum Array hinzuzufügen. Zum Beispiel -

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

Nach dem Login kopieren

Im gegebenen Beispiel lehnen wir ein Array namens „arr“ ab, das zwei Objekte enthält. Wir haben die Methode push() verwendet, um jedes Objekt am Ende des Arrays hinzuzufügen. Hier wird das Array-Objekt mithilfe von geschweiften Klammern {} mit Schlüssel-Wert-Paaren definiert. Sobald wir das Array mit den Objekten erstellt haben, können wir nun JavaScript-Methoden oder -Operationen verwenden, um auf die Objekte und ihre Eigenschaften zuzugreifen und sie zu manipulieren.

Es gibt viele Möglichkeiten, auf Objekte in einem Array zuzugreifen. Eine Möglichkeit besteht darin, die forEach-Methode () zu verwenden, um das Array zu durchlaufen und auf jedes Objekt und seine Eigenschaften einzeln zuzugreifen, oder wir können auch Methoden wie map() oder filter( verwenden. ) zur Konvertierung oder zum Betreiben von Elementen in einem Array.

Fügen Sie verschachtelte Schlüssel-Wert-Paare zu Objekten hinzu

Nachdem wir das Array erstellt haben, können wir nun verschachtelte Schlüssel-Wert-Paare zu einem Objekt hinzufügen, indem wir ein Objekt innerhalb eines anderen Objekts definieren. Zum Beispiel -

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

Nach dem Login kopieren

Im gegebenen Beispiel haben wir myObj als Objekt mit zwei Schlüssel-Wert-Paaren definiert. Der Wert des Schlüssel2-Paares ist ein weiteres Objekt mit zwei verschachtelten Schlüssel-Wert-Paaren.

Erstellen Sie ein Array mit Objekten mit verschachtelten Schlüssel-Wert-Paaren

Um ein Array von Objekten mit verschachtelten Schlüssel-Wert-Paaren zu erstellen, können wir die oben besprochenen Techniken kombinieren. Zum Beispiel -

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

Nach dem Login kopieren

Oben haben wir ein leeres Array arr definiert und ihm mit der Methode push() zwei Objekte hinzugefügt. Der Wert von key2 ist ein weiteres mit zwei verschachtelten Schlüssel-Wert-Paaren

Zugriff auf Daten in einem Array von Objekten mithilfe verschachtelter Schlüssel-Wert-Paare

Methode 1

Bei dieser Methode verwenden wir eine Kombination aus Punktnotation und Klammernotation, um auf Daten in einem Array von Objekten mit verschachtelten Schlüssel-Wert-Paaren zuzugreifen. Die Punktnotation ermöglicht den direkten Zugriff auf die Eigenschaften eines Objekts, während wir in der eckigen Klammernotation über Variablen auf Eigenschaften zugreifen können.

Als Beispiel können wir mithilfe der Punktnotation wie folgt auf die Namenseigenschaft des ersten Objekts in arr zugreifen -

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

Nach dem Login kopieren

Hier weisen wir das erste Objekt in arr einer Variablen namens objOne zu. Mithilfe der Punktnotation können wir nun auf jede Eigenschaft von objOne zugreifen und sie einer Variablen namens object zuweisen.

Um auf das Statusattribut des Adressattributs des zweiten Objekts in arr zuzugreifen, können wir die folgende Klammernotation verwenden -

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

Nach dem Login kopieren

Hier weisen wir ein weiteres Objekt in arr einer Variablen namens objTwo zu. Mithilfe der Klammernotation können wir nun auf die Stadteigenschaft von objTwo zugreifen und dann die Zustandseigenschaft des verschachtelten Objekts der Adressvariablen zuweisen.

Methode 2

Eine weitere Möglichkeit, auf Daten in einem Array von Objekten mit verschachtelten Schlüssel-Wert-Paaren zuzugreifen, ist die Verwendung der forEach()-Methode. Bei dieser Methode wird das Array mit der Methode forEach() iteriert und für jedes Objekt im Array wird eine for...in-Schleife verwendet, um den Wert jedes Schlüssel-Wert-Paares zu extrahieren. Diese Werte werden dann in ein neues Array verschoben.

Beispiel 1

Dieses Beispiel zeigt, wie man ein Array erstellt, das mehrere Objekte mit verschachtelten Schlüssel-Wert-Paaren enthält.

Wir haben ein leeres Array namens arr erstellt und ihm mit der Methode push() drei Objekte hinzugefügt. Jedes Objekt verfügt über ein Schlüssel-Wert-Paar: Schlüssel1 hat den Wert „Wert1“, Schlüssel2 hat den Wert „Wert2“ und so weiter. Die Push()-Methode fügt einem Array ein Element hinzu und übernimmt einen oder mehrere Parameter, die die hinzuzufügenden Elemente darstellen. Schließlich werden die drei Objekte als separate Parameter übergeben.

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

Nach dem Login kopieren

Beispiel 2

Dieses Beispiel zeigt, wie man zwei Arrays erstellt, die mehrere Objekte mit verschachtelten Schlüssel-Wert-Paaren enthalten, und diese zu einem einzelnen Array hinzufügt.

Im folgenden Code verwenden wir eine for...in-Schleife, um jedes Objekt in arr1 und arr2 zu durchlaufen und auf den mit jedem Schlüssel verknüpften Wert zuzugreifen. Anschließend verwenden wir arr3.push(object[key]), um nur den Wert in das arr3-Array zu übertragen.

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

Nach dem Login kopieren

结论

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

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich in JavaScript ein Array aus mehreren Objekten mit mehreren verschachtelten Schlüssel-Wert-Paaren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!