JavaScriptで最初の配列と2番目の配列の違い（差分）を抽出する方法

JavaScriptでは、リテラル値を含む2つの配列を受け取り、1番目の配列には存在するが、2番目の配列には存在しない要素だけを集めた新しい配列を返す関数が必要になることがあります。

2つの配列には、まったく同じ要素が含まれている場合もあります。そのため、各要素を順番に比較し、2番目の配列に含まれていないものだけを結果として収集する処理を実装します。

実装のポイント

基本的な流れは以下のとおりです。

• 1番目の配列を先頭から順番にループで走査する
• 各要素が2番目の配列に含まれるかどうかを Array.prototype.includes() で判定する
• 含まれていない要素だけを結果用の配列に追加する

サンプルコード

const arr1 = ['1', '2', '3', '4/2', '5/4', '6−2'];
const arr2 = ['1', '2', '3', '5/4', '4/2', '6−1', '7/2', '8−2'];
const differenceBetween = (arr1 = [], arr2 = []) => {
    const res = [];
    for(let i = 0; i < arr1.length; i++){
       const el = arr1[i];
       if(arr2.includes(el)){
          continue;
       };
       res.push(el);
    };
    return res;
};
console.log(differenceBetween(arr1, arr2));

出力結果

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

['6−2']

コードの解説

このコードでは、まず空の配列 res を用意し、for ループによって arr1 の各要素を順に確認していきます。条件分岐の中で includes() を呼び出すことで、その要素が arr2 に存在するかどうかを簡潔に判定できます。存在する場合は continue で以降の処理をスキップし、存在しない場合のみ push() で結果配列に追加します。

上記の例では、'6−2' は arr1 に存在するものの arr2 には含まれていないため、戻り値は ['6−2'] となります。

filter() を使ったより簡潔な書き方

同じ処理は、filter() メソッドを使うともっと短く、宣言的に書けます。

const differenceBetween = (arr1 = [], arr2 = []) =>
  arr1.filter(el => !arr2.includes(el));

console.log(differenceBetween(arr1, arr2));
// => ['6−2']

どちらのアプローチでも結果は同一ですが、filter() 版の方が意図が明確で可読性が高いため、実務ではこちらの書き方が好まれることが多いです。なお、両手法とも計算量は O(n×m) となるため、非常に大きな配列を扱う場合は Set を使った高速化も検討するとよいでしょう。