這篇文章主要為大家展示了“ES6中Iterators的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“ES6中Iterators的示例分析”這篇文章吧。
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比石城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式石城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋石城地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。
簡介
假設(shè)有這樣數(shù)組
const myFavouriteAuthors = [ 'Neal Stephenson', 'Arthur Clarke', 'Isaac Asimov', 'Robert Heinlein' ];
在某些情況下，希望返回數(shù)組中的所有單獨(dú)值，以便在屏幕上打印它們、操作它們或?qū)λ鼈儓?zhí)行某些操作。
如何處理？ 簡單方法就是使用 for, while, for-of 方法。
如下：
現(xiàn)在，假設(shè)你擁有一個自定義數(shù)據(jù)結(jié)構(gòu)來保存所有authors
myFavouriteAuthors 是一個對象，它包含另一個對象 allAuthors。allAuthors 包含三個數(shù)組，其中包含 fiction、scienceFiction 和 fantasy。
現(xiàn)在，如果要求你循環(huán)遍歷 myFavouriteAuthors 以獲得所有的author，你的方法是什么? 你可能會嘗試一些循環(huán)組合來獲得所有數(shù)據(jù)。
但是，如果你這樣做了 ——
重慶分公司
重慶分公司
for (let author of myFavouriteAuthors) {
console.log(author)
}
// TypeError: {} is not iterable你將得到一個類型錯誤，說明該對象不可迭代。讓我們看看什么是可迭代的，以及如何使對象可迭代。
可迭代對象與迭代器 (Iterables and Iterators)
在上一節(jié)中看到了問題,從我們的自定義對象中獲取所有的author 是不容易的。我們需要某種方法，通過它我們可以有序地獲取內(nèi)部數(shù)據(jù)。
我們在 myFavouriteAuthors 中添加一個返回所有作者的方法 getAllAuthors。如：
這是一個簡單的方法。它幫我們完成了獲取所有author的功能。但是，這種實(shí)現(xiàn)可能會出現(xiàn)一些問題：
getAllAuthors 的名稱非常具體。如果其他人正在創(chuàng)建自己的 myFavouriteAuthors，他們可能會將其命名為retrieveAllAuthors。
作為開發(fā)人員，我們總是需要知道返回所有數(shù)據(jù)的特定方法，在本例中，它被命名為getAllAuthors。
getAllAuthors 返回的是字符串?dāng)?shù)組，如果另一個開發(fā)人員以這種格式返回一個對象數(shù)組，該怎么辦：
[ {name: 'Agatha Christie'}, {name: 'J. K. Rowling'}, ... ]開發(fā)人員必須知道返回所有數(shù)據(jù)的方法的確切名稱和返回類型。
如果我們規(guī)定方法的名稱和它的返回類型是固定不變的呢?
讓我們將這個方法命名為 --- iteratorMethod
ECMA 也采取了類似的步驟來標(biāo)準(zhǔn)化在定制對象上循環(huán)的過程。但是，ECMA 沒有使用名稱 iteratorMethod，而是使用名稱 Symbol.iterator。
Symbols 提供的名稱是唯一的，不能與其他屬性名稱沖突。同時,Symbol.iterator 返回一個名為迭代器的對象，這個迭代器將擁有一個名為next的方法，該方法將返回一個具有鍵值為 value 和 done 的對象。
值鍵 value 包含當(dāng)前值，它可以是任何類型的，done 是布爾值，它表示是否獲取了所有的值。
下圖可以幫助建立可迭代對象、迭代器和next之間的關(guān)系，這種關(guān)系稱為迭代協(xié)議。
根據(jù)Axel Rauschmayer博士的《探索JS》一書：
可迭代是一種數(shù)據(jù)結(jié)構(gòu)，它希望使其元素對外部可訪問，通過實(shí)現(xiàn)一個關(guān)鍵字是Symbol.iterator的方法來實(shí)現(xiàn)，該方法是迭代器的工廠，也就是說，它將創(chuàng)建迭代器。迭代器是一個指針，用于遍歷數(shù)據(jù)結(jié)構(gòu)的元素，我們將使用computed property語法來設(shè)置這個鍵，如下：
使用對象可迭代
因此，正如我們在上一節(jié)學(xué)到的，我們需要實(shí)現(xiàn)一個名為Symbol.iterator的方法
在第4行，我們創(chuàng)建迭代器。它是一個定義了next方法的對象。next方法根據(jù)step變量返回值。在第25行，我們檢索iterator，27 行，我們調(diào)用next方法，直到 done的值為 true。
這正是for-of循環(huán)中發(fā)生的事情，for-of接受一個迭代器，并創(chuàng)建它的迭代器,它會一直調(diào)用next()，直到 done為 true。
JavaScript中可迭代對象(iterable)
JS 中的很多對象都是可迭代的。它們可能不是很好的察覺，但是如果仔細(xì)檢查，就會發(fā)現(xiàn)迭代的特征：
Arrays and TypedArrays
Strings —— 遍歷每個字符或Unicode代碼點(diǎn)
Maps —— 遍歷其鍵-值對
Sets —— 遍歷元素
arguments? —— 函數(shù)中類似數(shù)組的特殊變量
DOM elements (Work in Progress)
JS中使用迭代的其他一些結(jié)構(gòu)是:
for-of -- for-of 循環(huán)需要一個可迭代的對象，否則，它將拋出一個類型錯誤。
for (const value of iterable) { ... }數(shù)組解構(gòu) -- 由于可迭代性，會發(fā)生析構(gòu)。讓我們來看看：
const array = ['a', 'b', 'c', 'd', 'e']; const [first, ,third, ,last] = array;
等價于:
const array = ['a', 'b', 'c', 'd', 'e']; const iterator = array[Symbol.iterator](); const first = iterator.next().value iterator.next().value // Since it was skipped, so it's not assigned const third = iterator.next().value iterator.next().value // Since it was skipped, so it's not assigned const last = iterator.next().value
擴(kuò)展操作符(…)
const array = ['a', 'b', 'c', 'd', 'e']; const newArray = [1, ...array, 2, 3];
等價于：
const array = ['a', 'b', 'c', 'd', 'e'];
const iterator = array[Symbol.iterator]();
const newArray = [1];
for (let nextValue = iterator.next(); nextValue.done !== true; nextValue = iterator.next()) {
newArray.push(nextValue.value);
}
newArray.push(2)
newArray.push(3)Promise.all 和 Promise.race 接受可迭代對象
Maps 和 Sets
讓 myFavouriteAuthors 可迭代
下面是一個實(shí)現(xiàn)，它使myFavouriteAuthors 具有可迭代性：
const myFavouriteAuthors = {
allAuthors: {
fiction: [
'Agatha Christie',
'J. K. Rowling',
'Dr. Seuss'
],
scienceFiction: [
'Neal Stephenson',
'Arthur Clarke',
'Isaac Asimov',
'Robert Heinlein'
],
fantasy: [
'J. R. R. Tolkien',
'J. K. Rowling',
'Terry Pratchett'
],
},
[Symbol.iterator]() {
// 獲取數(shù)組中的所有作者
const genres = Object.values(this.allAuthors);
// 存儲當(dāng)前類型和索引
let currentAuthorIndex = 0;
let currentGenreIndex = 0;
return {
// Implementation of next()
next() {
// 根據(jù)當(dāng)前的索引獲取對應(yīng)的作者信息
const authors = genres[currentGenreIndex];
// 當(dāng)遍歷完數(shù)組 authors是,oNotHaveMoreAuthors 為 true
const doNothaveMoreAuthors = !(currentAuthorIndex < authors.length);
if (doNothaveMoreAuthors) {
// 加一繼續(xù)訪問下一個
currentGenreIndex++;
// 重置
currentAuthorIndex = 0;
}
// 如果所有 genres 都遍歷完了結(jié)，那么我們需要告訴迭代器不能提供更多的值。
const doNotHaveMoreGenres = !(currentGenreIndex < genres.length);
if (doNotHaveMoreGenres) {
return {
value: undefined,
done: true
};
}
// 如果一切正常，從當(dāng)genre 返回 作者和當(dāng)前作者索引，以便下次，下一個作者可以返回。
return {
value: genres[currentGenreIndex][currentAuthorIndex++],
done: false
}
}
};
}
};
for (const author of myFavouriteAuthors) {
console.log(author);
}
console.log(...myFavouriteAuthors)通過本文獲得的知識，你可以很容易地理解迭代器是如何工作的，這種邏輯可能有點(diǎn)難以理解。因此，理解這個概念的最佳方法是多多敲死代碼，多多驗證！
以上是“ES6中Iterators的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
