Wie man Objekte in JavaScript filtert

  2. How-To's
  3. JavaScript-Anleitungen
  4. Wie man Objekte in JavaScript filtert
Moataz Farid 12 Oktober 2023
JavaScript JavaScript Filter JavaScript Object
  1. Verwenden Sie reduce, um ein Objekt in JavaScript zu filtern
  2. Verwenden Sie die Funktion map, um JavaScript-Objekte zu filtern
Wie man Objekte in JavaScript filtert

Dieses Tutorial führt ein, wie man ein Objekt in JavaScript filtert. Wir werden lernen, wie man eine ähnliche Filter-Methode wie im Datentyp Array zum Object in JavaScript implementiert.

Verwenden Sie reduce, um ein Objekt in JavaScript zu filtern

Lassen Sie uns nun die Funktion zum Filtern von Objekten mit Hilfe der reduce-Funktion implementieren.

Angenommen, wir haben das folgende Objekt:

var grades = {linearAlgebra: 90, chemistry: 95
biology: 90
    languages : 96
}

Das obige Objekt repräsentiert die Noten eines Schülers; wir müssen dieses Objekt filtern und erhalten nur die Fächer mit einer Note von 95 oder mehr.

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter =
    function(mainObject, filterFunction) {
  return Object.keys(mainObject)
      .filter(function(ObjectKey) {
        return filterFunction(mainObject[ObjectKey])
      })
      .reduce(function(result, ObjectKey) {
        result[ObjectKey] = mainObject[ObjectKey];
        return result;
      }, {});
}

    console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, function(grade) {
  return grade >= 95;
});

console.log('Target Subjects are ', targetSubjects);

Ausgabe:

"The grades are ", {
  biology: 90,
  chemistry: 95,
  languages: 96,
  linearAlgebra: 90
}
"Target Subjects are ", {
  chemistry: 95,
  languages: 96
}

Wir implementieren die Funktion Object.filter als Object.filter = function(mainObject, filterFunction) im obigen Beispiel. Wir können diesen Beispielcode wie unten beschrieben vereinfachen.

Object.filter = function(mainObject, filterFunction) {
  return Object.keys(mainObject)
      .filter(innerFilterFunction)
      .reduce(reduceFunction, {});
}

Er hat 3 Hauptschritte zur Implementierung der Funktion “Objekt.filter”:

  1. Object.keys() gibt ein Array von Schlüsseln aus den Schlüssel-Werte-Paaren im Objekt zurück. In unserem Beispiel ist es linearAlgebra, chemistry, biology, languages.
  2. Das Ergebnis der Funktion Object.keys() wird an die Callback-Funktion innerFilterFunction geschickt, die auch ein Argument der Filter-Funktion ist, und die Ausgabe dieser Funktion innerFilterFunction werden die gefilterten Schlüssel sein. Die Ausgabe ist in unserem Beispiel chemistry, languages.
  3. Das Ergebnis des Filters wird nun an unsere Funktion reduce() übergeben, die jeden Wert zu seinem Schlüssel addiert und ein neues Objekt zurückgibt, das alle diese Paare enthält. Das Ergebnis in unserem Beispiel ist also {chemistry: 95, languages: 96}.

Wenn wir das obige Beispiel mit der arrow-Syntax von ES6 neu erstellen wollen, könnten wir es wie folgt umschreiben: {chemistry: 95, languages: 96}.

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter = (mainObject, filterFunction) =>
    Object.keys(mainObject)
        .filter((ObjectKey) => filterFunction(mainObject[ObjectKey]))
        .reduce(
            (result, ObjectKey) =>
                (result[ObjectKey] = mainObject[ObjectKey], result),
            {});

console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, (grade) => grade >= 95);

console.log('Target Subjects are ', targetSubjects);

Ausgabe:

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}

Es verwendet den Komma-Operator, um das Objekt result zurückzugeben, und es kann auch durch Object.assign ersetzt werden, das ebenfalls das Ergebnis zurückgibt. Der Code kann also wie folgt umgeschrieben werden.

Object.filter = (mainObject, filterFunction) =>
    Object.keys(mainObject)
        .filter((ObjectKey) => filterFunction(mainObject[ObjectKey]))
        .reduce(
            (result, ObjectKey) =>
                Object.assign(result, {[ObjectKey]: mainObject[ObjectKey]}),
            {});

Verwenden Sie die Funktion map, um JavaScript-Objekte zu filtern

Da wir in der obigen Lösung die Funktion reduce verwenden, können wir auch die Funktion map verwenden, um JavaScript-Objekte zu filtern.

Object.filter = function(mainObject, filterFunction) {
  return Object.assign(...Object.keys(mainObject)
                           .filter(function(ObjectKey) {
                             return filterFunction(mainObject[ObjectKey])
                           })
                           .map(function(ObjectKey) {
                             return {[ObjectKey]: mainObject[ObjectKey]};
                           }));
}

Wir ersetzten die Funktion reduce durch die Funktion map, wie oben gezeigt, und benutzten auch die Funktion Object.assign und schickten ihr mit der Syntax spread alle Operationen von Object.keys() bis .map(), so dass die vollständige Implementierung nun wie folgt aussehen sollte:

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter =
    function(mainObject, filterFunction) {
  return Object.assign(...Object.keys(mainObject)
                           .filter(function(ObjectKey) {
                             return filterFunction(mainObject[ObjectKey])
                           })
                           .map(function(ObjectKey) {
                             return {[ObjectKey]: mainObject[ObjectKey]};
                           }));
}

    console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, (grade) => grade >= 95);

console.log('Target Subjects are ', targetSubjects);

Ausgabe:

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}

Verwandter Artikel - JavaScript Filter

Verwandter Artikel - JavaScript Object