イテレータヘルパー

公開 · タグ: ECMAScript

イテレータヘルパーは、イテレータの一般的な使用を支援する、イテレータのプロトタイプに追加された新しいメソッドのコレクションです。これらのヘルパーメソッドはイテレータのプロトタイプにあるため、プロトタイプチェーンに Iterator.prototype を持つすべてのオブジェクト(配列イテレータなど)は、このメソッドを取得します。以下のサブセクションでは、イテレータヘルパーについて説明します。提供されるすべての例は、ブログ投稿のリストを含むブログアーカイブページで動作しており、イテレータヘルパーが投稿の検索と操作にどのように役立つかを示しています。 V8ブログページでお試しいただけます!

.map(mapperFn) #

map は、引数としてマッパー関数を受け取ります。このヘルパーは、元のイテレータの値にマッパー関数が適用された値のイテレータを返します。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Get the list of posts, return a list of their text content (titles) and log them.
for (const post of posts.values().map((x) => x.textContent)) {
console.log(post);
}

.filter(filtererFn) #

filter は、引数としてフィルター関数を受け取ります。このヘルパーは、フィルター関数が真の値を返した元のイテレータの値のイテレータを返します。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Filter blog posts that includes `V8` in their text content (titles) and log them.
for (const post of posts.values().filter((x) => x.textContent.includes('V8'))) {
console.log(post);
}

.take(limit) #

take は、引数として整数を受け取ります。このヘルパーは、元のイテレータの値から、limit 個の値までのイテレータを返します。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Select 10 recent blog posts and log them.
for (const post of posts.values().take(10)) {
console.log(post);
}

.drop(limit) #

drop は、引数として整数を受け取ります。このヘルパーは、元のイテレータの値から、limit 個の値をスキップした後の値から始まるイテレータを返します。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Drop 10 recent blog posts and log the rest of them.
for (const post of posts.values().drop(10)) {
console.log(post);
}

.flatMap(mapperFn) #

flatMap は、引数としてマッパー関数を受け取ります。このヘルパーは、元のイテレータの値にマッパー関数を適用して生成されたイテレータの値のイテレータを返します。つまり、マッパー関数によって返されたイテレータは、このヘルパーによって返されるイテレータに平坦化されます。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Get list of tags of the blog posts and log them. Each post can have more than
// one tag.
for (const tag of posts.values().flatMap((x) => x.querySelectorAll('.tag').values())) {
console.log(tag.textContent);
}

.reduce(reducer [, initialValue ]) #

reduce は、リデューサー関数とオプションの初期値を受け取ります。このヘルパーは、リデューサー関数をイテレータのすべての値に適用しながら、リデューサーを適用した最後の結果を追跡した結果として、1つの値を返します。初期値は、リデューサー関数がイテレータの最初の値を処理する際の開始点として使用されます。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Get list of tags for all posts.
const tagLists = posts.values().flatMap((x) => x.querySelectorAll('.tag').values());

// Get text context for each tag in the list.
const tags = tagLists.map((x) => x.textContent);

// Counts posts with security tag.
const count = tags.reduce((sum , value) => sum + (value === 'security' ? 1 : 0), 0);
console.log(count);

.toArray() #

toArray は、イテレータの値から配列を返します。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Create an array from the list of 10 recent blog posts.
const arr = posts.values().take(10).toArray();

.forEach(fn) #

forEach は、引数として関数を受け取り、イテレータの各要素に適用されます。このヘルパーは副作用のために呼び出され、undefinedを返します。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Get the dates that at least one blog post is published and log them.
const dates = new Set();
const forEach = posts.values().forEach((x) => dates.add(x.querySelector('time')));
console.log(dates);

.some(fn) #

some は、引数として述語関数を受け取ります。このヘルパーは、関数を適用したときに、イテレータの要素のいずれかがtrueを返した場合にtrueを返します。someが呼び出された後、イテレータは消費されます。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Find out if text content (title) of any blog post includes the `Iterators`
// keyword.
posts.values().some((x) => x.textContent.includes('Iterators'));

.every(fn) #

every は、引数として述語関数を受け取ります。このヘルパーは、関数を適用したときに、イテレータのすべての要素がtrueを返した場合にtrueを返します。everyが呼び出された後、イテレータは消費されます。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Find out if text content (title) of all blog post includes the `V8` keyword.
posts.values().every((x) => x.textContent.includes('V8'));

.find(fn) #

find は、引数として述語関数を受け取ります。このヘルパーは、関数が真の値を返すイテレータの最初の値を返すか、イテレータの値がそうでない場合は undefined を返します。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// Log the text content (title) of the recent blog post includes `V8` keyword.
console.log(posts.values().find((x) => x.textContent.includes('V8')).textContent);

Iterator.from(object) #

from は静的メソッドで、引数としてオブジェクトを受け取ります。object が既に Iterator のインスタンスである場合、ヘルパーはそれを直接返します。objectSymbol.iterator を持っている場合(つまり、iterableである場合)、その Symbol.iterator メソッドが呼び出されてイテレータを取得し、ヘルパーがそれを返します。それ以外の場合は、Iterator オブジェクト(Iterator.prototype を継承し、next() メソッドと return() メソッドを持つ)が新しく作成され、object をラップしてこのヘルパーによって返されます。

// Select the list of blog posts from a blog archive page.
const posts = document.querySelectorAll('li:not(header li)');

// First create an iterator from the posts. Then, log the text content (title) of
// the recent blog post that includes the `V8` keyword.
console.log(Iterator.from(posts).find((x) => x.textContent.includes('V8')).textContent);

利用可能性 #

イテレータヘルパーは、V8 v12.2 で出荷されています。

イテレータヘルパーのサポート状況 #