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

2023年5月9日

URLをコピーしました！

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

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

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

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

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

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

1	const array1 = [1, 2, 3, 4, 5];<br>const array2 = [3, 4, 5, 6, 7];<br><br>const diff = array1.filter(x => !array2.includes(x));<br>console.log(diff); // [1, 2]

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

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

1	const array1 = [1, 2, 3, 4, 5];<br>const array2 = [3, 4, 5, 6, 7];<br><br>const diff = array2.filter(x => !array1.includes(x));<br>console.log(diff); // [6, 7]