JSでの2つの配列の比較。①重複要素のみの配列生成、②ユニーク要素のみとなる配列生成の関数(文字列配列Ver.、オブジェクト配列Ver.)

経緯

JSで2つの配列を比較する際に、単純な文字列のみの配列同士であれば比較的簡単だったが、オブジェクトが入っている配列だった場合にちょっとだけ難しかったのでその備忘録です。

1.文字列で構成されている配列2つでチェック

前提条件 (1.1と1.2で共通の条件)

比較する配列

const arrayA = ["nick", "bob", "nancy"];
const arrayB = ["nick", "michel", "denny", "bob"];

1.1 重複要素のみを取得

2つの配列に重複している要素のみの配列取得

// 重複した内容のみの配列を生成
const getDuplicateArray = (orgArr1, orgArr2) => {
    // 重複があるか判定したい配列を結合させる
    const margeArray = [...orgArr1, ...orgArr2];

    // 両配列に含まれているものなのかをincludesで判定
    const duplicatedArr = margeArray.filter(
        (item) => orgArr1.includes(item) && orgArr2.includes(item)
    );

    // Setクラスで重複している内容を削除して配列にして戻す
    const setDataStringArray = [...new Set(duplicatedArr)];

    return setDataStringArray;
};

実行結果

const duplicateArray = getDuplicateArray(arrayA, arrayB);
console.log(duplicateArray);
//  ['nick', 'bob']

---

1.2 ユニークとなる配列取得

ユニーク要素のみの配列取得

const getUniqueArray = (orgArr1, orgArr2) => {
    // 重複があるか判定したい配列を結合させる
    const margeArray = [...orgArr1, ...orgArr2];

    // Setクラスで結合した配列の重複を削除し、Arrayクラスのfromメソッドで配列にしなおす
    const uniqueStringArray = Array.from(new Set(margeArray));

    return uniqueStringArray;
};

実行結果

const uniqueArray = getUniqueArray(arrayA, arrayB);
console.log(uniqueArray);
//  ['nick', 'bob', 'nancy', 'michel', 'denny']

---

2.オブジェクトで構成されている配列でチェック

前提条件 (2.1と2.2で共通の条件)

比較する配列

const objArrayA = [
    { name: "yuta", id: 3, birth: "2000" },
    { name: "keita", id: 2, birth: "1994" },
    { name: "joe", id: 4, birth: "1991" },
    { name: "kozue", id: 1, birth: "1986" },
    { name: "takafumi", id: 5, birth: "1990" },
];
const objArrayB = [
    { name: "aki", id: 6, birth: "2002" },
    { name: "takafumi", id: 5, birth: "1990" },
    { name: "yuta", id: 3, birth: "2000" },
    { name: "zen", id: 7, birth: "1992" },
    { name: "kozue", id: 1, birth: "1986" },
];

2.1 重複要素のみを取得

重複している要素のみの配列取得関数

// 重複した配列内のオブジェクトを取得できる
const getDuplicatedMemberArray = (orgObjectArray1, orgObjectArray2) => {
    // 比較したい配列を1つに結合する
    const margeObjArray = [...orgObjectArray1, ...orgObjectArray2];

    // console.log(margeObjArray);

    // 重複している要素を抽出
    const duplicatedobjArr = margeObjArray.filter((item) => {
        // 1つ目の配列のnameのみで配列を生成
        const nameArrA = orgObjectArray1.map((v) => v.name);
        // 2つ目の配列のnameのみで配列を生成
        const nameArrB = orgObjectArray2.map((v) => v.name);

        // 両方の配列に含まれているnameなのかどうかを判定
        return nameArrA.includes(item.name) && nameArrB.includes(item.name);
    });

    // 重複している要素をSetクラスで削除、配列にして変数に格納
    const uniqueDataArray = [...new Set(duplicatedobjArr)];
    console.log(uniqueDataArray);

    const duplicatedDeleteMemberArray = uniqueData.filter(
        (member, index) =>
            uniqueDataArray.findIndex(
                (item) => item.name === member.name && item.id === member.id
            ) === index
    );
    return duplicatedDeleteMemberArray;
};

実行結果

const duplicatedMemberArray = getDuplicatedMemberArray(objArrayA, objArrayB);
console.log(duplicatedMemberArray, "重複したオブジェクトのみの配列");

// [
//     { name: "yuta", id: 3, birth: "2000" },
//     { name: "kozue", id: 1, birth: "1986" },
//     { name: "takafumi", id: 5, birth: "1990" },
// ]

---

2.2 ユニークとなるオブジェクトのみ配列を取得

この関数だけに限り、ソートして並べ直せる様にしてあります。

ユニークなオブジェクトのみの配列取得関数

// ユニークなオブジェクトのみになっている配列を戻す
const getUniqueMemberArray = ( orgObjectArray1 = [], orgObjectArray2 = [], sortKey = "", sortType = ""
) => {
    // 比較したい配列を1つに結合する
    const margeObjArray = [...orgObjectArray1, ...orgObjectArray2];
    // console.log(margeObjArray);

    const uniqueUsersArray = Array.from(
        new Map(margeObjArray.map((user) => [user.id, user])).values()
    );

    const sortTypes = ["asc", "desc"];

    if (sortKey && sortType == sortTypes[0] && sortKey == "String") {
        // こちらで文字列のnameをソート
        uniqueUsersArray.sort(function (a, b) {
            if (a.name > b.name) {
                return 1;
            } else {
                return -1;
            }
        });
    } else if (sortKey && sortType == sortTypes[0] && sortKey == "Number") {
        uniqueUsersArray.sort(function (a, b) {
            if (a.id > b.id) {
                return 1;
            } else {
                return -1;
            }
        });
    }
    return uniqueUsersArray;
};

実行結果

// 本関数はソートの機能もついているのでソートでき様に要素を追加しています。

// 配列のKeyでオブジェクトを作っています。
const sortKey = { name: String.name, id: Number.name, birth: String.name };

// 昇順降順で実施できる様にしています
const sortType = ["asc", "desc"];

const uniqueObjectArray = getUniqueMemberArray(objArrayA, objArrayB, sortKey.id, sortType[0]);

console.log(uniqueObjectArray, "重複を削除した2つの配列");
// [
//     { name: "kozue", id: 1, birth: "1986" },
//     { name: "keita", id: 2, birth: "1994" },
//     { name: "yuta", id: 3, birth: "2000" },
//     { name: "joe", id: 4, birth: "1991" },
//     { name: "takafumi", id: 5, birth: "1990" },
//     { name: "aki", id: 6, birth: "2002" },
//     { name: "zen", id: 7, birth: "1992" },
// ];

参照記事：

1. 配列同士で重複する値があるか確認する

2. 【JavaScript】配列内でオブジェクトの重複があるかチェックする方法

3. JavaScript - 配列から重複排除、4つの方法

4. 【Javascript】オブジェクトの配列をuniqueにする（重複を削除する）ときはfilterではなくMapオブジェクトを使う