JavaScript 迭代、迭代器模式详解

1. 什么是迭代

循环是迭代机制的基础，因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的。

迭代会在一个有序集合上进行。数组是 JavaScript 中有序集合的最典型例子。

const arr = ['foo', 'bar', 'baz'];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

但由于如下原因，通过这种循环来执行例程并不理想：

• 迭代之前需要事先知道如何使用数据结构。数组中的每一项都只能先通过引用取得数组对象， 然后再通过[]操作符取得特定索引位置上的项。
• 遍历顺序并不是数据结构固有的，通过递增索引来访问数据是特定于数组类型的方式。

JavaScript 在 ECMAScript 6 以后支持了迭代器模式。

2. 迭代器模式

迭代器模式描述了一个方案：可以把有些结构称为可迭代对象，因为它们实现了正式的 Iterable 接口，而且可以通过迭代器 Iterator 消费。

可迭代对象需要具备以下两个特征：

• 元素有限
• 具有无歧义的遍历顺序

任何实现 Iterable 接口的数据结构都可以被 Iterator 接口的结构消费。迭代器是按需创建的一次性对象。每个迭代器都会关联一个可迭代对象。

3. 可迭代协议

可迭代协议要求同时具备两种条件：

• 支持迭代的自我识别
• 可创建 Iterator 接口对象

在 ECMAScript 中，暴露一个属性作为默认迭代器，而且这个属性必须用Symbol.iterator作为键。这个默认迭代器属性引用一个迭代器工厂函数，调用这个工厂函数返回一个新迭代器。

JavaScript 很多内置类型都实现了 Iterable 接口：

• String
• Array
• Map
• Set
• arguments 对象
• NodeList 等 DOM 集合类型

检查是否存在默认迭代器属性可以暴露这个工厂函数：

let num = 1;
let obj = {};

// 这两种类型没有实现迭代器工厂函数
console.log(num[Symbol.iterator]); // undefined
console.log(obj[Symbol.iterator]); // undefined

let str = 'abc';
let arr = ['a', 'b', 'c'];
let map = new Map().set('a', 1).set('b', 2).set('c', 3);
let set = new Set().add('a').add('b').add('c');

// 这些类型都实现了迭代器工厂函数
console.log(str[Symbol.iterator]); // [Function: [Symbol.iterator]]
console.log(arr[Symbol.iterator]); // [Function: values]
console.log(map[Symbol.iterator]); // [Function: entries]
console.log(set[Symbol.iterator]); // [Function: values]

// 调用这个工厂函数会生成一个迭代器
console.log(str[Symbol.iterator]()); // Object [String Iterator] {}
console.log(arr[Symbol.iterator]()); // Object [Array Iterator] {}
console.log(map[Symbol.iterator]()); // [Map Entries] { [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] }
console.log(set[Symbol.iterator]()); // [Set Iterator] { 'a', 'b', 'c' }

写代码过程中，不需要显式调用这个工厂函数来生成迭代器。接收可迭代对象的原生语言特性包括：

• for-of循环
• 数组解构
• 扩展操作符
• Array.from()
• 创建集合
• 创建映射
• Promise.all()接收由期约组成的可迭代对象
• Promise.race()接收由期约组成的可迭代对象
• yield*操作符，在生成器中使用

如果对象原型链上的父类实现了 Iterable 接口，那这个对象也就实现了这个接口：

class FooArray extends Array {}
let fooArr = new FooArray('foo', 'bar', 'baz');
for (let el of fooArr) {
    console.log(el);
}
// foo
// bar
// baz

4. 迭代器协议

迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。迭代器 API 使用next()方法在可迭代对象中遍历数据。每次成功调用next()，都会返回一个 IteratorResult 对象，其中包含迭代器返回的下一个值。若不调用next()，则无法知道迭代器的当前位置。

IteratorResult 对象包含两个属性：

• done：布尔值，表示是否还可以再次调用next()取得下一个值
• value：有两种取值：
  • 包含可迭代对象的下一个值（done === false）
  • undefined（done === true）

// 可迭代对象
let arr = ['foo', 'bar'];

// 迭代器工厂函数
console.log(arr[Symbol.iterator]); // [Function: values]

// 迭代器
let iter = arr[Symbol.iterator]();
console.log(iter); // Object [Array Iterator] {}

// 执行迭代
console.log(iter.next()); // { value: 'foo', done: false }
console.log(iter.next()); // { value: 'bar', done: false }
console.log(iter.next()); // { value: undefined, done: true }

每个迭代器都表示对可迭代对象的一次性有序遍历。不同迭代器的实例相互之间没有联系，只会独立地遍历可迭代对象：

let arr = ['foo', 'bar'];
let iter1 = arr[Symbol.iterator]();
let iter2 = arr[Symbol.iterator]();

console.log(iter1.next()); // { value: 'foo', done: false }
console.log(iter2.next()); // { value: 'foo', done: false }
console.log(iter2.next()); // { value: 'bar', done: false }
console.log(iter1.next()); // { value: 'bar', done: false }

如果可迭代对象在迭代期间被修改了，那么迭代器也会相应变化：

let arr = ['foo', 'baz'];
let iter = arr[Symbol.iterator]();

console.log(iter.next()); // { value: 'foo', done: false }

// 在数组中间插入值
arr.splice(1, 0, 'bar');
console.log(iter.next()); // { value: 'bar', done: false }
console.log(iter.next()); // { value: 'baz', done: false }
console.log(iter.next()); // { value: undefined, done: true }

迭代器维护着一个指向可迭代对象的引用，因此迭代器会阻止垃圾回收程序回收可迭代对象。

5. 自定义迭代器

任何实现 Iterator 接口的对象都可以作为迭代器使用，下面这个例子实现了 Iterator 接口，但每个实例只能被迭代一次：

class Counter {
    // Counter 的实例应该迭代 limit 次
    constructor(limit) {
        this.count = 1;
        this.limit = limit;
    }
    next() {
        if (this.count <= this.limit) {
            return { done: false, value: this.count++ };
        } else {
            return { done: true, value: undefined };
        }
    }
    [Symbol.iterator]() {
        return this;
    }
}
let counter = new Counter(3);
for (let i of counter) {
    console.log(i);
}
// 1
// 2
// 3

for (let i of counter) {
    console.log(i);
}
// 没有进行迭代

为了让一个可迭代对象能够创建多个迭代器，把计数变量放到闭包里，然后通过闭包返回迭代器：

class Counter {
    constructor(limit) {
        this.limit = limit;
    }
    [Symbol.iterator]() {
        let count = 1,
            limit = this.limit;
        return {
            next() {
                if (count <= limit) {
                    return { done: false, value: count++ };
                } else {
                    return { done: true, value: undefined };
                }
            },
        };
    }
}
let counter = new Counter(3);
for (let i of counter) {
    console.log(i);
}
// 1
// 2
// 3
for (let i of counter) {
    console.log(i);
}
// 1
// 2
// 3

Symbol.iterator属性引用的工厂函数会返回相同的迭代器：

let arr = ['foo', 'bar', 'baz'];

let iter1 = arr[Symbol.iterator]();
let iter2 = iter1[Symbol.iterator]();

console.log(iter1 === iter2); // true

6. 提前终止迭代器

可选的return()方法用于指定在迭代器提前关闭执行的逻辑。关闭迭代器，可能的情况有：

• for-of循环通过break、continue、return或throw提前退出
• 解构操作并未消费所有值

class Counter {
    constructor(limit) {
        this.limit = limit;
    }
    [Symbol.iterator]() {
        let count = 1,
            limit = this.limit;
        return {
            next() {
                if (count <= limit) {
                    return { done: false, value: count++ };
                } else {
                    return { done: true };
                }
            },
            return() {
                console.log('Exiting early');
                return { done: true };
            },
        };
    }
}

let counter1 = new Counter(5);
for (let i of counter1) {
    if (i > 2) {
        break; // 通过break提前退出
    }
    console.log(i);
}
// 1
// 2
// Exiting early

let counter2 = new Counter(5);
try {
    for (let i of counter2) {
        if (i > 2) {
            throw 'err'; // 通过throw提前退出
        }
        console.log(i);
    }
} catch (e) {}
// 1
// 2
// Exiting early

let counter3 = new Counter(5);
let [a, b] = counter3; // 解构操作并未消费所有值
// Exiting early

数组的迭代器不能关闭，还可以从上次离开的地方继续迭代：

let a = [1, 2, 3, 4, 5];

let iter = a[Symbol.iterator]();
for (let i of iter) {
    console.log(i);
    if (i > 2) {
        break;
    }
}
// 1
// 2
// 3
for (let i of iter) {
    console.log(i);
}
// 4
// 5

给一个不可关闭的迭代器增加return()方法并不能让它变成可关闭的。这是调用return()不会强制迭代器进入关闭状态，但return()方法还是会被调用：

let a = [1, 2, 3, 4, 5];

let iter = a[Symbol.iterator]();
iter.return = function () {
    console.log('Exiting early');
    return { done: true };
};
for (let i of iter) {
    console.log(i);
    if (i > 2) {
        break;
    }
}
// 1
// 2
// 3
// Exiting early
for (let i of iter) {
    console.log(i);
}
// 继续迭代，没有关闭
// 4
// 5

---

本文参考：

《JavaScript高级程序设计（第4版）》