掌控数据流：从零手写一个 JS 自定义迭代器

在处理海量数据列表时，直接加载所有元素往往会让浏览器卡成 PPT。这时候，按需取值的迭代器（Iterator）就成了救星。很多人只知道用内置的数组遍历，却鲜少深究其背后的协议机制。今天咱们就抛开现成的 API，聊聊如何亲手构造一个符合规范的迭代器，真正理解 JS 是如何一步步“啃”完数据的。

迭代器的核心其实非常简单，它本质上就是一个对象，但必须遵循特定的契约。这个对象的核心只有一个方法：next()。每次调用这个方法，它就返回一个包含两个属性的对象：value代表当前取到的值，而done是一个布尔值，标记是否已经取完了。这就好比你去自动贩卖机买东西，每按一次出货按钮（next），要么吐出一罐饮料（value），要么提示货仓已空（done）。

光有 next 还不够，要让 JavaScript 引擎知道这是个可迭代对象，还得给它加上 [Symbol.iterator] 属性。如果缺少这一步，哪怕你的 next 逻辑再完美，用 for...of 循环时也会报错。这里有个容易踩的坑：Symbol.iterator 本身也需要返回一个具备 next 方法的迭代器对象。通常我们会利用闭包来保存当前的计数状态，避免外部污染。

function createRange(start, end) {
  let current = start;

  const iterator = {
    next() {
      const isDone = current > end;
      return {
        value: isDone ? undefined : current++,
        done: isDone
      };
    },
    [Symbol.iterator]() {
      return this; 
    }
  };
  return iterator;
}

在这段代码里，return this 是关键。它保证了当我们调用 .next() 时，访问的是同一个实例上的 current 变量，而不是重新生成一个新的计数器。闭包在这里起到了守护作用，把 current 锁在了函数内部，外部只能通过 next 接口去触碰它。这样一来，外部的 for...of 才能像操作原生数组一样流畅地消费数据，而不必担心状态丢失。

这种手动实现的思路在实际业务中非常有用。比如处理分页接口，你可以把每一次网络请求封装进 next() 里，只有当用户下滑触发时才发起下一次请求，这就是典型的惰性加载；或者在树形结构遍历时，结合异步函数实现深度优先搜索的流式输出。比起一次性把几万个节点渲染到 DOM 上，分批次迭代能显著降低内存峰值，页面响应也会更跟手。

理解了底层协议，你会发现 ES6 引入的 Generator 函数其实就是语法的糖衣，本质还是基于这套 next() 协议。但当你需要精细控制上下文，或者在构建类库时，手动编写迭代器协议能让你跳出框架限制，设计出更符合特定场景的数据流管道。下次遇到性能瓶颈，不妨试着把大数组拆解成迭代器，看看效果会有多大提升。