見出し画像

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

プログラムを書いていると、配列操作をする機会が多いかと思います。その際に2つの配列を比較して、差分を抜き出したいと思ったことはありませんか?


<例>
配列A:[1,2,3,4,5,6,7]
配列B:[1,2,3,4,5]
この2つの配列から、
[6,7]を新しい配列Cとして作りたい!


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


実装方法

配列と配列を比較する場合、どちらかの配列をループするという方法が考えられますが! 今回は、JavaScriptのfilter関数を使う方法でやります。
なぜなら、filter関数を使った方がシンプルな書き方が可能だからです。

filter関数とは?

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"]

参考ページ

この例では 、['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関数がとても便利なのでぜひ使ってみてください。