您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)ES6中迭代器與生成器的示例分析,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
具體如下:
循環(huán)語句的問題
var colors = ["red", "green", "blue"]; for(var i=0; i<colors.length; i++){ console.log(colors[i]); }
在ES6之前,這種標(biāo)準(zhǔn)的for循環(huán),通過變量來跟蹤數(shù)組的索引。如果多個循環(huán)嵌套就需要追蹤多個變量,代碼復(fù)雜度會大大增加,也容易產(chǎn)生錯用循環(huán)變量的bug。
迭代器的出現(xiàn)旨在消除這種復(fù)雜性并減少循環(huán)中的錯誤。
什么是迭代器
我們先感受一下用ES5語法模擬創(chuàng)建一個迭代器:
function createIterator(items) { var i = 0; return { // 返回一個迭代器對象 next: function() { // 迭代器對象一定有個next()方法 var done = (i >= items.length); var value = !done ? items[i++] : undefined; return { // next()方法返回結(jié)果對象 value: value, done: done }; } }; } var iterator = createIterator([1, 2, 3]); console.log(iterator.next()); // "{ value: 1, done: false}" console.log(iterator.next()); // "{ value: 2, done: false}" console.log(iterator.next()); // "{ value: 3, done: false}" console.log(iterator.next()); // "{ value: undefiend, done: true}" // 之后所有的調(diào)用都會返回相同內(nèi)容 console.log(iterator.next()); // "{ value: undefiend, done: true}"
以上,我們通過調(diào)用createIterator()函數(shù),返回一個對象,這個對象存在一個next()方法,當(dāng)next()方法被調(diào)用時,返回格式{ value: 1, done: false}的結(jié)果對象。
因此,我們可以這么定義:迭代器是一個擁有next()方法的特殊對象,每次調(diào)用next()都返回一個結(jié)果對象。
借助這個迭代器對象,我們來改造剛開始那個標(biāo)準(zhǔn)的for循環(huán)【暫時先忘記ES6的for-of循環(huán)新特性】:
var colors = ["red", "green", "blue"]; var iterator = createIterator(colors); while(!iterator.next().done){ console.log(iterator.next().value); }
what?,消除循環(huán)變量而已,需要搞這么麻煩,代碼上不是得不償失了嗎?
并非如此,畢竟createIterator()只需寫一次,就可以一直復(fù)用。不過ES6引入了生成器對象,可以讓創(chuàng)建迭代器的過程變得更加簡單。
什么是生成器
生成器是一種返回迭代器的函數(shù),通過function關(guān)鍵字后的星號(*)來表示,函數(shù)中會用到新的關(guān)鍵字yield。
function *createIterator(items) { for(let i=0; i<items.length; i++) { yield items[i]; } } let iterator = createIterator([1, 2, 3]); // 既然生成器返回的是迭代器,自然就可以調(diào)用迭代器的next()方法 console.log(iterator.next()); // "{ value: 1, done: false}" console.log(iterator.next()); // "{ value: 2, done: false}" console.log(iterator.next()); // "{ value: 3, done: false}" console.log(iterator.next()); // "{ value: undefiend, done: true}" // 之后所有的調(diào)用都會返回相同內(nèi)容 console.log(iterator.next()); // "{ value: undefiend, done: true}"
上面,我們用ES6的生成,大大簡化了迭代器的創(chuàng)建過程。我們給生成器函數(shù)createIterator()傳入一個items數(shù)組,函數(shù)內(nèi)部,for循環(huán)不斷從數(shù)組中生成新的元素放入迭代器中,每遇到一個yield語句循環(huán)都會停止;每次調(diào)用迭代器的next()方法,循環(huán)便繼續(xù)運行并停止在下一條yield語句處。
生成器的創(chuàng)建方式
生成器是個函數(shù):
function *createIterator(items) { ... }
可以用函數(shù)表達(dá)式方式書寫:
let createIterator = function *(item) { ... }
也可以添加到對象中,ES5風(fēng)格對象字面量:
let o = { createIterator: function *(items) { ... } }; let iterator = o.createIterator([1, 2, 3]);
ES6風(fēng)格的對象方法簡寫方式:
let o = { *createIterator(items) { ... } }; let iterator = o.createIterator([1, 2, 3]);
可迭代對象
在ES6中,所有的集合對象(數(shù)組、Set集合及Map集合)和字符串都是可迭代對象,可迭代對象都綁定了默認(rèn)的迭代器。
來了來了,姍姍來遲的ES6循環(huán)新特性for-of:
var colors = ["red", "green", "blue"]; for(let color of colors){ console.log(color); }
for-of循環(huán),可作用在可迭代對象上,正是利用了可迭代對象上的默認(rèn)迭代器。大致過程是:for-of循環(huán)每執(zhí)行一次都會調(diào)用可迭代對象的next()方法,并將迭代器返回的結(jié)果對象的value屬性存儲在變量中,循環(huán)將繼續(xù)執(zhí)行這一過程直到返回對象的done屬性的值為true。
如果只需要迭代數(shù)組或集合中的值,用for-of循環(huán)代替for循環(huán)是個不錯的選擇。
訪問默認(rèn)迭代器
可迭代對象,都有一個Symbol.iterator方法,for-of循環(huán)時,通過調(diào)用colors數(shù)組的Symbol.iterator方法來獲取默認(rèn)迭代器的,這一過程是在JavaScript引擎背后完成的。
我們可以主動獲取一下這個默認(rèn)迭代器來感受一下:
let values = [1, 2, 3]; let iterator = values[Symbol.iterator](); console.log(iterator.next()); // "{ value: 1, done: false}" console.log(iterator.next()); // "{ value: 2, done: false}" console.log(iterator.next()); // "{ value: 3, done: false}" console.log(iterator.next()); // "{ value: undefined, done: true}"
在這段代碼中,通過Symbol.iterator獲取了數(shù)組values的默認(rèn)迭代器,并用它遍歷數(shù)組中的元素。在JavaScript引擎中執(zhí)行for-of循環(huán)語句也是類似的處理過程。
用Symbol.iterator屬性來檢測對象是否為可迭代對象:
function isIterator(object) { return typeof object[Symbol.iterator] === "function"; } console.log(isIterable([1, 2, 3])); // true console.log(isIterable(new Set())); // true console.log(isIterable(new Map())); // true console.log(isIterable("Hello")); // true
創(chuàng)建可迭代對象
當(dāng)我們在創(chuàng)建對象時,給Symbol.iterator屬性添加一個生成器,則可以將其變成可迭代對象:
let collection = { items: [], *[Symbol.iterator]() { // 將生成器賦值給對象的Symbol.iterator屬性來創(chuàng)建默認(rèn)的迭代器 for(let item of this.items) { yield item; } } }; collection.items.push(1); collection.items.push(2); collection.items.push(3); for(let x of collection) { console.log(x); }
內(nèi)建迭代器
ES6中的集合對象,數(shù)組、Set集合和Map集合,都內(nèi)建了三種迭代器:
entries() 返回一個迭代器,其值為多個鍵值對。如果是數(shù)組,第一個元素是索引位置;如果是Set集合,第一個元素與第二個元素一樣,都是值。
values() 返回一個迭代器,其值為集合的值。
keys() 返回一個迭代器,其值為集合中的所有鍵名。如果是數(shù)組,返回的是索引;如果是Set集合,返回的是值(Set的值被同時用作鍵和值)。
不同集合的默認(rèn)迭代器
每個集合類型都有一個默認(rèn)的迭代器,在for-of循環(huán)中,如果沒有顯式指定則使用默認(rèn)的迭代器。按常規(guī)使用習(xí)慣,我們很容易猜到,數(shù)組和Set集合的默認(rèn)迭代器是values(),Map集合的默認(rèn)迭代器是entries()。
請看以下示例:
let colors = [ "red", "green", "blue"]; let tracking = new Set([1234, 5678, 9012]); let data = new Map(); data.set("title", "Understanding ECMAScript 6"); data.set("format", "print"); // 與調(diào)用colors.values()方法相同 for(let value of colors) { console.log(value); } // 與調(diào)用tracking.values()方法相同 for(let num of tracking) { console.log(num); } // 與調(diào)用data.entries()方法相同 for(let entry of data) { console.log(entry); }
這段代碼會輸入以下內(nèi)容:
"red"
"green"
"blue"
1234
5678
9012
["title", "Understanding ECMAScript 6"]
["format", "print"]
for-of循環(huán)配合解構(gòu)特性,操縱數(shù)據(jù)會更方便:
for(let [key, value] of data) { console.log(key + "=" + value); }
展開運算符操縱可迭代對象
let set = new Set([1, 2, 3, 4, 5]), array = [...set]; console.log(array); // [1,2,3,4,5]
展開運算符可以操作所有的可迭代對象,并根據(jù)默認(rèn)迭代器來選取要引用的值,從迭代器讀取所有值。然后按返回順序?qū)⑺鼈円来尾迦氲綌?shù)組中。因此如果想將可迭代對象轉(zhuǎn)換為數(shù)組,用展開運算符是最簡單的方法。
關(guān)于“ES6中迭代器與生成器的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。