TypeScript-Objekte zusammenführen

Anhand eines Beispiels stellen wir eine einfache Möglichkeit vor, zwei oder mehr Objekte zu einem einzigen Objekt zusammenzuführen und alle ihre Eigenschaften in TypeScript zu verwenden.

Objekte in TypeScript zusammenführen

Wenn Sie mit einer Anwendung arbeiten, deren Daten hauptsächlich in Objekten gespeichert sind, oder einige Daten von APIs in Form von Objekten abrufen, gibt es Situationen, in denen wir einige Objekte zusammenführen müssen. Wir wollen die Probleme immer in einem kurzen Problem vereinfachen, das leicht gelöst werden kann, oder eine Lösung, die ohne Datenverlust einfach verwendet werden kann.

Wenn wir mehrere Objekte haben, die als ein einzelnes Objekt verwendet werden könnten, müssen wir sie zusammenführen, um die Last mehrerer Objekte für eine einfachere Verwendung in einem zu verringern.

In diesem Tutorial werden wir zwei Objekte durchgehen, die unterschiedliche Werte enthalten, aber zusammengeführt werden müssen, da sie denselben Datentyp enthalten, den wir auf dem Frontend anzeigen oder in der Datenbank speichern müssen. Lassen Sie uns zwei Objekte erstellen, languageOne und languageTwo, die die unten gezeigten Programmiersprachen enthalten.

# typescript
var languageOne = {
    PLA: 'Angular',
    PLB: 'Bash',
    PLC: 'CPlusPlus',
    PLR: 'React'
};

var languageTwo = {
    PLD: 'Dart',
    PLE: 'Express',
    PLF: 'FSharp',
    PLS: 'SWIFT'
};

Wenn wir nun diese beiden Objekte zu einem einzigen Objekt kombinieren und dieses Objekt verwenden möchten, um die Werte basierend auf den Schlüsseln zu erhalten, können wir die folgende Methode verwenden, wie unten gezeigt.

# typescript
var languages = {...languageOne, ...languageTwo};

Mit dieser Codezeile weisen wir beide Objekte einem einzigen Objekt zu. Wir können die Eigenschaften eines beliebigen Objekts einfach aufrufen, indem wir den Punkt verwenden und die Eigenschaft mit ihrem Schlüssel aufrufen, wie unten gezeigt.

# typescript
console.log(languages.PLA);
console.log(languages.PLS);

Ausgang:

Wie wir im obigen Beispiel sehen können, können wir mit nur einer Codezeile beliebig viele Objekte zu einem einzigen Objekt zusammenführen. Aber dennoch gibt es eine wesentliche Frage, die wir nicht überspringen sollten.

Was passiert, wenn beide Objekte eine oder mehrere gleiche Eigenschaften haben?

Lassen Sie uns ein weiteres Beispiel durchgehen, in dem wir beide Objekte verwenden, aber wir werden einige Eigenschaften hinzufügen, die in beiden Objekten vorhanden sein werden, und wir werden überprüfen, wie es funktioniert. Die Objekte, die wir verwenden werden, sind unten gezeigt.

# typescript
var languageOne = {
    PLA: 'Angular',
    PLB: 'Bash',
    PLC: 'CPlusPlus',
    PLR: 'React',
    PLF: 'Flex'
};

var languageTwo = {
    PLD: 'Dart',
    PLE: 'Express',
    PLF: 'FSharp',
    PLS: 'SWIFT',
    PLC: 'CSharp'
};

Lassen Sie uns nun diese Objekte mit der gleichen Methode, die wir oben verwendet haben, mit einem anderen zusammenführen, wie unten gezeigt.

# typescript
var languages = {...languageOne, ...languageTwo};

Rufen wir nun die Eigenschaften PLC und PLF mit der gleichen Methode auf, die wir im obigen Beispiel verwendet haben.

# typescript
console.log(languages.PLC);
console.log(languages.PLF);

Ausgang:

Wie wir im obigen Beispiel sehen können, haben wir die Eigenschaften nur vom zweiten Objekt erhalten. Lassen Sie uns nun die Objekte umkehren und das Ergebnis wie unten gezeigt überprüfen.

# typescript
var languages = {...languageTwo, ...languageOne};

console.log(languages.PLC);
console.log(languages.PLF);

Ausgang:

Wie wir im obigen Beispiel sehen können, werden beim Zusammenführen der beiden Objekte die in beiden Objekten vorhandenen Eigenschaften basierend auf der Reihenfolge der Objekte aktualisiert, in denen wir sie zusammenführen. Wenn wir also einige eindeutige Daten haben und die gesamten Daten behalten möchten, ohne die Eigenschaften zu aktualisieren, ist dies mit dieser Methode nicht möglich.

Wenn wir die Eigenschaften jedoch basierend auf der Reihenfolge der Objekte aktualisieren möchten, können wir diese Methode verwenden, die für Sie hervorragend funktioniert.