JavaScript: filterで重複要素を削除・抽出する方法
ArrayオブジェクトのfilterメソッドとindexOfメソッドを使って、 配列から重複している要素を削除したり、 逆に重複している要素のみを抽出することができます。
filterメソッドは配列の内容をコールバック関数でテストし、
trueと判定された要素のみを取得します。
indexOfメソッドは指定した要素が最初に見つかったインデックスを返します。
重複要素を削除する
次のサンプルコードでは、filterメソッドとindexOfメソッドを使って、 配列「arr」から重複要素を削除した新しい配列「new_arr」を作成しています。
let arr = [1, 3, 7, 4, 5, 7, 1, 8, 4]; let new_arr = arr.filter(function(val, i, array){ return (array.indexOf(val) === i); }); console.log(new_arr); // Array(6) [ 1, 3, 7, 4, 5, 8 ]
indexOf(val)の戻り値と配列のインデックスが一致したい場合、
その値は重複しています。
もしこのロジックがわかりにくい場合は、
次のサンプルコードのように
「array.indexOf(val)」の値と
「i」の値を表示してみるとわかりやすくなります。
let arr = [1, 3, 7, 4, 5, 7, 1, 8, 4];
let new_arr = arr.filter(function(val, i, array){
console.log(array.indexOf(val), i);
return (array.indexOf(val) === i);
});
実行結果
0 0 1 1 2 2 3 3 4 4 2 5 // 重複 0 6 // 重複 7 7 3 8 // 重複
重複要素のみを抽出
重複している要素のみを抽出したい場合は、 先程のreturn文の条件をひっくり返せば良いだけです。 次のサンプルコードでは「!」を使っています。
let arr = [1, 3, 7, 4, 5, 7, 1, 8, 4]; let new_arr2 = arr.filter(function(val, i, array){ return !(array.indexOf(val) === i); }); console.log(new_arr2); // Array(3) [ 7, 1, 4 ]
「return !(array.indexOf(val) === i);」の部分は 「return (array.indexOf(val) !== i);」としても同じ結果を得られます。