迭代器輔助函式

發布時間 · 標籤為 ECMAScript

迭代器輔助函式 是新增至迭代器原型上的一組方法,有助於一般使用迭代器。由於這些輔助方法位於迭代器原型上,因此任何在原型鏈中包含 Iterator.prototype 的物件(例如陣列迭代器)都將取得這些方法。在以下小節中,我們將說明迭代器輔助函式。所有提供的範例都可以在部落格文章清單的部落格歸檔頁面中運作,說明迭代器輔助函式如何協助尋找和操作文章。您可以在 V8 部落格頁面 上試試看!

.map(mapperFn) #

map 將 mapper 函式作為引數。此輔助函式傳回一個值迭代器,其中 mapper 函式已套用至原始迭代器值。

// 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 將 filter 函式作為引數。此輔助函式傳回一個值迭代器,其中 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 將 mapper 函式作為引數。此輔助函式傳回一個值迭代器,其中迭代器值是將 mapper 函式套用至原始迭代器值所產生的迭代器。也就是說,mapper 函式傳回的迭代器會扁平化至此輔助函式傳回的迭代器中。

// 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。呼叫 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。呼叫 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,表示它是可迭代的,則會呼叫其 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);

可用性 #

Iterator 輔助函式會在 V8 v12.2 中出貨。

Iterator 輔助函式支援 #