Tutorial zum JavaScript-Array von Objekten - Erstellen, Aktualisieren und Durchlaufen von Objekten mithilfe von JS-Array-Methoden

Im Durchschnitt arbeite ich 18 Mal pro Woche mit JSON-Daten. Und ich muss immer noch nach bestimmten Möglichkeiten suchen, um sie fast jedes Mal zu manipulieren. Was wäre, wenn es einen ultimativen Leitfaden gäbe, der Ihnen immer die Antwort geben könnte?

In diesem Artikel zeige ich Ihnen die Grundlagen der Arbeit mit Objektarrays in JavaScript.

Wenn Sie jemals mit einer JSON-Struktur gearbeitet haben, haben Sie mit JavaScript-Objekten gearbeitet. Im wahrsten Sinne des Wortes. JSON steht für JavaScript Object Notation.

Das Erstellen eines Objekts ist so einfach:

{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } 

Dieses Objekt repräsentiert ein Auto. Es kann viele Arten und Farben von Autos geben, jedes Objekt repräsentiert dann ein bestimmtes Auto.

Die meiste Zeit erhalten Sie solche Daten von einem externen Dienst. Manchmal müssen Sie Objekte und ihre Arrays jedoch manuell erstellen. Wie ich es getan habe, als ich diesen E-Shop erstellt habe:

Wenn man bedenkt, dass jedes Kategorielistenelement in HTML so aussieht:

Ich wollte diesen Code nicht 12 Mal wiederholen lassen, was ihn nicht mehr wartbar machen würde.

Erstellen eines Arrays von Objekten

Aber kommen wir zurück zu den Autos. Werfen wir einen Blick auf diese Autos:

Wir können es wie folgt als Array darstellen:

let cars = [ { "color": "purple", "type": "minivan", "registration": new Date('2017-01-03'), "capacity": 7 }, { "color": "red", "type": "station wagon", "registration": new Date('2018-03-03'), "capacity": 5 }, { ... }, ... ] 

Arrays von Objekten bleiben nicht immer gleich. Wir müssen sie fast immer manipulieren. Schauen wir uns also an, wie wir einem bereits vorhandenen Array Objekte hinzufügen können.

Fügen Sie am Start ein neues Objekt hinzu - Array.unshift

Verwenden Sie, um ein Objekt an der ersten Position hinzuzufügen Array.unshift.

let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 

Fügen Sie am Ende ein neues Objekt hinzu - Array.push

Verwenden Sie, um ein Objekt an der letzten Position hinzuzufügen Array.push.

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.push(car); 

Fügen Sie in der Mitte ein neues Objekt hinzu - Array.splice

Verwenden Sie, um ein Objekt in der Mitte hinzuzufügen Array.splice. Diese Funktion ist sehr praktisch, da sie auch Elemente entfernen kann. Achten Sie auf die Parameter:

Array.splice( {index where to start}, {how many items to remove}, {items to add} ); 

Wenn wir also das rote Volkswagen Cabrio auf den fünften Platz setzen wollen, würden wir verwenden:

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.splice(4, 0, car); 

Durchlaufen einer Reihe von Objekten

Lassen Sie mich hier eine Frage stellen: Warum möchten Sie eine Reihe von Objekten durchlaufen? Der Grund, den ich frage, ist, dass die Schleife fast nie die Hauptursache für das ist, was wir erreichen wollen.

JavaScript bietet viele Funktionen, mit denen Sie Ihr Problem lösen können, ohne die Logik in einem allgemeinen Zyklus zu implementieren. Lass uns einen Blick darauf werfen.

Suchen Sie ein Objekt in einem Array anhand seiner Werte - Array.find

Nehmen wir an, wir wollen ein rotes Auto finden. Wir können die Funktion verwenden Array.find.

let car = cars.find(car => car.color === "red"); 

Diese Funktion gibt das erste übereinstimmende Element zurück:

console.log(car); // output: // { //   color: 'red', //   type: 'station wagon', //   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //   capacity: 5 // } 

Es ist auch möglich, nach mehreren Werten zu suchen:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

In diesem Fall erhalten wir das letzte Auto in der Liste.

Ruft mehrere Elemente aus einem Array ab, die einer Bedingung entsprechen - Array.filter

Die Array.findFunktion gibt nur ein Objekt zurück. Wenn wir alle roten Autos bekommen wollen, müssen wir verwenden Array.filter.

let redCars = cars.filter(car => car.color === "red"); console.log(redCars); // output: // [ // { //    color: 'red', //    type: 'station wagon', //    registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 5 //  }, // { //    color: 'red', //    type: 'cabrio', //    registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 2 //  } // ] 

Objekte eines Arrays transformieren - Array.map

Das brauchen wir sehr oft. Transformieren Sie ein Array von Objekten in ein Array von verschiedenen Objekten. Das ist ein Job für Array.map. Nehmen wir an, wir möchten unsere Autos anhand ihrer Größe in drei Gruppen einteilen.

let sizes = cars.map(car => { if (car.capacity <= 3){ return "small"; } if (car.capacity <= 5){ return "medium"; } return "large"; }); console.log(sizes); // output: // ['large','medium','medium', ..., 'small'] 

Es ist auch möglich, ein neues Objekt zu erstellen, wenn wir mehr Werte benötigen:

let carsProperties = cars.map(car => { let properties = { "capacity": car.capacity, "size": "large" };  if (car.capacity <= 5){    properties['size'] = "medium";  }  if (car.capacity <= 3){    properties['size'] = "small";  } return properties; }); console.log(carsProperties); // output: // [ //   { capacity: 7, size: 'large' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 2, size: 'small' }, // ... // ] 

Fügen Sie jedem Objekt eines Arrays eine Eigenschaft hinzu - Array.forEach

But what if we want the car object too? In that case we can enhance the object for a new property size. This is a good use-case for the Array.forEach function.

cars.forEach(car => { car['size'] = "large";  if (car.capacity <= 5){    car['size'] = "medium";  }  if (car.capacity <= 3){    car['size'] = "small";  } }); 

Sort an array by a property - Array.sort

When we're done with transforming the objects, we usually need to sort them one way or another.

Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.

Let's say we want to sort the cars based on their capacity in descending order.

let sortedCars = cars.sort((c1, c2) => (c1.capacity  c2.capacity) ? -1 : 0); console.log(sortedCars); // output: // [ // { // color: 'purple', // type: 'minivan', // registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)', // capacity: 7 // }, // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // }, // ... // ] 

The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false 

You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.

Summary

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference.

Or get in touch with me and I will prepare another article :-)