JavaScript迭代器与遍历方法详解

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《JavaScript迭代器与遍历方法解析》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

迭代器是JavaScript中通过next()方法访问集合元素的设计模式，返回包含value和done的对象；for循环适用于索引操作，for...of遍历可迭代对象的值，forEach执行回调但不可中断，map生成新数组，for...in用于对象属性遍历，Object.keys结合forEach可枚举自身属性；实现Symbol.iterator可使对象可迭代，内置可迭代类型包括Array、String、Map、Set等，支持for...of和扩展运算符。

JavaScript 中的迭代器和遍历方法是处理数据集合的核心机制。理解它们能帮助你更高效地操作数组、对象和其他可迭代结构。

什么是迭代器（Iterator）

迭代器是一种设计模式，允许你访问集合中的元素而无需暴露其底层结构。在 JavaScript 中，一个迭代器是一个对象，它实现了 next() 方法，返回包含 value 和 done 两个属性的对象。

当 done 为 true 时，表示遍历结束；否则继续通过 value 获取当前值。

你可以手动创建一个迭代器：

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
<p>iterator.next(); // { value: 1, done: false }
iterator.next(); // { value: 2, done: false }
iterator.next(); // { value: 3, done: false }
iterator.next(); // { value: undefined, done: true }
</p>

常见的遍历方法

JavaScript 提供了多种方式来遍历数组或类数组结构，每种方法适用不同场景。

1. for 循环 — 最基础的方式，适合需要索引的操作。

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

2. for...of 循环 — 遍历可迭代对象（如数组、字符串、Map、Set），直接获取值。

for (const item of arr) {
  console.log(item);
}

3. forEach() — 数组方法，执行回调函数对每个元素进行操作，不能中断（return 不会跳出循环）。

arr.forEach(item => {
  console.log(item);
});

4. map() — 创建一个新数组，结果是原数组每个元素调用函数后的返回值。

const doubled = arr.map(x => x * 2);

5. for...in — 主要用于遍历对象的可枚举属性，不推荐用于数组（因为可能遍历到意外的属性）。

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]);
}

6. Object.keys() + forEach — 遍历对象的所有自身可枚举属性键。

Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

可迭代协议与自定义对象遍历

任何对象只要实现 [Symbol.iterator] 方法，就可以被 for...of 或扩展运算符使用。

例如，让一个普通对象支持遍历：

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

哪些类型默认可迭代？

以下内置类型实现了可迭代协议：

• Array
• String
• Map
• Set
• arguments 对象
• NodeList 等 DOM 集合（部分环境）

这意味着它们都能用 for...of、... 扩展、Array.from() 等方式处理。

基本上就这些。掌握迭代器原理和各种遍历方法的区别，能让你写出更清晰、高效的代码。

文中关于迭代器的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript迭代器与遍历方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。