上篇說(shuō)到迭代可以按照一定的規(guī)則，從指定的空間中取出數(shù)據(jù)。區(qū)別于循環(huán)的是，迭代過(guò)程不知道數(shù)據(jù)的長(zhǎng)度，也不知道要取多少個(gè)數(shù)據(jù)。迭代器（iterator）是一個(gè)具有next方法的對(duì)象，next方法返回下一個(gè)數(shù)據(jù)并且能指示是否迭代完成；迭代器創(chuàng)建函數(shù)是一個(gè)返回迭代器的函數(shù)。這一篇來(lái)講一下可迭代協(xié)議和for-of循環(huán)。

1.可迭代協(xié)議

ES6規(guī)定，如果一個(gè)對(duì)象具有知名符號(hào)屬性Symbol.iterator，并且屬性值是一個(gè)迭代器創(chuàng)建函數(shù)，則該對(duì)象是可迭代的（iterable）

【注】判斷一個(gè)對(duì)象是否可迭代，就是查看該對(duì)象中是否存在屬性Symbol.iterator。上篇中我們對(duì)數(shù)組進(jìn)行了迭代，現(xiàn)在打印一個(gè)數(shù)組，查看它的proto，如下

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

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

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循環(huán)

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

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

3.展開(kāi)運(yùn)算符與可迭代對(duì)象

展開(kāi)運(yùn)算符可以作用于可迭代對(duì)象，這樣就可以輕松的將可迭代對(duì)象轉(zhuǎn)換為數(shù)組

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)

?

超強(qiáng)干貨來(lái)襲 云風(fēng)專(zhuān)訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。