回覆“前端”即可獲贈前端相關學習資料
大家好，我是進階學習者。
一、概念
可迭代（Iterable） 對象是數組的泛化。這個概念是說任何對象都可以被定製爲可在 for..of 循環中使用的對象。
數組是可迭代的。但不僅僅是數組，很多其他內建對象也都是可迭代的。
二、通過創建一個對象，就可以輕鬆地掌握可迭代的概念。
1.字符串是可迭代的
數組和字符串是使用最廣泛的內建可迭代對象。
對於一個字符串，for..of 遍歷它的每個字符：
for (let char of "test") {// 觸發 4 次，每個字符一次alert( char ); // t, then e, then s, then t}
對於代理對（surrogate pairs），它也能正常工作！
（譯註：這裏的代理對也就指的是 UTF-16 的擴展字符）
let str = '𝒳😂';for (let char of str) {alert( char ); // 𝒳，然後是 😂}
2. 顯式調用迭代器（如何顯式地使用迭代器？）。
將會採用與 for..of 完全相同的方式遍歷字符串，但使用的是直接調用。這段代碼創建了一個字符串迭代器，並“手動”從中獲取值。
let str = "Hello"; // 和 for..of 做相同的事//for (let char of str)alert(char);let iterator = str[Symbol.iterator]();while (true) {let result = iterator.next();if (result.done) break;alert(result.value); // 一個接一個地輸出字符}
注：
很少需要這樣做，但是比 for..of 給了更多的控制權。例如，可以拆分迭代過程：迭代一部分，然後停止，做一些其他處理，然後再恢復迭代。
3. Array.from
有一個全局方法 Array.from 可以接受一個可迭代或類數組的值，並從中獲取一個“真正的”數組。然後就可以對其調用數組方法了。
例：
let arrayLike = {0: "Hello",1: "World",length: 2};let arr = Array.from(arrayLike); // (*)alert(arr.pop()); // World（pop 方法有效）// World（pop 方法有效）
運行結果：
在 (*) 行的 Array.from 方法接受對象，檢查它是一個可迭代對象或類數組對象，然後創建一個新數組，並將該對象的所有元素複製到這個新數組。
現在用 Array.from 將一個字符串轉換爲單個字符的數組：
let str = '𝒳😂';// 將 str 拆分爲字符數組let chars = Array.from(str);alert(chars[0]); // 𝒳alert(chars[1]); // 😂alert(chars.length); // 2
運行結果：
注：
與 str.split 方法不同，它依賴於字符串的可迭代特性。
因此，就像 for..of 一樣，可以正確地處理代理對（surrogate pair）。（譯註：代理對也就是 UTF-16 擴展字符。）
另外一種表達方式
技術上來說，它和下文做了同樣的事：
let str = '𝒳😂';let chars = []; // Array.from 內部執行相同的循環for (let char of str) {chars.push(char);}alert(chars);
運行結果：
但 Array.from 精簡很多。
甚至可以基於 Array.from 創建代理感知（surrogate-aware）的slice 方法（譯註：也就是能夠處理 UTF-16 擴展字符的 slice 方法）：
function slice(str, start, end) {return Array.from(str).slice(start, end).join('');}let str = '𝒳😂𩷶';alert(slice(str, 1, 3)); // 😂𩷶// 原生方法不支持識別代理對（譯註：UTF-16 擴展字符）alert(str.slice(1, 3)); // 亂碼（兩個不同 UTF-16 擴展字符碎片拼接的結果）
三、總結
本文基於JavaScript基礎。介紹了Iterable object（可迭代對象），應用 for..of 的對象被稱爲 可迭代的。通過創建一個對象，詳細的講解了字符串是可迭代的。顯式調用迭代器，以及在實際中 Array.from的應用。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，纔可以理解的更加深刻。
代碼很簡單，希望對你學習有幫助。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點贊，留言，轉發，轉載，感謝大家的相伴與支持
想加入前端學習羣請在後臺回覆【入羣】
萬水千山總是情，點個【在看】行不行
本文分享自微信公衆號 - 前端進階學習交流（gh_cf4e462f0835）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。