【JavaScript】配列の比較をして差分を取得する方法

こんにちは。

ITソリューション課、城所です。

 

プログラムを書いていると配列操作をする機会が多いかと思います。

その際に2つの配列を比較して、差分を抜き出したいと思ったことはありませんか？

 

<例>

配列A

[1,2,3,4,5,6,7]

配列B

[1,2,3,4,5]

この2つの配列から、[6,7]を新しい配列Cとして作りたい！

 

今回はこのように配列と配列を比較をして、差分だけを配列にする方法をご紹介します。

 

実装方法

配列と配列を比較する場合、どちらかの配列をループするという方法が考えられます。

ただ今回はJavaScriptのfilter関数を使う方法でやります。

filter関数を使った方がシンプルな書き方が可能です！

 

filter関数とは？

filter() メソッドは、引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。

(引用：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

 

簡単に言えばfilter関数の引数に条件を指定して、その条件を満たすものが新しい配列として定義されます。

 

例をみてみましょう。

 

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);

// expected output: Array ["exuberant", "destruction", "present"]

参考ページ：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

 

この例では ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']の中から6文字以上と言う条件で新しい配列を作成しています。

新しい配列の操作が不要なので記述がシンプルになります。

 

次はこのfilter関数を使って差分の比較をしてみます。

 

filter関数で差分を抜き出す

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

array3 = array1.filter(i => array2.indexOf(i) == -1)
console.log(array3); // [5, 6]

 

indexOf関数は値が見つからない場合に-1を返します。

上記の方法でarray2の中でもっていないarray1の値の抜き出すことが可能です。

このように、filter関数を使うことで、array2に含まれていないarray1の値を配列にしています。

 

動作確認したい方はこちらから

https://jsfiddle.net/c2obrdaw/1/ 

まとめ

今回はfilter関数での差分を出す方法を紹介しましたが、いかがだったでしょうか？

filter関数がとても便利なのでぜひ使ってみてください。

 

しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！

※「イエタテ」は2023年4月より㈱くふう住まいにて運営しています