雲栖号資訊：【 點選檢視更多行業資訊】
在這裡您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！
是什麼使得一個程式設計語言的新特性很棒？那就是當這個特性可以結合多個其它特性的時候。
ES2015 版本中引入的 for...of 語句就是這種情況。
for...of 可以疊代數組、類數組以及任何可以疊代的對象(maps、sets、DOM集合)，并且，for...of 的語句還很短。
在這篇文章中，我将會示範 for...of 的能力。
1. 數組疊代
for...of 最常見的應用是對數組項進行疊代。該循環可以高效得完成疊代，而無需其他變量來保持索引。
例如:
for...of 循環周遊 products 的每一項。疊代項被指派給變量 product.
數組方法 entries() 可以用于通路疊代項的索引。該方法在每次疊代時傳回一對 [index，item]。
就地解構是 for...of 的另一個重要功能，我們将在下一部分中對其進行詳細說明。
1.1 就地解構
首先，我們來看一下 for...of 循環的文法：
LeftHandSideExpression 表達式可以替換為任意指派表達式左側的内容。
在前面的示例中，LeftHandSideExpression 是一個變量聲明 const product ，甚至是一個解構 const [index，product]。
是以，for...of 的文法支援實作疊代項的解構。
讓我們周遊一個對象數組，提取每個對象的 name 屬性：
const { name } of persons 循環疊代 persons 對象數組，并且就地将 person 對象進行了解構。
2. 類數組疊代
for...of 可以用于疊代類數組對象。arguments 是函數體内的特殊變量，包含函數的所有參數，這是一個經典的類數組對象。
讓我們寫一個求和函數 sum(num1, num2, ..., numN)：
在每次疊代中，for...of 循環周遊類數組 arguments 中的每一個數，并計算總和。
3. 快速了解可疊代
什麼是可疊代對象？它是支援可疊代協定的對象。
我們可以通過檢視 Symbol.iterator 方法來确定某個資料是否可疊代。例如，下面的例子顯示了數組是可疊代的：
for...of 接受可疊代對象。這很棒，因為現在你可以周遊string、數組、類數組、set、map，同時仍可以享受 for...of 的簡潔。
4. 字元串疊代
JavaScript 的基礎類型 string 是可疊代的。是以，可以輕松地周遊字元串的字元。
message 是一個字元串。由于字元串可疊代的，是以 for...of 循環周遊 message 。
5. Map 和 Set 疊代
Map 是一個特殊的對象，将鍵與值相關聯。鍵可以是任何基本類型（通常是 string，但可以是 number 等）。
幸運的是，Map 也是可疊代的（在鍵/值對上進行疊代），并且 for...of 可以輕松地循環疊代所有鍵/值對。
一起看一下：
for (const [number, name] of names) 疊代 names 的鍵值對。
在每個循環中，疊代器都會傳回一個數組 [key，value] ，并使用 const [number，name] 立即對這對數組進行解構。
以相同的方式可以周遊 Set 的項：
6. 疊代普通的JavaScript對象
嘗試周遊普通JS對象的屬性/值總是很痛苦。過去，我通常使用 Object.keys() 擷取對象的鍵，然後使用 forEach 來疊代鍵數組。【譯者：這不代表本人觀點，我比較喜歡用 for...in 周遊對象】
新的 Object.entries() 函數與 for...of 組合使用是個不錯的選擇：
Object.entries(person) 傳回一個鍵和值的元組數組：[[''name'，'John Smith']，['job'，'agent']]。然後，使用 for...of 循環周遊數組，并将每個元組解構為 const [prop，value]。
7. 周遊DOM集合
你可能知道 HTMLCollection 令人沮喪。主要是因為 HTMLCollection 是一個類數組的對象（而不是正常數組），是以我們無法使用數組的方法。
例如，每個 DOM 元素的 children 屬性都是 HTMLCollection 。好在 for...of 可以在類似數組的對象上進行疊代，是以我們可以輕松地疊代 children：
此外，for...of 可以疊代 NodeList 集合（可疊代）。例如，函數 document.querySelectorAll(query) 傳回一個 NodeList：
如果你想周遊 DOM 中的不同種類的集合，那麼 for...of 語句是一個不錯的選擇。
8. 性能
疊代大型數組時，for...of 的執行速度可能會比經典方法慢：
在每次疊代中調用疊代器比通過增加索引通路的開銷更大。但是，這種細微差别在使用大型數組的應用程式中以及性能至關重要的應用程式中非常重要，不過這種情況很少發生。
9. 總結
為什麼說 for...of 是一顆寶石，因為：
- 它簡明扼要
- 它接受疊代器，包括數組，字元串，Set，Map，DOM集合
- 它接受類數組對象
- 疊代的項目可以在就地解構。
你首選的疊代數組項的方式是什麼？
【雲栖号線上課堂】每天都有産品技術專家分享！
課程位址：
https://yqh.aliyun.com/zhibo立即加入社群，與專家面對面，及時了解課程最新動态！
【雲栖号線上課堂 社群】
https://c.tb.cn/F3.Z8gvnK
原文釋出時間：2020-03-31
本文作者：劉小夕
本文來自：“掘金”，了解相關資訊可以關注“
掘金”