filterを使ってみる

filterメソッドとは？
コールバック関数を書いて、特定の配列から条件を満たす、新しい配列を作成する。

sample.js

arr1.filter(コールバック関数) {
  return // 条件 ;
}

filterは3つの引数を設定できます。

今回の、条件を満たす配列を作成するためには引数を3つ使います。

sample.js

arr1.filter(配列の要素の値, 配列要素のインデックス番号, 要素の入った配列そのもの) {}

例）数字の配列から重複する数字を取り除いた数字を取り出す

sample.js

let arr1 = [1,2,2,3,3,3,4,5,6,6];
let arr2 = arr1.filter(function(val, i, arr) {
  return arr.indexOf(val) === i;
});

console.log(arr2); // [1, 2, 3, 4, 5, 6]

arr.indexOf(val) === i;がtrueのものを順番に取り出して配列にしていく。

・indexOf(val)は、配列に入っている要素で初めて出てくる要素のindex番号を返しています。

console.logで確認してみると。

sample.js

let arr1 = [1,2,2,3,3,3,4,5,6,6];
let arr2 = arr1.filter(function(val, i, arr) {
  console.log(arr.indexOf(val)); // 0 1 1 3 3 3 6 7 8 8
  console.log(arr.indexOf(val)===i); 
// true true false true false false true true true false
});

つまり、1という要素が配列に複数入っている場合、最初のindex番号の1だけ取り出すため、重複した数字の取り除いた配列が出来上がります。

【本題】重複した要素のある配列から、重複した要素のみを一つだけ取り出す

sample.js

let arr1 = [1,2,2,3,3,3,4,5,6,6];
let arr2 = arr1.filter(function(val, i, arr) {
  return arr.indexOf(val) === i && i !== arr.lastIndexOf(val);
});

console.log(arr2); // [2, 3, 6]

・i !== arr.lastIndexOf(val)
ここでも何が行われているのかわからないのでconsole.logで確認してみる。

sample.js

let arr1 = [1,2,2,3,3,3,4,5,6,6];
let arr2 = arr1.filter(function(val, i, arr) {
  console.log(arr.lastIndexOf(val)); // 0 2 2 5 5 5 6 7 9 9
  console.log(i !== arr.lastIndexOf(val));
  // false true false true true false false false true false
});

・lastIndexOf(val)：indexOf(val)とは違って、配列に入っている要素で最後に出てくる要素のindex番号を返しています。

・i !== arr.lastIndexOf(val)
→最後のindex番号以外でtrueを満たすもの。

最後に、

arr.indexOf(val) === i && i !== arr.lastIndexOf(val);
で、&&を使用することで、重複した要素のある配列から、重複した要素のみを一つだけ取り出します

参考

・JavaScriptで配列の重複を除去する
・配列の重複をはじく、もしくは重複を取り出す