文章目錄

• 1. 基本語法
• 2. Iterator 接口與 Generator 函數

MDN : 處理集合中的每個項是很常見的操作。JavaScript 提供了許多迭代集合的方法，從簡單的for循環到map()和filter()。迭代器和生成器將迭代的概念直接帶入核心語言，并提供了一種機制來自定義for…of循環的行為。

JavaScript 原有的表示“集合”的數據結構，主要是數組（Array）和對象（Object），ES6 又添加了Map和Set。這樣就有了四種數據集合，用戶還可以組合使用它們，定義自己的數據結構，比如數組的成員是Map，Map的成員是對象。這樣就需要一種統一的接口機制，來處理所有不同的數據結構。

1. 基本語法

遍歷器（Iterator）就是這樣一種機制。它是一種接口，為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就可以完成遍歷操作（即依次處理該數據結構的所有成員）。

Iterator 的作用有三個：

• 為各種數據結構，提供一個統一的、簡便的訪問接口
• 使得數據結構的成員能夠按某種次序排列
• ES6 創造了一種新的遍歷命令for...of循環，Iterator 接口主要供for...of消費

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

ES6 規定，默認的Iterator接口部署在數據結構的Symbol.iterator屬性，或者說，一個數據結構只要具有Symbol.iterator屬性，就可以認為是“可遍歷的”（iterable）。

const obj = {[Symbol.iterator] : function () {return {next: function () {return {value: 1,done: true};}};} };

上面代碼中，對象obj是可遍歷的（iterable），因為具有Symbol.iterator屬性。凡是部署了Symbol.iterator屬性的數據結構，就稱為部署了遍歷器接口。調用這個接口，就會返回一個遍歷器對象。

原生具備 Iterator 接口的數據結構如下：

• Array
• Map
• Set
• String
• TypedArray
• 函數的 arguments 對象
• NodeList 對象

let arr = ['a', 'b', 'c']; let iter = arr[Symbol.iterator]();iter.next() // { value: 'a', done: false } iter.next() // { value: 'b', done: false } iter.next() // { value: 'c', done: false } iter.next() // { value: undefined, done: true }

對于原生部署 Iterator接口的數據結構，不用自己寫遍歷器生成函數，for...of循環會自動遍歷它們。除此之外，其他數據結構（主要是對象）的Iterator接口，都需要自己在Symbol.iterator屬性上面部署，這樣才會被for...of循環遍歷。

class RangeIterator {constructor(start, stop) {this.value = start;this.stop = stop;}[Symbol.iterator]() { return this; }next() {var value = this.value;if (value < this.stop) {this.value++;return {done: false, value: value};}return {done: true, value: undefined};} }function range(start, stop) {return new RangeIterator(start, stop); }for (var value of range(0, 3)) {console.log(value); // 0, 1, 2 } // 類似數組的對象 let iterable = {0: 'a',1: 'b',2: 'c',length: 3,[Symbol.iterator]: Array.prototype[Symbol.iterator] }; for (let item of iterable) {console.log(item); // 'a', 'b', 'c' }

2. Iterator 接口與 Generator 函數

Symbol.iterator()方法幾乎不用部署任何代碼，只要用 yield 命令給出每一步的返回值即可。

let myIterable = {[Symbol.iterator]: function* () {yield 1;yield 2;yield 3;} }; [...myIterable] // [1, 2, 3]// 或者采用下面的簡潔寫法let obj = {* [Symbol.iterator]() {yield 'hello';yield 'world';} };for (let x of obj) {console.log(x); } // "hello" // "world"

總結

以上是生活随笔為你收集整理的【ES6(2015)】Iterator的全部內容，希望文章能夠幫你解決所遇到的問題。

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