このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Iterator.prototype.filter()

Baseline 2025
Newly available

Since March 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

filter()Iterator インスタンスのメソッドで、新しいイテレーターヘルパーオブジェクトを返します。このオブジェクトは、提供されたコールバック関数が true を返すイテレーターの要素のみを返します。

構文

js
filter(callbackFn)

引数

callbackFn

このイテレーターが生成するすべての要素に対して実行する関数です。真値を返すと、その要素をこのイテレーターヘルパーが生成し、偽値の場合は生成しません。この関数は、以下の引数とともに呼び出されます。

element

処理中の現在の要素です。

index

処理中の現在の要素のインデックスです。

返値

新しいイテレーターヘルパーオブジェクトです。イテレーターヘルパーの next() メソッドを呼び出すたびに、このイテレーターでコールバック関数が true を返す次の要素を返します。このイテレーターが完了した場合、イテレーターヘルパーオブジェクトも完了します(next() メソッドが { value: undefined, done: true } を生成します)。

解説

配列メソッドよりもイテレーターヘルパーのほうが優れている主な点は、遅延処理されるということ、つまり、リクエストされたときにのみ次の値を生成するという意味です。これにより、不必要なコンピューター処理を避けることができ、また、無限イテレーターでも使用することができます。

filter() の使用

次の例では、フィボナッチ数列の項を生成するイテレーターを作成し、最初のいくつかの偶数の項を読み取ります。

js
function* fibonacci() {
  let current = 1;
  let next = 1;
  while (true) {
    yield current;
    [current, next] = [next, current + next];
  }
}

const seq = fibonacci().filter((x) => x % 2 === 0);
console.log(seq.next().value); // 2
console.log(seq.next().value); // 8
console.log(seq.next().value); // 34

filter() と for...of ループの使用

filter() は、イテレーターを手作業で処理しない場合に最も便利です。イテレーターも反復可能オブジェクトであるため、返されたヘルパーを for...of ループで反復処理することができます。

js
for (const n of fibonacci().filter((x) => x % 2 === 0)) {
  console.log(n);
  if (n > 30) {
    break;
  }
}

// Logs:
// 2
// 8
// 34

これは次のものと同等です、

js
for (const n of fibonacci()) {
  if (n % 2 !== 0) {
    continue;
  }
  console.log(n);
  if (n > 30) {
    break;
  }
}

仕様書

Specification
ECMAScript® 2026 Language Specification
# sec-iterator.prototype.filter

ブラウザーの互換性

関連情報