JavaScript Iterator.prototype.drop怎样跳过前 N 个元素

如果你拿到的是一个迭代器，而不是已经展开的数组，想跳过开头的几项再继续处理，可以使用 Iterator.prototype.drop()：

const source = [0, 1, 2, 3, 4, 5].values();
const rest = source.drop(3);

// drop(3) 跳过前三项，toArray() 再把剩余迭代器收集成数组。
console.log(rest.toArray()); // [3, 4, 5]

官方资料：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/drop

核心结论：drop(N) 返回一个新的迭代器 helper，它在第一次读取时跳过源迭代器的前 N 个元素，然后逐个交付剩余元素。它不修改数组，也不会在调用 drop() 的瞬间把整个数据源展开。

它解决的是“从第 N 项之后继续读”

数组里通常会写 array.slice(N)，但迭代器可能来自生成器、文件流适配器或一个还没有结束的序列。这类数据源不适合先全部转成数组再切片。drop() 把“跳过开头若干项”表达成迭代器链的一环：

function* records() {
  // 生成器可以持续提供数据，不需要先建立完整数组。
  yield { id: 101, state: "draft" };
  yield { id: 102, state: "ready" };
  yield { id: 103, state: "ready" };
  yield { id: 104, state: "archived" };
}

const readyRecords = records()
  .drop(1)
  .filter(record => record.state === "ready");

// 只在这里消费链条，前一条记录被 drop 跳过。
console.log(readyRecords.toArray()); // [{ id: 103, state: "ready" }]

要注意，drop(1) 跳过的是源迭代器的第一项，不是过滤后的第一项。链式调用的顺序会改变语义：先 filter() 再 drop()，才是“跳过第一条满足条件的记录”。

为什么调用 drop 后还没有读取数据

drop() 是惰性的。调用它时只创建一个新的 helper，并保存对源迭代器的引用；真正调用返回值的 next() 时，helper 才会先向源迭代器请求 N 次，再把下一项交给调用方。

function* trace() {
  // 每次 yield 前打印一条消息，用来观察消费时机。
  console.log("读取 A");
  yield "A";
  console.log("读取 B");
  yield "B";
  console.log("读取 C");
  yield "C";
}

const afterTwo = trace().drop(2);
console.log("helper 已创建");

// 第一次 next 才会读取 A、B，然后返回 C。
console.log(afterTwo.next()); // { value: "C", done: false }
console.log(afterTwo.next()); // { value: undefined, done: true }

因此，drop() 不等于“复制一份新数组再删除前几项”。如果源迭代器会执行 I/O、推进游标或消耗网络数据，就要把它视为一次真实的读取操作。另一个常见误区是重复使用同一个迭代器：迭代器本身通常是有状态的，第一次链条消费后，后续再读不会回到开头。

limit 参数有哪些边界

limit 会先按数字处理，再转换为整数。正常业务代码应传入非负整数，但理解边界有助于解释“为什么没有输出”或“为什么直接抛错”。

function safeDrop(iterable, rawLimit) {
  // 明确把外部输入转换成有限的非负整数，避免 RangeError 或无限跳过。
  const limit = Number(rawLimit);
  if (!Number.isSafeInteger(limit) || limit 

如果有限迭代器的元素数量少于 limit，返回的 helper 会在首次 next() 时完成，不会补出 undefined 作为数据项。undefined 只会出现在迭代结果对象的 value 中，并且此时 done 为 true。

和 take、map 组合时先想清楚顺序

迭代器 helper 的优势在于可以把“跳过、截取、转换”连成一条惰性管道。对无限生成器来说，通常先 drop() 再 take()，让结果仍然有明确的结束点：

function* numbers() {
  // 这是一个无限序列，必须通过 take 限定最终消费量。
  let value = 0;
  while (true) {
    yield value;
    value += 1;
  }
}

const page = numbers()
  .drop(10)
  .take(3)
  .map(value => value * 10);

// 只消费 10、11、12，并转换成 100、110、120。
console.log(page.toArray()); // [100, 110, 120]

如果写成 numbers().take(3).drop(10)，helper 只会在一个长度为 3 的有限结果里尝试跳过 10 项，最终得到空迭代器。两种写法都合法，但代表不同的数据范围。

对分页场景还要区分“跳过数据”和“从内存数组切片”：drop() 不提供随机访问，也不会告诉你总数；如果接口需要总页数，仍然要由数据源或单独的计数查询提供。

旧运行时如何平稳降级

MDN 将 Iterator.prototype.drop() 标为 Baseline 2025，较旧浏览器或旧 JavaScript 运行时可能没有它。发布前可以做能力检测，而不是只检测全局的 Iterator：

function dropFirst(iterable, limit) {
  const iterator = iterable[Symbol.iterator]();

  // 新运行时走原生 helper；旧运行时保留一个惰性生成器降级路径。
  if (typeof iterator.drop === "function") {
    return iterator.drop(limit);
  }

  return (function* () {
    // 逐项消费要跳过的部分，不把整个 iterable 展开到数组。
    for (let index = 0; index 

降级代码需要和原生行为保持同一套输入约束。示例为了突出路径只处理非负整数；如果 limit 来自 URL 参数、表单或接口字段，应在进入原生路径和降级路径之前统一校验。

常见误区和排查顺序

1. 把它当成数组方法。 drop() 返回迭代器，不是数组；需要数组时最后再调用 toArray()。
2. 以为调用时就消费了数据。 把日志放在生成器的 yield 前，调用 drop() 后没有日志是正常的，首次 next() 才开始。
3. 忘记链条的顺序。 filter().drop(1) 与 drop(1).filter() 跳过的对象不同，应先写出“第 N 项”指的是哪一层数据。
4. 对无限源直接使用 Infinity。 这会让 helper 一直尝试跳过元素；无限源必须配合有限的 drop 和后续退出条件。
5. 只检测 Iterator 是否存在。 需要检测具体的 iterator.drop 方法，并为旧环境准备降级方案。

小结

Iterator.prototype.drop(N) 适合表达“从迭代器的第 N 项之后继续处理”。它保持惰性，不改写源数据；参数会经过数字和整数转换，负数或 NaN 会抛出 RangeError；当它和 take()、map()、filter() 组合时，调用顺序决定数据边界。面向旧运行时发布时，用具体方法检测加上生成器降级，比假定所有环境都已支持更稳妥。

相关问题

Iterator.prototype.drop 和 Array.prototype.slice 有什么区别？
前者返回惰性迭代器并逐步消费源，后者通常直接生成数组副本；数据量大或数据源可能无限时，前者更适合。

drop(0) 会复制一份迭代器吗？
它会返回一个 helper，但不会把源数据复制成数组；是否已经消费数据仍取决于后续是否调用 next()。

为什么 drop(10) 得到空结果？
可能是源迭代器本来就少于 10 项，也可能是你先调用了 take() 限制了可见项数；检查链式调用的顺序和迭代器是否已被消费。

Iterator.prototype.drop 能用于异步迭代器吗？
本文讨论的是同步 Iterator。异步迭代器需要等待异步 helper 或采用明确的异步降级实现，不能直接把同步 drop() 套到 AsyncIterator 上。

规范定义在哪里？
可以复制以下规范地址查看 Iterator.prototype.drop 的参数转换和惰性步骤：https://tc39.es/ecma262/multipage/control-abstraction-objects.html#sec-iterator.prototype.drop