如何用十分钟彻底理解JavaScript迭代器的概念？

本文共计1226个文字，预计阅读时间需要5分钟。

本章节为家长带来了JavaScript中关于迭代器的相关知识。下面我们一起来看看什么是迭代器，以及如何自定义迭代器，希望对家长有所帮助。

1. 什么是迭代器？迭代器是一种接口，它允许你遍历一个数据结构中的元素，而不必关心其内部实现细节。迭代器本身是一个对象，它提供了遍历集合元素的方法。

2. 迭代器如何工作？迭代器通常包含以下方法：- `next()`: 返回下一个元素及其状态。- `hasNext()`: 检查是否还有下一个元素。- `reset()`: 重置迭代器到初始状态。

3. 如何自定义迭代器？在JavaScript中，你可以通过实现一个具有`next()`方法的对象来创建自定义迭代器。以下是一个简单的例子：

javascriptfunction createCustomIterator(array) { let index=0; return { next() { if (index

const customIterator=createCustomIterator([1, 2, 3, 4, 5]);

在这个例子中，`createCustomIterator`函数接收一个数组，并返回一个自定义迭代器。每次调用`next()`方法时，它会返回当前元素及其索引，直到遍历完整个数组。

本篇文章给大家带来了JavaScript中关于迭代器的相关知识，下面我们就一起来看一下什么是迭代器又怎样自定义迭代器，希望对大家有帮助。

1. 什么是迭代器 ？

• 迭代器就是一种接口机制，为各种不同的数据结构提供统一访问的机制。(即为了让一些不支持遍历的数据结构可遍历)

最常见的就是Array迭代器，按顺序返回数组中的值。

let arr = [1,2,3,4,5];for (let val of arr) { console.log(val);}

---

2. 自定义迭代器

那么我们如何实现迭代器呢？

首先，它需要满足两点：

• 可迭代协议
• 迭代器协议

可迭代协议

可迭代协议允许 JavaScript 对象定义或定制它们的迭代行为

如何满足可迭代协议 ？

要成为可迭代对象， 一个对象必须实现 @@iterator 方法。
这意味着对象（或者它原型链上的某个对象）必须有一个键为@@iterator 的属性，可通过常量 Symbol.iterator 访问该属性

也就是说要想满足可迭代协议，那么你的对象需要有一个键名为Symbol.iterator的属性，使其成为可迭代对象。

迭代器协议

迭代器协议定义了产生一系列值（无论是有限个还是无限个）的标准方式。
当值为有限个时，所有的值都被迭代完毕后，则会返回一个默认返回值。

如何满足迭代器协议 ？

你的对象需要至少实现一个next()方法，这个方法返回一个迭代器对象IteratorResult。这个迭代器对象包含两个属性done和·value。

• done：
  如果迭代器可以产生序列中的下一个值，则为 false。
  如果迭代器已将序列迭代完毕，则为 true
• value
  迭代器返回的值。done 为 true 时可省略
  

那么我们接下来开始自定义一个迭代器

由前文所讲，要想自定义迭代器，需要符合以下两个条件：

• 成为可迭代对象，即有一个 Symbol.iterator 属性
  （即可迭代协议：Symbol.iterator）
• 该迭代器对象返回一个 next() 方法，这个 next() 方法返回一个包含value 和 done 属性的对象
  （即迭代器协议：return { next() { return { value, done } }）

let colors = { blue : "蓝色", green : "绿色", yellow : "黄色"}

colors 现在是一个不可迭代对象，我们想使用 for…of 对其进行遍历，那么就可以自定义迭代器。
接下来，开始实现：

colors[Symbol.iterator] = function() { let keys = Object.keys(colors); // 如果用 let keys = Reflect.ownKeys(colors)，keys 就会包括一些不可枚举的属性 // 那么后面的 len 要减一，减去Symbol.iterator这个属性 // 根据实际情况选择使用 let len = keys.length; let index = 0; return { next : function() { if (index < len) { return { value : colors[keys[index++]], done : false } } return { done : true } } }}

让我们对其验证一下：

for (let val of colors) { console.log(val);}