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);
で、&&を使用することで、重複した要素のある配列から、重複した要素のみを一つだけ取り出します