迭代器助手

发布 · 标签: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 接受一个归约函数和一个可选的初始值。此助手返回一个值,该值是将归约函数应用于迭代器的每个值并跟踪归约函数的最后结果的结果。初始值用作归约函数在处理迭代器的第一个值时的起点。

// 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 的实例,则助手直接返回它。如果 object 具有 Symbol.iterator,这意味着它是一个可迭代对象,则调用其 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 中发布。

迭代器助手支持 #