filter（Array、配列）

// filterはコールバック関数の返り値がtrueの要素のみを含む配列を生成します
const array0 = [100, 200, 300, 400, 500];
const filteredArray0 = array0.filter(function (element) {
  // 全要素に対して処理が行われる
  console.log(element);
  // elementが250以上のものを抽出
  return element >= 250;
});
==> 100
==> 200
==> 300
==> 400
==> 500
console.log(filteredArray0);
==> [ 300, 400, 500 ]
// 呼び出し元の配列には変化なし（副作用がないことの確認）
console.log(array0);
==> [ 100, 200, 300, 400, 500 ]



const array1 = ['js', 'py', 'go', 'java', 'html'];
const filteredArray1 = array1.filter((element) => {
  // 文字列の長さが2より大きいelementに当てはまる条件
  return element.length > 2;
});
console.log(filteredArray1);
==> [ 'java', 'html' ]



const array2 = [1, 2, 3, 4, 5];
const filteredArray2 = array2.filter((element) => {
  // 偶数のみに当てはまる条件
  return element % 2 === 0;
});
console.log(filteredArray2);
==> [ 2, 4 ]

// 上記の記述は以下のようにシンプルに記述することができます
const filteredArray3 = array2.filter(element => element % 2 === 0);
// filteredArray2と同じ結果
console.log(filteredArray3);
==> [ 2, 4 ]



const array3 = ['January', 'February', 'March', 'April', 'May'];
// コールバック関数の返り値が常にtrueだと何もfilterされない
const filteredArray4 = array3.filter(() => {
  return true;
});
console.log(filteredArray4);
==> [ 'January', 'February', 'March', 'April', 'May' ]



// オブジェクトのfilter方法
const array4 = [{ id: 1, name: 'Nadia' }, { id: 2, name: 'Joshua' }, { id: 3, name: 'Harry' }];
const filteredArray5 = array4.filter(element => {
  return element.id !== 1;
});
console.log(filteredArray5);
==> [ { id: 2, name: 'Joshua' }, { id: 3, name: 'Harry' } ]

// コールバック関数の第2引数として、呼び出した配列の現在のインデックス番号を取ることができる
const array1 = ['first', 'second', 'third', 'fourth', 'fifth'];
const filteredArray1 = array1.filter((element, index) => {
  // インデックスが3の要素のみ当てはまる
  return index === 3;
});
console.log(filteredArray1);
==> [ 'fourth' ]



const array2 = [1, 2, 3, 4, 5];
const filteredArray2 = array2.filter(function (e, i) {
  // インデックスが奇数の要素のみ当てはまる
  return i % 2 === 1;
});
console.log(filteredArray2);
==> [ 2, 4 ]



const array3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredArray3 = array3.filter((e, i) => {
  // 先頭の5要素のみ
  return i < 5;
});
console.log(filteredArray3);
==> [ 1, 2, 3, 4, 5 ]



const array4 = [
  { name: 'Joshua', age: 10 },
  { name: 'Karen', age: 36 },
  { name: 'Elvis', age: 50 },
  { name: 'Hanna', age: 18 }
];
// ageが20以下かつインデックスがarray4の最後尾の要素
const filteredArray4 = array4.filter((e, i) => e.age <= 20 && i === array4.length - 1);
console.log(filteredArray4);
==> [ { name: 'Hanna', age: 18 } ]

// コールバック関数の第3引数で呼び出し元の配列をとることができる
const array1 = ['apple', 'apple', 'apple', 'banana'];
const filteredArray1 = array1.filter(function (e, i, array) {
  // indexOfを使用することでインデックスが0と3の要素のみ当てはまる
  return i === array.indexOf(e);
});
// 以下の出力のappleは一番最初（インデックス0）のapple
console.log(filteredArray1);
==> [ 'apple', 'banana' ]

// filterの第2引数にコールバック関数実行時のthisを指定できます
const array1 = ['JavaScript', 'Java', 'JS', 'Python', 'Kotlin', 'Groovy'];
const arrayJVM = ['Java', 'Kotlin', 'Scala', 'Groovy', 'Clojure', 'JRuby', 'Jython'];
// コールバック関数をアロー関数で定義するときには第2引数をthisとして使用できません
const filteredArray1 = array1.filter(function (e) {
  return this.includes(e);
}, arrayJVM);
console.log(filteredArray1);
==> [ 'Java', 'Kotlin', 'Groovy' ]

const array1 = ['apple', 'kiwi', 'peach', 'banana'];
const filteredArray1 = array1.filter(function (element) {
  // 全要素に対して処理が行われる
  console.log(element);
  return element === 'apple' || element === 'banana';
});
==> apple
==> kiwi
==> peach
==> banana
console.log(filteredArray1);
==> [ 'apple', 'banana' ]
// 呼び出し元の配列には変化なし
console.log(array1);
==> [ 'apple', 'kiwi', 'peach', 'banana' ]



const array2 = [{ name: 'Chen', age: 26 }, { name: 'Olivia', age: 21 }, { name: 'James', age: 33 }];
const filteredArray2 = array2.filter((element) => {
  // ageが33未満のオブジェクトのみ抽出
  return element.age < 33;
});
console.log(filteredArray2);
==> [ { name: 'Chen', age: 26 }, { name: 'Olivia', age: 21 } ]

const array1 = ['python', 'javascript', 'java'];
const filteredArray1 = array1.filter((element, index) => {
  // インデックスが2の要素以外当てはまる
  return index !== 2;
});
console.log(filteredArray1);
==> [ 'python', 'javascript' ]



const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredArray2 = array2.filter(function (e, i) {
  // 最初の3要素のみ当てはまる
  return i < 3;
});
console.log(filteredArray2);
==> [ 1, 2, 3 ]

const array1 = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
const filteredArray1 = array1.filter(function (e, i, array) {
  // indexOfを使用することで同じ値の要素の最初のものだけに当てはまる
  return i === array.indexOf(e);
});
console.log(filteredArray1);
==> [ 1, 2, 3, 4, 5 ]

const array1 = [1, 2, 3, 4, 5];
const arrayEven = [2, 4, 6, 8, 10];
const filteredArray1 = array1.filter(function (e) {
  return this.includes(e);
}, arrayEven);
console.log(filteredArray1);
==> [ 2, 4 ]