迭代協議

為 ECMAScript 2015 中的一些補充內容，並非新的內建物件或語法，而是協議。這些協議可被任何遵守特定協定的物件所實作。

可迭代協議

可迭代（iterable）協議允許 JavaScript 物件定義或客制他們的迭代行為，例如哪些值可在 for..of 語法結構中被迭代出來。部分內建型別為擁有預設迭代行為的可迭代內建物件，如 Array 或 Map，而其他型別（如 Object）則否。

為了成為可迭代的，一個物件必須實作 [Symbol.iterator]() 方法，意思是這個物件（或其原型鏈中的其中一個原型物件）必須擁有一個鍵（key）值為 [Symbol.iterator]（即 Symbol.iterator 常數）的屬性：

[Symbol.iterator]: 回傳符合迭代器協議之物件的無引數函式。

每當物件需要被迭代時（比如在一個開始的 for..of 迴圈中），物件的 [Symbol.iterator]() 方法會被以不傳入引數的方式呼叫，並會使用其回傳的迭代器來獲得被迭代出來的值。

迭代器協議

迭代器（iterator）協議定義了一個標準方式來產出一連串（有限或無限）的值，並且可能於所有值都被產出後回傳一個值。

當物件以下列語義實作了 next() 方法即為一個迭代器：

屬性值

屬性	值
`next`	回傳一個至少擁有以下兩個屬性之物件的無引數函式： `done`（布林值）若迭代器已迭代完畢整個可迭代序列，則值為 `true`。在這個情況下 `value` 可以是代表迭代器的回傳值。若迭代器能夠產出序列中的下一個值，則值為 `false`。相當於完全不指定 `done` 屬性。 `value` - 任何由迭代器所回傳的 JavaScript 值。可於 `done` 為 `true` 時省略。 `next` 方法必須總是回傳一個包含符合 `done` 及 `value` 屬性的物件。假如回傳了一個非物件值（如 `false` 或 `undefined`），則將會拋出一個 `TypeError` 錯誤。

next

回傳一個至少擁有以下兩個屬性之物件的無引數函式：

done（布林值）
- 若迭代器已迭代完畢整個可迭代序列，則值為 true。在這個情況下 value 可以是代表迭代器的回傳值。
- 若迭代器能夠產出序列中的下一個值，則值為 false。相當於完全不指定 done 屬性。
value - 任何由迭代器所回傳的 JavaScript 值。可於 done 為 true 時省略。

next 方法必須總是回傳一個包含符合 done 及 value 屬性的物件。假如回傳了一個非物件值（如 false 或 undefined），則將會拋出一個 TypeError 錯誤。

備註： 我們無法反射性的一眼看出一個特定的物件是否實作了迭代器協議，然而要建立一個同時滿足迭代器及可迭代協議的物件卻是相當容易（如下例所示）。範例的做法允許一個迭代器被各個預期其可迭代行為的語法所消費。因此很少有需要實作迭代器協議而沒有實作可迭代協議的情況。

var myIterator = { next: function () { // ... }, [Symbol.iterator]: function () { return this; }, };

迭代協議使用範例

String 為一個可迭代內建物件（built-in iterable object）的範例：

var someString = "hi"; typeof someString[Symbol.iterator]; // "function"

String 的預設迭代器會回傳字串中的一個一個字元：

var iterator = someString[Symbol.iterator](); iterator + ""; // "[object String Iterator]" iterator.next(); // { value: "h", done: false } iterator.next(); // { value: "i", done: false } iterator.next(); // { value: undefined, done: true }

部分內建語法結構（built-in constructs），如 spread syntax，其內部也使用了相同的迭代協議：

[...someString]; // ["h", "i"]

我們可以藉由提供我們自己的 [Symbol.iterator]() 來重新定義迭代行為：

var someString = new String("hi"); // need to construct a String object explicitly to avoid auto-boxing someString[Symbol.iterator] = function () { return { // this is the iterator object, returning a single element, the string "bye" next: function () { if (this._first) { this._first = false; return { value: "bye", done: false }; } else { return { done: true }; } }, _first: true, }; };

請注意，重新定義 [Symbol.iterator]() 會影響使用迭代協議之內建語法結構的行為：

[...someString]; // ["bye"] someString + ""; // "hi"

var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...myIterable]; // [1, 2, 3]

接受可迭代物件的內建 API

有許多 APIs 接受可迭代物件，如：Map([iterable])、WeakMap([iterable])、Set([iterable]) 及 WeakSet([iterable])：

var myObj = {}; new Map([ [1, "a"], [2, "b"], [3, "c"], ]).get(2); // "b" new WeakMap([ [{}, "a"], [myObj, "b"], [{}, "c"], ]).get(myObj); // "b" new Set([1, 2, 3]).has(3); // true new Set("123").has("2"); // true new WeakSet( (function* () { yield {}; yield myObj; yield {}; })(), ).has(myObj); // true

另外可參考 Promise.all(iterable)、Promise.race(iterable) 以及 Array.from()。

用於可迭代物件的語法

部分陳述式（statements）及運算式（expressions）為預期用於可迭代物件，例如 for-of 迴圈、spread syntax、yield*，及解構：

for (let value of ["a", "b", "c"]) { console.log(value); } // "a" // "b" // "c" [..."abc"]; // ["a", "b", "c"] function* gen() { yield* ["a", "b", "c"]; } gen().next(); // { value:"a", done:false } [a, b, c] = new Set(["a", "b", "c"]); a; // "a"

非良好的可迭代物件

假如可迭件物件的 [Symbol.iterator]() 方法不是回傳一個迭代器物件，即是非良好的（non-well-formed）可迭代物件。如以下方式使用可能會導致執行時期異常或錯誤行為：

var nonWellFormedIterable = {} nonWellFormedIterable[Symbol.iterator] = () => 1 [...nonWellFormedIterable] // TypeError: [] is not a function

迭代器範例

簡單的迭代器

function makeIterator(array) { var nextIndex = 0; return { next: function () { return nextIndex < array.length ? { value: array[nextIndex++], done: false } : { done: true }; }, }; } var it = makeIterator(["yo", "ya"]); console.log(it.next().value); // 'yo' console.log(it.next().value); // 'ya' console.log(it.next().done); // true

無限迭代器

function idMaker() { var index = 0; return { next: function () { return { value: index++, done: false }; }, }; } var it = idMaker(); console.log(it.next().value); // '0' console.log(it.next().value); // '1' console.log(it.next().value); // '2' // ...

搭配生成器（generator）

function* makeSimpleGenerator(array) { var nextIndex = 0; while (nextIndex < array.length) { yield array[nextIndex++]; } } var gen = makeSimpleGenerator(["yo", "ya"]); console.log(gen.next().value); // 'yo' console.log(gen.next().value); // 'ya' console.log(gen.next().done); // true function* idMaker() { var index = 0; while (true) yield index++; } var gen = idMaker(); console.log(gen.next().value); // '0' console.log(gen.next().value); // '1' console.log(gen.next().value); // '2' // ...

搭配 ES2015 類別

class SimpleClass { constructor(data) { this.index = 0; this.data = data; } [Symbol.iterator]() { return { next: () => { if (this.index < this.data.length) { return { value: this.data[this.index++], done: false }; } else { this.index = 0; //If we would like to iterate over this again without forcing manual update of the index return { done: true }; } }, }; } } const simple = new SimpleClass([1, 2, 3, 4, 5]); for (const val of simple) { console.log(val); //'0' '1' '2' '3' '4' '5' }

生成器物件是迭代器還是可迭代物件？

生成器物件同時為迭代器及可迭代物件：

var aGeneratorObject = (function* () { yield 1; yield 2; yield 3; })(); typeof aGeneratorObject.next; // "function", because it has a next method, so it's an iterator typeof aGeneratorObject[Symbol.iterator]; // "function", because it has an [Symbol.iterator]() method, so it's an iterable aGeneratorObject[Symbol.iterator]() === aGeneratorObject; // true, because its [Symbol.iterator]() method returns itself (an iterator), so it's an well-formed iterable [...aGeneratorObject]; // [1, 2, 3]

參見

更多關於 ES2015 生成器（generator）的資訊，可參考生成器函式 function* 文件。