【JavaScript】nameプロパティが重複する要素を除外しながら2つのオブジェクト配列を結合する方法

次のようなオブジェクトの配列が2つあるとします。これらを1つの配列に結合し、プロパティ name の値が重複しているオブジェクトは取り除く必要があります。

const first = [{
    name: 'Rahul',
    age: 23
}, {
    name: 'Ramesh',
    age: 27
}, {
    name: 'Vikram',
    age: 35
}, {
    name: 'Harsh',
    age: 34
}, {
    name: 'Vijay',
    age: 21
}];
const second = [{
    name: 'Vijay',
    age: 21
}, {
    name: 'Vikky',
    age: 20
}, {
    name: 'Joy',
    age: 26
}, {
    name: 'Vijay',
    age: 21
}, {
    name: 'Harsh',
    age: 34
}]

結合関数の実装

そこで combineArray という関数を定義します。この関数は、結合対象となる2つの配列を引数として受け取り、重複を除いた新しい配列を返します。

const combineArray = (first, second) => {
    const combinedArray = [];
    const map = {};
    first.forEach(firstEl => {
        if(!map[firstEl.name]){
            map[firstEl.name] = firstEl;
            combinedArray.push(firstEl);
        }
    });
    second.forEach(secondEl => {
        if(!map[secondEl.name]){
            map[secondEl.name] = secondEl;
            combinedArray.push(secondEl);
        }
    })
    return combinedArray;
}
console.log(combineArray(first, second));

この関数のポイントは、オブジェクト（マップ）をキーの管理用に使っているところです。map オブジェクトに対象の名前が登録されているかどうかを確認することで、すでに追加済みの要素かどうかを判定しています。

そのため、この関数は2番目の配列から重複エントリを削除するだけでなく、仮に1番目の配列内に同じ name を持つ要素が存在していた場合にも、その重複を自動的に排除してくれます。

サンプルコード全体

const first = [{
    name: 'Rahul',
    age: 23
}, {
    name: 'Ramesh',
    age: 27
}, {
    name: 'Vikram',
    age: 35
}, {
    name: 'Harsh',
    age: 34
}, {
    name: 'Vijay',
    age: 21
}];
const second = [{
    name: 'Vijay',
    age: 21
}, {
    name: 'Vikky',
    age: 20
}, {
    name: 'Joy',
    age: 26
}, {
    name: 'Vijay',
    age: 21
}, {
    name: 'Harsh',
    age: 34
}]
const combineArray = (first, second) => {
    const combinedArray = [];
    const map = {};
    first.forEach(firstEl => {
        if(!map[firstEl.name]){
            map[firstEl.name] = firstEl;
            combinedArray.push(firstEl);
        }
    });
    second.forEach(secondEl => {
        if(!map[secondEl.name]){
            map[secondEl.name] = secondEl;
            combinedArray.push(secondEl);
        }
    })
    return combinedArray;
}
console.log(combineArray(first, second));

出力結果

上記のコードを実行すると、コンソールには以下のように出力されます。

[
{ name: 'Rahul', age: 23 },{ name: 'Ramesh', age: 27 },{ name: 'Vikram', age: 35 },
{ name: 'Harsh', age: 34 },{ name: 'Vijay', age: 21 },{ name: 'Vikky', age: 20 },
{ name: 'Joy', age: 26 }
]

出力を見ると、2番目の配列に含まれていた「Vijay」と「Harsh」の重複データが除外され、7件の一意なオブジェクトだけが結合された配列として取得できていることがわかります。