上篇說到迭代可以按照一定的規則，從指定的空間中取出數據。區別于循環的是，迭代過程不知道數據的長度，也不知道要取多少個數據。迭代器（iterator）是一個具有next方法的對象，next方法返回下一個數據并且能指示是否迭代完成；迭代器創建函數是一個返回迭代器的函數。這一篇來講一下可迭代協議和for-of循環。

1.可迭代協議

ES6規定，如果一個對象具有知名符號屬性Symbol.iterator，并且屬性值是一個迭代器創建函數，則該對象是可迭代的（iterable）

【注】判斷一個對象是否可迭代，就是查看該對象中是否存在屬性Symbol.iterator。上篇中我們對數組進行了迭代，現在打印一個數組，查看它的proto，如下

const arr = [1, 3, 4, 2]; console.log(arr)

【注】遍歷可迭代對象的方法，上一篇我們用了while循環來判斷是否進入迭代過程，es6提供了for-of循環來進行迭代，下面還是將while的例子拿過來再康康

const arr = [1, 3, 4, 2]; const iterator = arr[Symbol.iterator](); let result = iterator.next(); while (!result.done) {const item = result.value;console.log(item);result = iterator.next() } 圖1

?2.for-of循環

for-of循環用于遍歷可迭代對象，for(const item of iterable) {}，如下例，其打印結果同圖1

const arr = [1, 3, 4, 2]; for (const iterator of arr) {console.log(iterator) }

3.展開運算符與可迭代對象

展開運算符可以作用于可迭代對象，這樣就可以輕松的將可迭代對象轉換為數組

const obj = {a: 1,b: 2,[Symbol.iterator]() {const keys = Object.keys(this);console.log(keys);let i = 0;return {next: () => {const propName = keys[i];const propValue = this[propName];const result = {value: {propName,propValue},done: i >= keys.length}i++;return result;}}} } const arr = [...obj]; console.log(arr); function test(a, b) {console.log(a, b) } test(...obj)

?

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的可迭代协议与for-of循环的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。