suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich in JavaScript ein Array mit Teilobjekten aus einem anderen Array?

Wie erstelle ich in JavaScript ein Array mit Teilobjekten aus einem anderen Array?

WBOY
WBOYnach vorne
2023-08-29 10:01:02826Durchsuche

Wie erstelle ich in JavaScript ein Array mit Teilobjekten aus einem anderen Array?

Arrays sind einer der am häufigsten verwendeten Datentypen in JavaScript. Sie dienen der Speicherung von Datensätzen und ermöglichen den effizienten Zugriff und die Manipulation von Daten. Arrays können jede Art von Daten enthalten, einschließlich Grundwerte, Objekte und sogar andere Arrays.

Die Technik, Arrays von Teilobjekten aus Arrays zu erstellen, ist eine wertvolle Technik bei der Arbeit mit komplexen Datensätzen. Ein Teilobjekt enthält nur eine Teilmenge der Daten im ursprünglichen Array, sodass wir uns auf einen bestimmten Datensatz konzentrieren können. Dies ist besonders bei der Arbeit mit großen Datensätzen nützlich, da es einfacher ist, nur die notwendigen Daten zu verarbeiten.

Mit der Methode map() können Sie in JavaScript ein Array von Teilobjekten aus einem anderen Array erstellen. Mit der Methode „map()“ können Sie über ein Array iterieren und ein neues Array erstellen, dessen Ergebnis der Aufruf der bereitgestellten Funktion für jedes Element im ursprünglichen Array ist.

Grammatik

Die Syntax zum Erstellen eines Arrays von Teilobjekten aus einem anderen Array in JavaScript lautet wie folgt -

let originalArray = [
   { property1: value1, property2: value2, ... },
   { property1: value1, property2: value2, ... },
   ...
];

let partialObjects = originalArray.map(item => {
   return { partialProperty1: item.property1, partialProperty2: item.property2 };
});

In dieser Syntax ist originalArray der Name des ursprünglichen Arrays, das das Objekt enthält, aus dem das Teilobjekt erstellt werden soll. Rufen Sie die Map-Methode für dieses Array auf und übergeben Sie eine Funktion als Argument. Diese Funktion wird für jedes Element des ursprünglichen Arrays aufgerufen und zum Erstellen eines neuen Arrays von Teilobjekten verwendet.

Die an die Map-Methode übergebene Funktion benötigt ein Argument, das ein einzelnes Element des ursprünglichen Arrays ist. Es wird oft als Projekt bezeichnet. Mit dieser Funktion können Sie ein Objekt zurückgeben, das nur die Eigenschaften enthält, die Sie aus dem Originalobjekt extrahieren möchten.

Sie können auch eine Destrukturierungszuweisung verwenden, um das gleiche Ergebnis zu erzielen. 

let partialObjects = originalArray.map(({property1, property2}) => 
({partialProperty1: property1, partialProperty2: property2}));

Bitte beachten Sie, dass die Map-Methode das ursprüngliche Array nicht verändert, sondern ein neues Array erstellt, das Teilobjekte enthält.

Methode zum Erstellen eines Teilobjektarrays

Verwenden Sie die Methode „map()“

In JavaScript ist die Funktion „map()“ eine Methode, die für ein Array aufgerufen werden kann, um ein neues Array zu erstellen, mit dem Ergebnis, dass die bereitgestellte Funktion für jedes Element im ursprünglichen Array aufgerufen wird. Das neue Array verfügt über die gleiche Anzahl von Elementen wie das ursprüngliche Array, aber jedes Element wird entsprechend der von der Methode map() bereitgestellten Funktion transformiert.

Beispiel

Hier ist ein Beispiel dafür, wie man mit der Methode map() ein Array von Teilobjekten aus einem anderen Array erstellt -

<html>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019 },
         { id: 2, name: "PQR", model: 2022 },
         { id: 3, name: "XYZ", model: 2021 },
      ];   

      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      let partialArrayItems = arrayItems.map((item) => {
         return { name: item.name, model: item.model };
      });

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
          
   </script>
</body>
</html>

Im obigen Beispiel haben wir ein primitives Array, das Objekte mit den Eigenschaften ID, Name und Alter enthält. Wir verwenden die Map-Methode, um das Array zu durchlaufen und ein neues Array „partialObjects“ zu erstellen, das nur die Eigenschaften „id“ und „name“ jedes Objekts im ursprünglichen Array enthält.

Verwenden Sie Destrukturierung

Bei dieser Methode verwenden wir eine destrukturierende Zuweisung und einen Restoperator, um Eigenschaften zu extrahieren. Die Destrukturierungszuweisung extrahiert die Modell- und ID-Eigenschaften aus jedem Objekt im arrayItems-Array, während der Rest-Operator alle verbleibenden Eigenschaften in ein neues Objekt namens rest extrahiert.

Beispiel

<html>
<head>
   <title>Creating an array of partial objects from another array using destructuring </title>
</head>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019, category: "car" },
         { id: 2, name: "PQR", model: 2022, category: "bike" },
         { id: 3, name: "XYZ", model: 2021, category: "truck" },
      ];
      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      let partialArrayItems = arrayItems.map(({ model, id, ...rest }) => rest);

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
   </script>
</body>
</html>

Verwenden Sie die Methode Reduce()

Die

reduce()-Methode ist eine weitere Methode, mit der Sie über ein Array iterieren und die Ergebnisse verwenden können, um einen einzelnen Wert oder ein einzelnes Objekt zu erstellen. Dies ist nützlich, wenn Sie ein einzelnes Objekt mit Teileigenschaften mehrerer Objekte erstellen müssen.

Beispiel

<html>
<head>
   <title>Creating an array of partial objects from another array using reduce() method</title>
</head>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019, category: "car" },
         { id: 2, name: "PQR", model: 2022, category: "bike" },
         { id: 3, name: "XYZ", model: 2021, category: "truck" },
      ];

      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      const partialArrayItems = arrayItems.reduce((res, item) => {
         res.push({ id: item.id, model: item.model });
         return res;
      }, []);

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
   </script>
</body>
</html>

Fazit

Zusammenfassend ist die Methode map() ein leistungsstarkes Werkzeug zum Erstellen neuer Arrays aus vorhandenen Arrays in JavaScript. Es ermöglicht Ihnen, über ein Array zu iterieren, an jedem Element eine Operation auszuführen und mit dem Ergebnis ein neues Array zu erstellen. Dies ist nützlich, wenn Sie mit Arrays von Objekten arbeiten und Sie nur bestimmte Eigenschaften von jedem Objekt extrahieren müssen.

Es ist zu beachten, dass die Methode map() das ursprüngliche Array nicht ändert, sondern ein neues Array erstellt. Wenn Sie also das ursprüngliche Array ändern möchten, verwenden Sie die Methode forEach().

Das obige ist der detaillierte Inhalt vonWie erstelle ich in JavaScript ein Array mit Teilobjekten aus einem anderen Array?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 数据类型 运算符 foreach map 对象
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie konvertiere ich Zeichen mit JavaScript in ASCII-Codes?Nächster Artikel：Wie konvertiere ich Zeichen mit JavaScript in ASCII-Codes?

In Verbindung stehende Artikel

Mehr sehen