LabEx
LoginBeitreten

Das Zusammenführen von JavaScript-Objekten mit Reduce und Concat

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir den Prozess des Zusammenführens von Objekten in JavaScript erkunden. Das Lab führt Sie Schritt für Schritt durch den Prozess des Erstellens eines neuen Objekts, indem Sie zwei oder mehr Objekte kombinieren. Sie werden lernen, wie Sie Array.prototype.reduce() und Object.keys() verwenden, um über Objekte und Schlüssel zu iterieren, und Object.prototype.hasOwnProperty() und Array.prototype.concat(), um die Werte für vorhandene Schlüssel zusammenzuführen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Objekt-Merge-Funktion

Um zwei oder mehr Objekte zu kombinieren, folgen Sie diesen Schritten:

  1. Öffnen Sie das Terminal/SSH und geben Sie node ein, um zu beginnen zu programmieren.
  2. Verwenden Sie Array.prototype.reduce() zusammen mit Object.keys(), um über alle Objekte und Schlüssel zu iterieren.
  3. Verwenden Sie Object.prototype.hasOwnProperty() und Array.prototype.concat(), um die Werte für Schlüssel, die in mehreren Objekten vorhanden sind, anzuhängen.
  4. Verwenden Sie den angegebenen Codeausschnitt, um ein neues Objekt aus der Kombination von zwei oder mehr Objekten zu erstellen.
const merge = (...objs) =>
  [...objs].reduce(
    (acc, obj) =>
      Object.keys(obj).reduce((a, k) => {
        acc[k] = acc.hasOwnProperty(k)
          ? [].concat(acc[k]).concat(obj[k])
          : obj[k];
        return acc;
      }, {}),
    {}
  );

Beispielsweise betrachten Sie die folgenden Objekte:

const object = {
  a: [{ x: 2 }, { y: 4 }],
  b: 1
};
const other = {
  a: { z: 3 },
  b: [2, 3],
  c: "foo"
};

Wenn Sie diese beiden Objekte mit der merge()-Funktion kombinieren, erhalten Sie das folgende Ergebnis:

merge(object, other);
// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab „Merge Objects“ abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.