サイトアイコン IT NEWS

JavaScriptで2つの配列から差分(増減)を抽出する方法

JavaScript2つの配列から差分を抽出する方法をサンプルコード付きで詳しく解説します。
ここで言う差分とは、ある配列には含まれているが、別の配列には含まれていない要素のことです。
例えば、[1, 2, 3]と[2, 3, 4]という2つの配列差分は、[1]と[4]です。

差分抽出する方法はいくつかありますが、ここではfilterメソッドincludesメソッドを使う方法を紹介します。
filterメソッドは、配列の要素に対して条件を指定して、条件に合う要素だけを新しい配列として返すメソッドです。
includesメソッドは、配列に指定した値が含まれているかどうかを真偽値で返すメソッドです。

filterとincludes関数を組み合わせて差分を抽出

JavaScript2つの配列から差分を抽出するには、どちらの配列を基準にするか決める必要があります。
例えば、array1からarray2を見た時の増減と、逆にarray2からarray1を見た時の増減では、求める結果が違います

2つの配列の要素を比較して差分を抽出する

以下のJavaScriptのサンプルコードでは、array1array2という2つの配列から、array1には含まれているがarray2には含まれていない要素を抽出しています。
そのために、filterメソッドの条件として、array2に要素が含まれていない(!array2.includes(x))という式を使っています。

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const diff = array1.filter(x => !array2.includes(x));
console.log(diff); // [1, 2]

比較対象を逆にして差分を抽出する

同様に、array2には含まれているがarray1には含まれていない要素を抽出する場合は、配列の順番を逆にすればよいです。

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const diff = array2.filter(x => !array1.includes(x));
console.log(diff); // [6, 7]

このように、filterメソッドincludesメソッドを組み合わせることで、JavaScriptで簡単に2つの配列から差分を抽出することができます。
ぜひ参考にしてみてください。

\楽天ポイント5倍セール!/
楽天市場
著:CodeMafia 外村将大
¥3,114 (2023/05/08 06:32時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場

モバイルバージョンを終了