JavaScript迭代器模式_javascript遍历方法-js教程-PHP中文网

JavaScript迭代器模式_javascript遍历方法

betcha

发布： 2025-12-01 19:51:16

原创

672人浏览过

迭代器模式通过实现next()方法返回value和done属性，用于顺序访问集合元素。ES6引入Iterator接口，使数组、字符串等内置类型支持for...of循环和扩展运算符。Symbol.iterator方法让对象可迭代，自定义对象可通过添加该方法实现遍历。生成器函数function*简化迭代器创建，支持惰性求值与无限序列。常见遍历方式中，for...of基于迭代器协议，适合处理可迭代对象；while配合next()灵活但代码较长；forEach、map等适用于特定数据转换场景。掌握迭代器有助于理解JS遍历机制并编写通用逻辑。

javascript迭代器模式_javascript遍历方法

JavaScript 中的迭代器模式是一种设计模式，用于顺序访问集合中的元素，而无需暴露其底层结构。这种模式在处理数组、类数组对象以及自定义数据结构时非常有用。ES6 引入了原生的 Iterator 接口，让很多内置类型默认可被遍历，并支持 for...of 循环和扩展运算符。

什么是迭代器（Iterator）？

一个迭代器是一个对象，它定义了一个序列，并可能返回一系列值的终止状态。迭代器必须实现 next() 方法，该方法返回一个包含两个属性的对象：

value：当前步骤的值
done：布尔值，表示遍历是否完成

当 done 为 true 时，表示迭代结束，此时 value 可选。

示例：手动创建一个简单的迭代器

立即学习“Java免费学习笔记（深入）”；

function createArrayIterator(arr) {
  let index = 0;
  return {
    next: function() {
      return index < arr.length ?
        { value: arr[index++], done: false } :
        { done: true };
    }
  };
}
<p>const iter = createArrayIterator([1, 2, 3]);
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { done: true }

登录后复制

可迭代协议与 Symbol.iterator

为了让一个对象可被 for...of 遍历，它必须是“可迭代的”，即实现了 Symbol.iterator 方法。这个方法返回一个迭代器对象。

常见的可迭代对象包括：Array、String、Map、Set、arguments、NodeList 等。

示例：使用 Symbol.iterator 获取数组的迭代器

TextCortex

AI写作能手，在几秒钟内创建内容。

查看详情

const arr = [10, 20];
const iterator = arr[Symbol.iterator]();
<p>console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }
console.log(iterator.next()); // { done: true }

登录后复制

你可以为自定义对象添加 Symbol.iterator 来使其可迭代。

const myCollection = {
  items: ['a', 'b', 'c'],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        return index < this.items.length ?
          { value: this.items[index++], done: false } :
          { done: true };
      }
    };
  }
};
<p>for (const item of myCollection) {
console.log(item); // 输出 a, b, c
}

登录后复制

JavaScript 常见的遍历方法对比

不同的遍历方式适用于不同场景。以下是常见方法及其特点：

for 循环：传统方式，控制力强，适合数组索引操作
for...in：遍历对象的可枚举属性（包括继承），不推荐用于数组
for...of：基于迭代器协议，遍历可迭代对象的值，最适用于数组和类数组
forEach()：数组方法，执行回调函数，不能中断（break/return 无效）
map/filter/reduce：函数式方法，返回新数组或结果，适合数据转换
while + next()：直接使用迭代器控制流程，灵活但代码较长

示例：for...of 遍历字符串和 Set

for (const char of "hi") {
  console.log(char); // h, i
}
<p>for (const num of new Set([1, 2, 2])) {
console.log(num); // 1, 2
}

登录后复制

生成器函数：更优雅的迭代器实现

生成器函数（function*）是创建迭代器的简便方式。它会自动返回一个符合迭代器协议的对象。

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
<p>const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.next()); // { value: 2, done: false }

登录后复制

结合生成器可以轻松实现惰性求值、无限序列等高级功能。

function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}
<p>const ids = idGenerator();
console.log(ids.next().value); // 1
console.log(ids.next().value); // 2

登录后复制

基本上就这些。掌握迭代器模式有助于理解现代 JavaScript 的遍历机制，也能写出更通用、可复用的数据处理逻辑。不复杂但容易忽略。

以上就是JavaScript迭代器模式_javascript遍历方法的详细内容，更多请关注php中文网其它相关文章！