Manchmal müssen wir unterschiedliche Werte aus einem Array von Objekten in JavaScript abrufen.

In diesem Artikel sehen wir uns an, wie Sie in JavaScript unterschiedliche Werte aus einem Array von Objekten abrufen.

Verwenden von Array.prototype.map, Sets und dem Spread-Operator

Eine Möglichkeit, unterschiedliche Werte aus einem Array von JavaScript-Objekten zu erhalten, besteht darin, die mapMethode des Arrays zu verwenden, um ein Array mit den Werten einer Eigenschaft in jedem Objekt zu erhalten.

Dann können wir die doppelten Werte mit dem SetKonstruktor entfernen .

Und dann können wir die Menge mit dem Spread-Operator wieder in ein Array konvertieren.

Wir können zum Beispiel schreiben:

const array = [{
    "name": "Joe",
    "age": 17
  },
  {
    "name": "Bob",
    "age": 17
  },
  {
    "name": "Carl",
    "age": 35
  }
]
const unique = [...new Set(array.map(item => item.age))];
console.log(unique)

Und wir wollen alle unterschiedlichen Werte der ageImmobilie erhalten.

Dazu rufen wir array.mapmit einem Callback auf, der den ageEigenschaftswert von jedem Objekt zurückgibt und in das Array ablegt.

Dann übergeben wir das zurückgegebene Array an den SetKonstruktor.

Und dann konvertieren wir die Menge mit dem Spread-Operator zurück in ein Array.

Daher uniqueist [17, 35].

Verwenden von Array.prototype.map, Sets und Array.from

Wir können den Spread-Operator durch die Array.fromMethode zum Umwandeln der Menge in ein Array ersetzen

Wir können zum Beispiel schreiben:

const array = [{
    "name": "Joe",
    "age": 17
  },
  {
    "name": "Bob",
    "age": 17
  },
  {
    "name": "Carl",
    "age": 35
  }
]
const unique = Array.from(new Set(array.map(item => item.age)));
console.log(unique)

Und wir erhalten das gleiche Ergebnis wie zuvor.

Verwenden von Array.prototype.map und Array.prototype.filter

Anstatt den SetKonstruktor und den Spread-Operator zu verwenden, können wir auch die filterMethode verwenden, um die unterschiedlichen Werte zu erhalten

Wir können zum Beispiel schreiben:

const array = [{
    "name": "Joe",
    "age": 17
  },
  {
    "name": "Bob",
    "age": 17
  },
  {
    "name": "Carl",
    "age": 35
  }
]
const unique = array
  .map(item => item.age)
  .filter((value, index, self) => self.indexOf(value) === index)
console.log(unique)

valuehat den Wert des Arrays, das von zurückgegeben wird map.

indexhat den Index des Elements des Arrays map, das von der Iteration zurückgegeben wird.

Und selfist das Array, das von zurückgegeben wird map.

Und wir geben mit der indexOfMethode alle Elemente zurück, die die erste Instanz eines bestimmten Werts sind .

indexOf Methode gibt den Index des ersten Elements eines Werts zurück.

Wir können dies also verwenden, um zu prüfen, ob indexnur das erste Element jeder Instanz jedes Werts zurückgegeben wird.

Und wir erhalten das gleiche Ergebnis wie zuvor.

Abschluss

Wir können native JavaScript-Array-Methoden und den Spread-Operator verwenden, um unterschiedliche Eigenschaftswerte aus einem Array zu erhalten.

Weitere Inhalte unter plainenglish.io