推薦教學:《JavaScript影片教學》
#本文將研究 ES6 的 for ... of
迴圈。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
在過去,有兩種方法可以遍歷 javascript。
首先是經典的 for i
循環,它使你可以遍歷數組或可索引的且有 length
屬性的任何物件。
1 2 3 4 |
|
其次是 for ... in
循環,用於循環一個物件的鍵/值對。
1 2 3 4 5 |
|
for ... in
迴圈通常被視為旁白,因為它循環了物件的每一個可枚舉屬性。這包括原型鏈中父物件的屬性,以及被指派為方法的所以屬性。換句話說,它遍歷了一些人們可能想不到的東西。使用 for ... in
通常表示循環區塊中有很多保護子句,以避免出現不必要的屬性。
早期的 javascript 透過函式庫解決了這個問題。許多JavaScript函式庫(例如:Prototype.js,jQuery,lodash 等)都有類似each
或foreach
這樣的工具方法或函數,可讓你不需要for i
或for ... in
迴圈去遍歷物件和陣列。
for ... of
迴圈是 ES6 試圖不用第三方函式庫去解決其中一些問題的方式。
for ... of
迴圈
1 2 3 |
|
它將遍歷一個 可迭代( iterable)物件。
可迭代對像是定義了@@ iterator 方法的對象,而且@@iterator 方法傳回一個實作了迭代器協定的對象,或該方法是生成器函數。
在這句話中你需要理解很多東西:
@@
是什麼意思?)下面逐一解決這些疑問。
首先,javascript 物件中的一些內建物件天然的可以迭代,例如最容易想到的就是陣列物件。可以像下面的程式碼中一樣在 for ... of
迴圈中使用陣列:
1 2 3 4 5 6 7 |
|
輸出結果是陣列中的所有元素。
1 2 3 |
|
還有數組的 entries
方法,它傳回一個可迭代物件。這個可迭代物件在每次循環中返回鍵和值。例如下面的程式碼:
1 2 3 4 5 6 7 |
|
將輸出以下內容
1 2 3 |
|
當使用下面的語法時,entries
方法會更有用
1 2 3 4 5 6 7 |
|
在for循環中宣告了兩個變數:一個用於傳回數組的第一項(值的鍵或索引),另一個用於第二項(該索引實際對應的值)。
一個普通的 javascript 物件是不可迭代的。如果你執行下面這段程式碼:
1 2 3 4 5 6 7 8 9 |
|
會得到一個錯誤
1 2 3 4 |
|
#然而全域Object
物件的靜態entries
方法接受一個普通物件作為參數,並傳回一個可迭代物件。就像這樣的程式:
1 2 3 4 5 6 7 8 |
|
能夠得到你期望的輸出:
1 2 3 |
|
@@ iterator 方法的對象,而且@@iterator 方法回傳一個實作了迭代器協定的對象,或者該方法是生成器函數。搞懂這些內容的最簡單方法就是一步一步去建立可迭代的物件。首先,我們需要一個實作
@@iterator 方法的物件。 @@ 表示法有點誤導性,我們真正要做的是用預先定義的
Symbol.iterator 符號定義方法。
1 2 3 4 5 6 7 8 |
|
1 2 3 |
|
Symbol. iterator 方法,但呼叫的結果
不是物件。
迭代器協定的物件。這意味著迭代器方法需要傳回一個有 next 鍵的對象,而
next 鍵是一個函數。
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 2 3 |
|
这次 javascript 告诉我们它试图调用 Symbol.iterator
方法,而该对象的确是一个对象,并且实现了 next
方法,但是 next
的返回值不是 javascript 预期的对象。
next
函数需要返回有特定格式的对象——有 value
和 done
这两个键。
1 2 3 4 5 6 7 |
|
done
键是可选的。如果值为 true
(表示迭代器已完成迭代),则说明迭代已结束。
如果 done
为 false
或不存在,则需要 value
键。 value
键是通过循环此应该返回的值。
所以在代码中放入另一个程序,它带有一个简单的迭代器,该迭代器返回前十个偶数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
手动去构建实现迭代器协议的对象不是唯一的选择。生成器对象(由生成器函数返回)也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
本文不会过多地介绍生成器,如果你需要入门的话可以看这篇文章。今天的重要收获是,我们可以使自己的 Symbol.iterator
方法返回一个生成器对象,并且该生成器对象能够在 for ... of
循环中“正常工作”。 “正常工作”是指循环能够持续的在生成器上调用 next
,直到生成器停止 yield
值为止。
1 2 3 4 5 6 |
|
原文地址:https://alanstorm.com/es6s-many-for-loops-and-iterable-objects/
作者:Alan Storm
译文地址:https://segmentfault.com/a/1190000023924865
更多编程相关知识,请访问:编程学习网站!!
以上是了解ES6中的for ... of迴圈與Iterable對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!