オブジェクトの結合 TypeScript

2つ以上のオブジェクトを 1つのオブジェクトにマージし、TypeScript でそれらのすべてのプロパティを使用する簡単な方法を例とともに紹介します。

TypeScript でオブジェクトをマージする

データの大部分がオブジェクトに格納されているアプリケーションを操作したり、オブジェクトの形式で API から一部のデータを取得したりする場合、いくつかのオブジェクトをマージする必要がある状況があります。 簡単に解決できる短い問題、またはデータを失うことなく簡単に使用できるソリューションで問題を単純化することを常に望んでいます。

単一のオブジェクトとして使用できる複数のオブジェクトがある場合、それらをマージして、複数のオブジェクトの負荷を 1つに減らして使いやすくする必要があります。

このチュートリアルでは、異なる値を含むが、フロントエンドに表示するかデータベースに保存する必要がある同じタイプのデータが含まれているため、マージする必要がある 2つのオブジェクトについて説明します。 以下に示すプログラミング言語を含む 2つのオブジェクト languageOne と languageTwo を作成しましょう。

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

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

ここで、これら 2つのオブジェクトを 1つのオブジェクトに結合し、そのオブジェクトを使用してキーに基づいて値を取得する場合は、以下に示すように次のメソッドを使用できます。

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

このコード行を使用して、両方のオブジェクトを 1つのオブジェクトに割り当てます。 以下に示すように、dot を使用してそのキーでプロパティを呼び出すことにより、任意のオブジェクトのプロパティを簡単に呼び出すことができます。

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

出力：

上記の例からわかるように、わずか 1 行のコードで、必要な数のオブジェクトを 1つのオブジェクトにマージできます。 それでも、スキップしてはならない重要な質問が 1つあります。

両方のオブジェクトに同じプロパティが 1つ以上ある場合はどうなりますか?

両方のオブジェクトを使用する別の例を見てみましょうが、両方のオブジェクトに存在するいくつかのプロパティを追加し、それがどのように機能するかを確認しましょう。 使用するオブジェクトを以下に示します。

# 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'
};

次に、以下に示すように、上で使用したのと同じ方法を使用して、これらのオブジェクトを別のオブジェクトにマージしましょう。

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

それでは、上記の例で使用したのと同じメソッドを使用して、PLC および PLF プロパティを呼び出してみましょう。

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

出力：

上記の例からわかるように、2 番目のオブジェクトからのみプロパティを取得しました。 それでは、以下のようにオブジェクトを反転させて結果を確認してみましょう。

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

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

出力：

上記の例からわかるように、2つのオブジェクトをマージする際、両方のオブジェクトに存在するプロパティは、それらをマージするオブジェクトの順序に基づいて更新されます。 そのため、一意のデータがあり、プロパティを更新せずにデータ全体を保持したい場合、この方法では不可能です。

しかし、オブジェクトの順序に基づいてプロパティを更新したい場合は、このメソッドを使用できます。