Erstellen Sie eine Map-Funktion für Objekte in JavaScript

1. Verwenden Sie die allgemeine map()-Methode, um eine Map-Funktion für Objekte in JavaScript zu erstellen
2. Verwenden Sie eine for in-Schleife, um eine Map-Funktion für Objekte in JavaScript zu erstellen
3. Erstellen eine neuen Objekt mit einer benutzerdefinierten Zuordnungsfunktion für Objekte in JavaScript
4. Verwenden Sie Object.entries() und Object.fromEntries(), um eine Map-Funktion für Objekte in JavaScript zu erstellen
5. Schreiben Sie eine Funktion mit Object.entries() und Object.fromEntries(), um Ihre Objekte in JavaScript abzubilden

Es gibt viele Fälle, in denen Sie bestimmte Operationen an Objekten in JavaScript ausführen möchten. Die Standardbibliothek enthält alle möglichen Methoden, um dies zu erreichen, aber das bedeutet nicht, dass jeder Fall abgedeckt ist.

In diesem Fall gibt es keine native Möglichkeit, die Attribute eines Objekts zu durchlaufen und eine Aktion auszuführen, die der Funktion Array.prototype.map ähnelt.

Wenn Sie also jedes Attribut durchgehen und ihm einen bestimmten Wert hinzufügen möchten, gibt es keine Möglichkeit, dies mit einer Standardbibliotheksmethode zu tun. Glücklicherweise können Sie Ihre Map-Funktion von Grund auf neu erstellen und nach Belieben anpassen.

Verwenden Sie die allgemeine map()-Methode, um eine Map-Funktion für Objekte in JavaScript zu erstellen

Mit der nativen Funktion map() kann diese Methode die gewünschten Ergebnisse erzielen. Sie sollten jedoch wissen, dass diese Methode das ursprüngliche Objekt ändert, anstatt ein neues zu erstellen.

Wenn Ihnen das Originalobjekt egal ist und Sie das Ergebnis möchten, können Sie dies folgendermaßen erreichen:

let testObject = {'first': 1, 'second': 2, 'third': 3};

Object.keys(testObject).map(function(key, value) {
  testObject[key] += 1
});

console.log(testObject);

Ausgabe:

{ first: 2, second: 3, third: 4 }

Verwenden Sie eine for in-Schleife, um eine Map-Funktion für Objekte in JavaScript zu erstellen

Alternativ können Sie auch eine einfache for-Schleife verwenden, um über die Attribute des Objekts zu iterieren und die gewünschten Berechnungen durchzuführen. Diese Methode verwendet die Funktion hasOwnProperty(), um zu prüfen, ob das Objekt gültige Attribute hat.

let testObject = {'first': 1, 'second': 2, 'third': 3};

for (var key in testObject) {
  if (testObject.hasOwnProperty(key)) {
    testObject[key] += 1;
  }
}

console.log(testObject);

Ausgabe:

{ first: 2, second: 3, third: 4 }

Erstellen eine neuen Objekt mit einer benutzerdefinierten Zuordnungsfunktion für Objekte in JavaScript

Wie oben erwähnt, überschreibt die vorherige Methode das ursprüngliche Objekt, während die gewünschten Operationen durchgeführt werden. Wenn Sie das nicht möchten, können Sie stattdessen ein neues Objekt erstellen und das Original intakt lassen.

Offensichtlich erfordert diese Methode mehr Code, aber das Ergebnis ist etwas sauberer.

let testObject = {'first': 1, 'second': 2, 'third': 3};

function customMap(object, mapFn) {
  return Object.keys(object).reduce(function(result, key) {
    result[key] = mapFn(object[key])
    return result
  }, {});
}

let newObject = customMap(testObject, function(value) {
  return value + 1
});

console.log(testObject);
console.log(newObject);

Ausgabe:

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }

Die Ausgabe zeigt das ursprüngliche Objekt und das neu erstellte Objekt mit den geänderten Werten. Falls Sie neugierig sind, der von uns verwendete mapFn-Parameter ist Teil der Array.from()-Methode und wurde entwickelt, um als Mapping-Funktion zu arbeiten.

Verwenden Sie Object.entries() und Object.fromEntries(), um eine Map-Funktion für Objekte in JavaScript zu erstellen

Wenn Ihr Projekt es Ihnen ermöglicht, den ES2019-Standard zu verwenden, ohne sich Gedanken über die Abwärtskompatibilität machen zu müssen, können Sie den Code reduzieren, der zum Erstellen einer Zuordnungsfunktion erforderlich ist.

So sieht der Code für diese Methode aus:

let testObject = {'first': 1, 'second': 2, 'third': 3};

let newObject = Object.fromEntries(
    Object.entries(testObject).map(([key, value]) => [key, value + 1]));

console.log(testObject);
console.log(newObject);

Ausgabe:

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }

Da dies ein Einzeiler ist, kann es sich als schwierig erweisen, es zu warten, obwohl es etwas einfacher zu implementieren ist.

Schreiben Sie eine Funktion mit Object.entries() und Object.fromEntries(), um Ihre Objekte in JavaScript abzubilden

Angenommen, Sie möchten den obigen Code überschaubarer und einfacher zu warten machen. In diesem Fall besteht die einfachste Lösung darin, Object.entries() und Object.fromEntries() in eine benutzerdefinierte Funktion zu integrieren.

So könnten Sie den vorherigen Code umschreiben:

let testObject = {'first': 1, 'second': 2, 'third': 3};

function customMap(object, func) {
  return Object.fromEntries(
      Object.entries(object).map(([key, value]) => [key, func(value)]));
}

let newObject = customMap(testObject, (x) => x + 1);

console.log(testObject);
console.log(newObject);

Ausgabe:

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }