update: 2022.02.06 关于 for…of 的问题，详见最后

迭代，iteration，意思是「重复」或者「再来」。在计算机领域，我们可以简单理解为按照顺序反复的执行某一段代码。

for 与 for-of

我们来看一个关于迭代最简单的例子：

  1. const arr = [1, 2, 3, 4];
  3. for(let i = 0; i < arr.length; i++) {
  4.   console.log(arr[i]);
  5. }

上面的代码就是一次通过 for 循环实现的迭代，最终遍历了一遍数组的并打印出数组中的值。

在这个例子中，我们之所以通过 for 循环遍历了一个数组，是因为我们知道了需要迭代的数据的数据结构是一个数组，并且我们可以轻松的知道迭代终止的条件，也可以手动的获取到数组的值。

for 循环的问题以及解决方案

接着我们分析一下，使用 for 循环进行迭代的缺点。

  1. 无法兼容兼容不同的数据结构

在上面的例子中，我们使用 for 循环对一个数组进行迭代，那如果此时将数组换成 Map，或者Set 之类的数据结构呢？我们就要重新编写一套迭代逻辑。

  1. 过于关注如何迭代的逻辑

使用 for 循环进行迭代，我们必须要关心起始/终止条件，而如果没有特殊的需求，大部分的迭代所做的事情是按照一定的顺序遍历一遍可迭代对象中的成员。

那么，为了解决上述问题，JavaScript 是否提供了某种方法，让我们有更加简单且高效的方式进行迭代呢？

有的， JavaScript 提供的 for...of 语句可以帮助我们解决上面使用 for 循环带来的问题。

  1. const arr = [1, 2, 3, 4];
  2. const map = new Map([
  3.   ["key1", 1],
  4.   ["key2", 2],
  5.   ["key3", 3],
  6. ]);
  8. for (item of arr) {
  9.     console.log(item);
  10. }
  12. // 结果如下
  13. // 1
  14. // 2
  15. // 3
  16. // 4
  18. for (item of map) {
  19.   console.log(item); 
  20. }
  22. // 结果如下
  23. // ['key1', 1]
  24. // ['key2', 2]
  25. // ['key3', 3]

通过 for...of 语句，我们不在需要关注如何迭代，也不需要为 Map 这样的非数组数据结构兼容。for...of 提供了一个通用的方法，来解决迭代的问题。

深入 for-of 与 iterable 接口

你可能会好奇，for...of 语句为什么可以进行上面的操作。难不成有黑魔法？

其实并不是，JavaScript 为一些内建的数据结构提供了一个名为 iterable 的接口，且接口实现了迭代协议。而 for...of 会自动调用该接口，并通过该接口实现迭代。

迭代协议后文会解释，目前不理解并不影响。

凡是可以使用 for...of 进行迭代的数据结构，一定包含 iterable 接口，并且实现了 iterable 接口。

那如何理解包含 iterable 接口，和实现了 iterable 接口呢？

  1. 包含 Iterable 接口

实际上，要进行迭代的“东西”，依然是一个对象。无论是 Array，还是一个 Map，本质上都是对象。而所谓包含 Iterable 接口，就是有一个对象，其本身或者原型链上有一个名为 Symbol.iterator 的属性。

  1. const arr = [1, 2];
  3. // 此时，没有实现 iterable 接口
  4. arr[Symbol.iterator] = null;
  1. 实现了 iterable 接口

所谓实现 iterable 接口，其实就是实现一个函数，该函数必须遵守某种规范（迭代协议规定的规范）。并且设置 Symbol.iterator 属性指向该函数。

  1. const arr = [1, 2];
  3. const iter = function(){
  4.     // 函数体内容符合迭代协议
  5. }
  7. // 让 arr[Symbol.iteror] 属性指向函数 iter
  8. arr[Symbol.iterator] = iter;

所以，Map，Array 等内建的数据结构之所以可以使用 for...of 是因为这些数据结构包含了 iterable 接口，并且 JavaScript 帮我们实现了 iterable 接口。

JavaScript 并没有为所有的数据结构提供迭代的接口。下面是部分实现了该接口的数据结构

  1. Array
  2. TypedArray
  3. String
  4. Map
  5. Set
  6. arguments 对象

验证内建数据结构的 iterable 接口

JavaScript 中有许多的内建数据结构实现了 iterable 接口，接下来让我们看一看，验证一下。

  1. const arr = [1, 2];
  2. const str = "123";
  3. const map = new Map([["key1", 1]]);
  5. console.log(arr[Symbol.iterator]);            // values() { [native code] }
  6. console.log(str[Symbol.iterator]);            // [Symbol.iterator]() { [native code] }
  7. console.log(map[Symbol.iterator]);            // entries() { [native code] }

我们可以看到，这些对象上面都有 Symbol.iterator 属性，并且属性值指向一个函数。

接下来我们验证一下 for...of 会自动调用 iterable 接口的说法。

  1. // 变量沿用上面的例子
  3. // for...of 自动调用了 iterable 接口
  4. for(item of arr) {
  5.   console.log(item);
  6. }
  7. // 1
  8. // 2
  10. // for...of 手动调用了 iterable 接口
  11. for(item of arr[Symbol.iterator]()) {
  12.   console.log(item);
  13. }
  14. // 1
  15. // 2

最后再来看一看如果我们不实现 iterable 接口时，使用 for...of 语句会发生什么

  1. const arr = [1, 2];
  3. arr[Symbol.iterator] = null;
  5. for(const item of arr) {
  6.   console.log(item);
  7. }
  9. // Uncaught TypeError: arr is not iterable

小结

  1. 为了解决使用 for 循环迭代的缺点，JavaScript 引入了 for...of 语句，该语句会自动调用 iterable 接口。
  2. 对象自身或者原型链上存在 Symbol.iterator 属性就算是有 iterable 接口。
  3. Symbol.iterator 属性所引用的值是一个函数，该函数需要符合迭代协议。

接下来，我们探究一下迭代协议，从根本上理解，JavaScript 是如何实现迭代的。

迭代协议

首先，你要理解「协议」这个词。协议是人们提前约定好的一种行为规范，通过遵守这个协议达到某一些目的。

比如说语言不通的人要如何进行交流呢？没错，我们可以提前约定人们使用中文进行交流。那么换成「计算机」一点的说法就是，我们制定了一个人类交流协议，并且通过使用中文交流来实现这个协议。如果人们想要相互交流，就必须要使用人类交流协议，不然双方无法理解对方的意思。

那么，换成迭代协议，简单理解就是，在 JavaScript 中，如果我们想要进行迭代操作，那么就必须要遵守迭代协议，不然 JavaScript 就无法理解我们的意思。

而我们上文提及的 iterable 接口就是严格遵守迭代协议的，或者说 iterable 接口实现了迭代协议。

迭代协议具体分为两个协议：可迭代协议和迭代器协议。

可迭代协议

可迭代协议规定了什么样的对象，可以进行迭代。

那么，可迭代协议具体是如何规定的呢？

  1. 若 JavaScript 对象可迭代，则称其为可迭代对象
  2. 可迭代对象（或原型链）上必须有一个属性 @@iterator ，且属性值为一个无参数的函数，其返回值为一个符合迭代器协议的对象。也就是定义了一个工厂函数。

可以使用 @@well-know symbol name 的方式去代表一个 well-know Symbol。这里是用 @@iterator 表示 Symbol.iterator

reference：https://262.ecma-international.org/6.0/#sec-well-known-symbols

我们用代码来模拟实现一下可迭代协议：

  1. // 一个对象，我们定义该对象
  2. const obj = {};
  4. const iteratorFunc = function(){
  5.   // 返回一个符合迭代器协议的对象 => 也就是迭代器对象
  6.     return iteratorObject;
  7. }
  9. obj[Symbol.iterator] = iteratorFunc;

我们在使用迭代的时候，并不需要显式的调用这个工厂函数来生成迭代器。以下的语言结构将会在后台调用可迭代对象的这个工厂函数，从而创建迭代器。

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

迭代器协议

迭代器协议规定了产生一系列值的标准方式。这一系列值可能是是无限的，也可能是有限的。若一系列值是有限的，则在迭代完毕之后返回一个默认值。

接下来，我们看一下迭代器协议的具体规定：

  1. 迭代器是一个对象
  2. 该对象必须实现一个 next() 方法，且约束如下
    1. 该方法，有一个参数，或者无参数
    2. 该方法，必须返回一个对象
    3. 返回的对象中，有如下属性
      1. done，一个布尔值，用以表示是否还需要迭代
      2. value，用于表示当前迭代到的值，当 done: true 时，可以省略

从上面我们知道，迭代器是一个对象。那么换句话说，一个遵守迭代器协议的对象被称为迭代器。

下面，我们用代码来实现一个简单的迭代器

  1. // 迭代器是一个对象
  2. const iteratorObject = {};
  4. // 实现 next() 方法
  5. iteratorObject.next = function() {
  7.   // 返回一个类型为 {done: boolean, value: any} 的对象
  8.   return { 
  9.     done: true, 
  10.     value: 'iteration done'
  11.   };
  12. }

迭代器运作原理

迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。迭代器对象中有一个 next() 方法，每一次调用 next() 方法都会返回一个结果对象，结果对象将会包含两个属性：done 和 value。done 是一个布尔值，表示是否还可以再次调用 next() 取得下一个值，value 包含着可迭代对象的值。

我们直接来看例子：

  1. const arr = [1, 2, 3];
  3. const iter = arr[Symbol.iterator]();
  5. console.log(iter.next());            // {value: 1, done: false}
  6. console.log(iter.next());          // {value: 2, done: false}
  7. console.log(iter.next());            // {value: 3, done: false}
  8. console.log(iter.next());            // {value: undefined, done: false}

其中有几个需要注意的点：

  1. 每一个迭代器都代表对可迭代对象的一次性有序遍历。不同的迭代器实例没有关联
  2. 迭代器并不与可迭代对象的某一个时刻的快照绑定
  3. 迭代器维护着一个指向可迭代对象的引用，因此迭代器会组织垃圾回收。

提前终止迭代器

for...of 语句和 for 语句类型，也可以使用 bread、continue、return 或者throw 提前退出。

我们可以在迭代器对象中实现一个 return() 方法，该方法会在迭代器提前关闭的时候执行。

  1. // 迭代器是一个对象
  2. const iteratorObject = {
  3.   next() {
  4.     // 返回一个类型为 {done: boolean, value: any} 的对象
  5.     return {
  6.       done: true,
  7.       value: "iteration done",
  8.     };
  9.   },
  10.   return() {
  11.     console.log("提前终止");
  12.     return {
  13.       done: true,
  14.     };
  15.   },
  16. };

试一试

手动实现一个 iterable 接口

我们已经知道了，所谓的 iterable 接口，就是迭代协议的实现。而迭代协议分为两个部分：可迭代协议，迭代器协议，因此我们先实现可迭代协议。

我们将手动实现一个 Array 的 iterable 接口，不同的数据类型 iterable 接口的实现是不一样的。

  1. 实现可迭代协议 ```javascript const arr = [1, 2, 3];

function iter() { // 返回一个符合迭代器协议的对象 return iteratorObj; }

// 一个名为 Symbol.iterator 的属性，并且指向一个无参数的函数，该函数返回一个符合迭代器协议的对象 arr[Symbol.iterator] = iter;

  2. 2. 实现迭代器协议
  3. ```javascript
  4. const arr = [1, 2, 3];
  6. function iter() {
  7.   // 做一个闭包，储存索引
  8.   let i = 0;
  9.   // this指向的是调用该函数的对象，此时调用该函数的对象就是 arr 这个数组
  10.   let arr = this;
  12.   // 返回一个符合迭代器协议的对象，该对象包含一个 next 函数;
  13.   return {
  14.     next: function () {
  15.       if (i >= arr.length) {
  16.         return { done: true };
  17.       }
  19.       console.log('自定义迭代');
  20.       return { done: false, value: arr[i++] };
  21.     },
  22.   };
  23. }
  25. // 一个名为 Symbol.iterator 的属性，并且指向一个无参数的函数，该函数返回一个符合迭代器协议的对象
  26. arr[Symbol.iterator] = iter;

下面我们用 for...of 语句验证一下

  1. for(const item of arr) {
  2.     console.log(item);
  3. }
  4. // 自定义迭代
  5. // 1
  6. // 自定义迭代
  7. // 2
  8. // 自定义迭代
  9. // 3

那现在我们就手动实现了一个 iterable 接口，而不是调用 JavaScript 实现的 iterable 接口。

模拟一个 for…of

通过迭代器对象的原理，我们可以知道，所谓迭代就是不停的调用迭代器对象中的 next() 方法，直到迭代器对象中 next方法生成的结果对象中 done 属性等于 false 的时候结束迭代。

  1. function forOf(obj, callback) {
  2.   let iterator = null;
  3.   let result = null;
  5.   if (typeof obj[Symbol.iterator] !== "function")
  6.     throw new TypeError(result + " is not iterable");
  7.   if (typeof cb !== "function") throw new TypeError("cb must be callable");
  9.   iterator = obj[Symbol.iterator]();
  11.   result = iterator.next();
  12.   while (!result.done) {
  13.     callback(obj);
  14.     result = iterator.next();
  15.   }
  16. }

update：

以下情况将无法在 for...of 中使用自己定义的迭代器

  1. Array.prototype.mineKeys = function () {
  2.   const len = this.length
  3.   let i = 0
  5.   return {
  6.     next() {
  7.       if(i >= len) {
  8.         return { done: true }
  9.       }
  10.       return { value: i++, done: false }
  11.     }
  12.   }
  13. }
  15. const keysArr = [1, 2, 3]
  17. // TypeError: keysArr.mineKeys is not a function or its return value is not iterable
  18. for (const key of keysArr.mineKeys()) {
  19.   console.log(key)
  20. }

甚至，我们在代码中使用 next 的预期都是正确是，但是放在 for...of 里面就是不对。

  1. Array.prototype.mineKeys = function () {
  2.   const len = this.length
  3.   let i = 0
  5.   return {
  6.     next() {
  7.       if(i >= len) {
  8.         return { done: true }
  9.       }
  10.       return { value: i++, done: false }
  11.     }
  12.   }
  13. }
  15. const keysArr = [1, 2, 3]
  16. const iter = keysArr.mineKeys()
  18. console.log(iter.next())
  19. console.log(iter.next())
  20. console.log(iter.next())

image.png
自定义的迭代器必须在 [Symbol.iterator] 中使用

  1. const arr = [1, 2, 3]
  3. arr[Symbol.iterator] = function() {
  4.   const len = this.length
  5.   let i = 0
  7.   return {
  8.     next() {
  9.       if(i >= len) {
  10.         return { done: true }
  11.       }
  12.       return { value: i++, done: false }
  13.     }
  14.   }
  15. }
  17. for (const key of arr) {
  18.   console.log(key)
  19. }

如果需要自定义 Array.prototype.keys 这种方法，可以使用生成器。

  1. Array.prototype.mineEntries = function * () {
  2.   const arr = this
  3.   for (let i = 0; i < arr.length; i++) {
  4.     yield [i, arr[i]]
  5.   }
  6. }
  8. const entriesArr = [1, 2, 3]
  10. for (const [key, value] of entriesArr.mineEntries()) {
  11.   console.log(key, value)
  12. }