実行環境 Node.js 15.2.1

公開日 November 24, 2020, GMT+9

更新日 January 12, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

filter(Array、配列)

このページでは豊富な例を用いてJavaScript(js)のArrayオブジェクト(配列)のfilterの使い方を学ぶことができます。

JavaScriptのfilterはArrayオブジェクト(配列)のメソッドの1つです。
配列の各要素について引数で与えたコールバック関数(callback)を呼び出し、コールバック関数の返り値がtrue(真)の要素のみを含む配列を返り値として返します。

呼び出し元の配列に対して副作用(値の変更)がない非破壊的なメソッドです。

TL;DR

基本

// 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' ]

関連情報:JavaScriptのindexOf (Array、配列)の使用方法

コールバック関数内のthisの指定

// 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' ]

解説

基本

Arrayオブジェクト(配列)のfilterメソッドは、呼び出し元の配列を指定した条件で絞り込んだ配列を生成します。
その際、呼び出し元の配列に対して直接変更は行わず、絞り込んだ要素のみで構成された新たな配列を返り値として返します。

filter自体は第1引数に条件を指定するコールバック関数、第2引数でコールバック関数内でのthisを指定することが可能です。
配列の要素すべてに対してコールバック関数が実行され、コールバック関数の返り値としてtrue(真)を返した要素のみが返り値の配列の要素に含まれます。

また、コールバック関数の第1引数を指定することで、呼び出し元の配列の要素を取得することができます。

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

インデックス番号の取得

filterのコールバック関数に第2引数を指定すると、呼び出し元の配列の要素のインデックスを取得することができます。
インデックスは0から始まることに注意してください。

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 ]

呼び出し元の配列の取得

filterのコールバック関数に第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 ]

関連情報:JavaScriptのindexOf (Array、配列)の使用方法

コールバック関数内のthisの指定

filterの第2引数では、コールバック関数内でのthisを指定することができます。
コールバック関数としてアロー関数を使用している場合にはthisはコンテクストによって定まっているので、第2引数で新たなthisを指定することはできません。

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 ]

1次情報

Array.prototype.filter() - MDN web docs