ES6的循環與可迭代對象示例詳解
本文將研究 ES6 的 for … of 循環。
舊方法
在過去,有兩種方法可以遍歷 javascript。
首先是經典的 for i 循環,它使你可以遍歷數組或可索引的且有 length 屬性的任何對象。
for(i=0;i<things.length;i++) { var thing = things[i] /* ... */ }
其次是 for … in 循環,用於循環一個對象的鍵/值對。
for(key in things) { if(!thing.hasOwnProperty(key)) { continue; } var thing = things[key] /* ... */ }
for … in 循環通常被視作旁白,因為它循環瞭對象的每一個可枚舉屬性[1]。這包括原型鏈中父對象的屬性,以及被分配為方法的所以屬性。換句話說,它遍歷瞭一些人們可能想不到的東西。使用 for … in 通常意味著循環塊中有很多保護子句,以避免出現不需要的屬性。
早期的 javascript 通過庫解決瞭這個問題。許多 JavaScript 庫(例如:Prototype.js,jQuery,lodash 等)都有類似 each 或 foreach 這樣的工具方法或函數,可讓你無需 for i 或 for … in 循環去遍歷對象和數組。
for … of 循環是 ES6 試圖不用第三方庫去解決其中一些問題的方式。
for … of
for … of 循環
for(const thing of things) { /* ... */ }
它將遍歷一個可迭代(iterable)對象。
可迭代對象是定義瞭 @@ iterator 方法的對象,而且 @@iterator 方法返回一個實現瞭迭代器協議的對象,或者該方法是生成器函數。
在這句話中你需要理解很多東西:
- 可迭代的對象
- @@iterator方法( @@是什麼意思?)
- 迭代器協議(這裡的協議是什麼意思?)
- 等等,迭代(iterable)和迭代器(iterator)不是一回事?
- 另外,生成器函數又是什麼鬼?
下面逐個解決這些疑問。
內置 Iterable
首先,javascript 對象中的一些內置對象天然的可以迭代,比如最容易想到的就是數組對象。可以像下面的代碼中一樣在 for … of 循環中使用數組:
const foo = [ 'apples','oranges','pears' ] for(const thing of foo) { console.log(thing) }
輸出結果是數組中的所有元素。
apples
oranges
pears
還有數組的 entries 方法,它返回一個可迭代對象。這個可迭代對象在每次循環中返回鍵和值。例如下面的代碼:
const foo = [ 'apples','oranges','pears' ] for(const thing of foo.entries()) { console.log(thing) }
將輸出以下內容
[ 0, ‘apples’ ]
[ 1, ‘oranges’ ]
[ 2, ‘pears’ ]
當用下面的語法時,entries 方法會更有用
const foo = [ 'apples','oranges','pears' ] for(const [key, value] of foo.entries()) { console.log(key,':',value) }
在 for 循環中聲明瞭兩個變量:一個用於返回數組的第一項(值的鍵或索引),另一個用於第二項(該索引實際對應的值)。
一個普通的 javascript 對象是不可迭代的。如果你執行下面這段代碼:
// 無法正常執行 const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of foo) { console.log(key,':',value) }
會得到一個錯誤
$ node test.js
/path/to/test.js:6
for(const [key, value] of foo) {
TypeError: foo is not iterable
然而全局 Object 對象的靜態 entries 方法接受一個普通對象作為參數,並返回一個可迭代對象。就像這樣的程序:
const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of Object.entries(foo)) { console.log(key,':',value) }
能夠得到你期望的輸出:
$ node test.js
apples : oranges
pears : prunes
創建自己的 Iterable
如果你想創建自己的可迭代對象,則需要花費更多的時間。你會記得前面說過:
可迭代對象是定義瞭 @@ iterator 方法的對象,而且 @@iterator 方法返回一個實現瞭迭代器協議的對象,或者該方法是生成器函數。
搞懂這些內容的最簡單方法就是一步一步的去創建可迭代對象。首先,我們需要一個實現 @@iterator 方法的對象。 @@ 表示法有點誤導性,我們真正 要做的是用預定義的 Symbol.iterator 符號定義方法。
如果用迭代器方法定義對象並嘗試遍歷:
const foo = { [Symbol.iterator]: function() { } } for(const [key, value] of foo) { console.log(key, value) }
得到一個新錯誤:
for(const [key, value] of foo) {
^
TypeError: Result of the Symbol.iterator method is not an object
這是 javascript 告訴我們它在試圖調用 Symbol.iterator 方法,但是調用的結果不是對象。
為瞭消除這個錯誤,需要用迭代器方法來返回實現瞭迭代器協議的對象。這意味著迭代器方法需要返回一個有 next 鍵的對象,而 next 鍵是一個函數。
const foo = { [Symbol.iterator]: function() { return { next: function() { } } } } for(const [key, value] of foo) { console.log(key, value) }
如果運行上面的代碼,則會出現新錯誤。
for(const [key, value] of foo) {
^
TypeError: Iterator result undefined is not an object
這次 javascript 告訴我們它試圖調用 Symbol.iterator 方法,而該對象的確是一個對象,並且實現瞭 next 方法,但是 next 的返回值不是 javascript 預期的對象。
next 函數需要返回有特定格式的對象——有 value 和 done 這兩個鍵。
next: function() { //... return { done: false, value: 'next value' } }
done 鍵是可選的。如果值為 true(表示迭代器已完成迭代),則說明迭代已結束。
如果 done 為 false 或不存在,則需要 value 鍵。 value 鍵是通過循環此應該返回的值。
所以在代碼中放入另一個程序,它帶有一個簡單的迭代器,該迭代器返回前十個偶數。
class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]( "Symbol.iterator") { return { next: (function() { this.currentValue+=2 if(this.currentValue > 20) { return {done:true} } return { value:this.currentValue } }).bind(this) } } } const foo = new First20Evens; for(const value of foo) { console.log(value) }
生成器
手動去構建實現迭代器協議的對象不是唯一的選擇。生成器對象(由生成器函數返回)也實現瞭迭代器協議。上面的例子用生成器構建的話看起來像這樣:
class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]( "Symbol.iterator") { return function*() { for(let i=1;i<=10;i++) { if(i % 2 === 0) { yield i } } }() } } const foo = new First20Evens; for(const item of foo) { console.log(item) }
本文不會過多地介紹生成器,如果你需要入門的話可以看這篇文章。今天的重要收獲是,我們可以使自己的 Symbol.iterator 方法返回一個生成器對象,並且該生成器對象能夠在 for … of 循環中“正常工作”。 “正常工作”是指循環能夠持續的在生成器上調用 next,直到生成器停止 yield 值為止。
$ node sample-program.js
2
4
6
8
10
參考資料
對象的每個可枚舉屬性: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…in
總結
到此這篇關於ES6的循環與可迭代對象的文章就介紹到這瞭,更多相關ES6循環與可迭代對象內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript循環遍歷的24個方法,你都知道嗎
- JavaScript中你不知道的Object.entries用法
- JavaScript前端迭代器Iterator與生成器Generator講解
- Object.keys()、Object.values()、Object.entries()用法總結
- 詳解ES9的新特性之異步遍歷Async iteration