【JavaScript】文字列キー(name)をもとに2つの配列を比較する方法

はじめに

JavaScriptでは、オブジェクトが格納された2つの配列を、特定のキー(プロパティ)の値に基づいて比較したい場面がよくあります。オブジェクトは参照先が異なるため直接比較できない点に注意が必要です。

本記事では、map()メソッドとincludes()メソッドを組み合わせて、「name」という文字列キーを持つ2つの配列から共通する要素を抽出する方法を解説します。

サンプルデータ

まず、比較対象となる1つ目の配列は以下のとおりです。

const firstArray = [
    { "name": "John Doe" },
    { "name": "John Smith" },
    { "name": "David Miller" },
    { "name": "Bob Taylor" },
    { "name": "Carol taylor" },
    { "name": "Adam Smith" },
];

続いて、2つ目の配列です。

const secondArray = [
    { "name": "Adam Smith" },
    { "name": "John Doe" },
    { "name": "David Miller" },
    { "name": "James Taylor" }
];

比較の考え方：map()とincludes()を組み合わせる

オブジェクトそのものを比較しても、参照が異なるため意図した結果にはなりません。そこで以下の手順で比較します。

• 各オブジェクトから「name」の値だけを取り出す(map())
• 片方の配列の値が、もう片方の配列に含まれているかを確認する(includes())
• 条件を満たす要素だけを残す(filter())

コード例

実際のコードは以下のとおりです。

const firstArray = [
    { "name": "John Doe" },
    { "name": "John Smith" },
    { "name": "David Miller" },
    { "name": "Bob Taylor" },
    { "name": "Carol taylor" },
    { "name": "Adam Smith" },
];
const secondArray = [
    { "name": "Adam Smith" },
    { "name": "John Doe" },
    { "name": "David Miller" },
    { "name": "James Taylor" }
];
const getAllValue = ({ 'name': name }) => name;
const result = firstArray
    .map(getAllValue)
    .filter(value => secondArray
        .map(getAllValue)
        .includes(value)
    );
console.log(result);

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を「demo251.js」として実行します。

実行結果

コンソールには以下のように出力されます。

PS C:\Users\Amit\javascript-code> node demo251.js
[ 'John Doe', 'David Miller', 'Adam Smith' ]

このように、両方の配列に存在する「name」の値だけが配列として取得できました。

コードのポイント解説

getAllValueは、オブジェクトの分割代入を利用してnameプロパティの値を取り出す関数です。firstArray.map(getAllValue)で名前のみの配列を作成し、filter()内でsecondArray側の名前リストとの照合を行っています。

なお、この方法の計算量はO(n×m)です。データ件数が多い場合は、Setを使って片方の値を事前にセット化しておくと照合が高速化され、パフォーマンス面で有利になります。