資訊專欄INFORMATION COLUMN
摘要：前言又稱提供一個(gè)全新的迭代器的概念，它允許我們?cè)谡Z(yǔ)言層面上定義一個(gè)有限或無限的序列。后者可以被用來幫助我們理解迭代器。但是當(dāng)我們使用迭代器時(shí)，這個(gè)問題就迎刃而解了。是中的新語(yǔ)法，用來配合迭代器。這是因?yàn)閿?shù)組的迭代器只返回其中預(yù)期的元素。
前言
EcmaScript 2015 （又稱ES6）提供一個(gè)全新的迭代器的概念，它允許我們?cè)谡Z(yǔ)言層面上定義一個(gè)（有限或無限的）序列。
暫時(shí)先拋開它。我們對(duì)于for循環(huán)以及它的兄弟for-in循環(huán)，都已經(jīng)十分的熟悉。后者可以被用來幫助我們理解迭代器。
jsfor (var key in table) {
console.log(key + " = " + table[key]);
}
對(duì)于for-in循環(huán)，它有許多的問題。但是最大的問題，便是它不保證迭代的順序。但是當(dāng)我們使用ES6迭代器時(shí)，這個(gè)問題就迎刃而解了。
for-offor-of是ES6中的新語(yǔ)法，用來配合迭代器。
jsfor (var key of table) {
console.log(key + " = " + table[key]);
}
使用for-of，我們得到的是一個(gè)可以保證順序的迭代。為了讓一個(gè)對(duì)象可以被迭代器所迭代，對(duì)象需要實(shí)現(xiàn)一個(gè)“迭代協(xié)議”，即擁有一個(gè)Symbol.iterator屬性。這個(gè)屬性會(huì)被for-of所使用，在我們的例子中，它就是table[Symbol.iterator]。
Symbol.iterator也是在ES6中新增的內(nèi)容，我們會(huì)在另一篇文章中詳細(xì)討論。在這里，我們只需認(rèn)為它是對(duì)象的一個(gè)特殊屬性，并且永遠(yuǎn)不會(huì)和其他普通屬性產(chǎn)生沖突。
table[Symbol.iterator]的值，必須是一個(gè)符合“迭代協(xié)議”的函數(shù)，即它需要返回一個(gè)類似于{ next: function () {} }的對(duì)象。
jstable[Symbol.iterator] = function () {
return {
next: function () {}
}
}
然后，在for-of循環(huán)每次調(diào)用next()函數(shù)時(shí)，它需要返回一個(gè)類似于{value: …, done: [true/false]}的對(duì)象。所以，一個(gè)迭代器的完整實(shí)現(xiàn)類似于如下的例子：
jstable[Symbol.iterator] = function () {
var keys = Object.keys(this).sort();
var index = 0;
return {
next: function () {
return {
value: keys[index], done: index++ >= keys.length
};
}
}
}
惰性執(zhí)行
迭代器允許我們?cè)诘谝淮握{(diào)用next()函數(shù)之后，再執(zhí)行相應(yīng)的邏輯。在上面的例子里，當(dāng)我們調(diào)用迭代器的瞬間，我們就立刻執(zhí)行了排序和取值的工作。但是，如果next()函數(shù)永遠(yuǎn)不被調(diào)用的話，我們就浪費(fèi)了性能。所以讓我們來優(yōu)化它：
jstable[Symbol.iterator] = function () {
var _this = this;
var keys = null;
var index = 0;
return {
next: function () {
if (keys === null) {
keys = Object.keys(_this).sort();
}
return {
value: keys[index], done: index++ >= keys.length
};
}
}
}
for-of和for-in的差別
理解for-of和for-in之間的差別，是十分重要的。以下是一個(gè)簡(jiǎn)單的，但是非常好的解釋差別的例子：
jsvar list = [3, 5, 7];
list.foo = "bar";
for (var key in list) {
console.log(key); // 0, 1, 2, foo
}
for (var value of list) {
console.log(value); // 3, 5, 7
}
正如所見的，for-of循環(huán)僅打印出了數(shù)組中的值，忽略了其他屬性。這是因?yàn)閿?shù)組的迭代器只返回其中預(yù)期的元素。
內(nèi)置迭代器String，Array，TypedArray，Map和Set都是內(nèi)置迭代器，因?yàn)樗鼈兊脑椭卸加幸粋€(gè)Symbol.iterator方法。
jsvar string = "hello";
for (var chr of string) {
console.log(chr); // h, e, l, l, o
}
解構(gòu)賦值
解構(gòu)操作同樣也接受一個(gè)迭代器：
jsvar hello = "world"; var [first, second, ...rest] = [...hello]; console.log(first, second, rest); // w o ["r","l","d"]無限迭代器
只要永遠(yuǎn)不返回done: true，就實(shí)現(xiàn)了一個(gè)無限迭代器。當(dāng)然，需要極力避免出現(xiàn)這種情況。
jsvar ids = {
*[Symbol.iterator]: function () {
var index = 0;
return {
next: function () {
return { value: "id-" + index++, done: false };
}
};
}
};
var counter = 0;
for (var value of ids) {
console.log(value);
if (counter++ > 1000) { // let"s make sure we get out!
break;
}
}
Generator函數(shù)
如果你還不了解ES6 generator 函數(shù)，請(qǐng)參考MDN文檔。簡(jiǎn)而言之，generator函數(shù)是當(dāng)前被談?wù)撟疃嗟腅S6特性，它是一個(gè)可以暫時(shí)退出，并且稍后重新進(jìn)入繼續(xù)執(zhí)行的函數(shù)。在多次的進(jìn)入中，它的上下文（綁定的變量）是會(huì)被保存的。generator函數(shù)自身就是一個(gè)迭代器，來看下面的例子：
jsfunction* list(value) {
for (var item of value) {
yield item;
}
}
for (var value of list([1, 2, 3])) {
console.log(value);
}
var iterator = list([1, 2, 3]);
console.log(typeof iterator.next); // function
console.log(typeof iterator[Symbol.iterator]); // function
console.log(iterator.next().value); // 1
for (var value of iterator) {
console.log(value); // 2, 3
}
所以，我們可以使用generator函數(shù)重寫我們上面的迭代器：
jstable[Symbol.iterator] = function* () {
var keys = Object.keys(this).sort();
for (var item of keys) {
yield item;
}
}
最后
迭代器給JavaScript中的循環(huán)，generator函數(shù)和值序列（value series）帶來了一個(gè)新的維度。你可以使用它，定義一個(gè)類中，它的值的排序方式，也可以用通過其來創(chuàng)建一個(gè)惰性的或無限的序列，等等。
原文地址https://strongloop.com/strongblog/introduction-to-es6-iterators/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85832.html
摘要：由于系統(tǒng)變得越來越復(fù)雜，人們提出了稱為預(yù)處理器和后處理器的工具來管理復(fù)雜性。后處理器在由預(yù)處理器手寫或編譯后對(duì)應(yīng)用更改。我之前建議的文章，，也涵蓋了預(yù)處理器相關(guān)的知識(shí)。 譯者：前端小智 原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學(xué)習(xí)前端開發(fā)的時(shí)候。我看到了很多文章及...
摘要：前端日?qǐng)?bào)精選數(shù)組所有全解密原生實(shí)現(xiàn)最簡(jiǎn)單的圖片懶加載譯如何抓取數(shù)據(jù)中種常見的內(nèi)存泄露陷阱內(nèi)部原理，第一部分基礎(chǔ)渲染前端國(guó)際化中文深入理解筆記模塊掘金譯熱的冷的掘金模塊，桌面端的支付請(qǐng)求，和迷津欲有問遮罩層狀態(tài)丟失及解決方案全 2017-08-20 前端日?qǐng)?bào) 精選 JavaScript數(shù)組所有API全解密原生JS實(shí)現(xiàn)最簡(jiǎn)單的圖片懶加載【譯】React如何抓取數(shù)據(jù)JavaScript 中 ...
摘要：語(yǔ)法校驗(yàn)會(huì)給出警告當(dāng)你仍在使用或不通過任何關(guān)鍵字聲明變量時(shí)。但是如果腳本中還有其他的普通導(dǎo)出，就會(huì)得到非常奇怪的結(jié)果這個(gè)坑爹的情況目前還沒有任何好的解決方案。 我在多年前愛上了coffeScript。對(duì)于javaScript，我一直保持著深沉的愛，也十分高興得看到node.js的快速發(fā)展，但是作為一個(gè)有python背景的程序員，我更喜歡coffeeScript的簡(jiǎn)練語(yǔ)法。 在任何一個(gè)活...
摘要：如果你的運(yùn)行緩慢，你可以考慮是否能優(yōu)化請(qǐng)求，減少對(duì)的操作，盡量少的操，或者犧牲其它的來?yè)Q取性能。在認(rèn)識(shí)描述這些核心元素的過程中，我們也會(huì)分享一些當(dāng)我們構(gòu)建的時(shí)候遵守的一些經(jīng)驗(yàn)規(guī)則，一個(gè)應(yīng)用應(yīng)該保持健壯和高性能來維持競(jìng)爭(zhēng)力。 一個(gè)開源的前端錯(cuò)誤收集工具 frontend-tracker，你值得收藏~ 蒲公英團(tuán)隊(duì)最近開發(fā)了一款前端錯(cuò)誤收集工具，名叫 frontend-tracker ，這款...
摘要：我們將從概念上理解迭代器是什么，以及在何處使用它們和示例。同時(shí)返回一個(gè)名為迭代器的對(duì)象，這個(gè)迭代器將擁有一個(gè)名為的方法，該方法將返回一個(gè)具有鍵值為和的對(duì)象。下圖可以幫助建立可迭代對(duì)象迭代器和之間的關(guān)系，這種關(guān)系稱為迭代協(xié)議。 showImg(https://segmentfault.com/img/bVbkk18?w=1000&h=562); 我們將在本文中分析迭代器。迭代器是在Jav...
閱讀 1680·2021-10-29 13:11
閱讀 845·2021-09-22 10:02
閱讀 1702·2021-08-20 09:35
閱讀 1564·2019-08-30 15:54
閱讀 2470·2019-08-30 15:44
閱讀 1395·2019-08-29 16:52
閱讀 1111·2019-08-23 12:56
閱讀 769·2019-08-22 15:16
