Web前端开发:JavaScript遍历方法详解与对比

1. 传统 for 循环

javascript 复制代码
const arr = [10, 20, 30];
for (let i = 0; i < arr.length; i++) {
  console.log(`索引 ${i}: 值 ${arr[i]}`);
}
// 输出:
// 索引 0: 值 10
// 索引 1: 值 20
// 索引 2: 值 30
  • 特点:最基础的循环,可通过索引精准控制

  • 适用场景 :需要索引操作、复杂循环控制(如break/continue

  • 注意:冗长但灵活性最高

2. for...of 循环 (ES6)

javascript 复制代码
const fruits = ['🍎', '🍌', '🍊'];
for (const fruit of fruits) {
  if (fruit === '🍌') break; // 支持中断
  console.log(fruit);
}
// 输出: 🍎
  • 特点 :直接获取值(非索引),支持break/continue

  • 适用场景:数组、字符串、Map/Set等可迭代对象

  • 注意不能遍历普通对象(会报错)

3. for...in 循环

javascript 复制代码
const person = { name: 'Alice', age: 25 };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}
// 输出:
// name: Alice
// age: 25
  • 特点:遍历对象键名(包括原型链上的可枚举属性)

  • 适用场景遍历对象属性,数组可用但不推荐(会遍历非数字键)

  • 注意 :用hasOwnProperty过滤原型属性

4. forEach 方法

javascript 复制代码
[1, 2, 3].forEach((num, index) => {
  console.log(num * index); 
});
// 输出:0 (1*0), 2 (2*1), 6 (3*2)
  • 特点:数组专用,为每个元素执行回调

  • 适用场景:简单遍历数组,无需中断的场景

  • 注意无法用break中断 ,返回值始终为undefined

5. map 方法

javascript 复制代码
const nums = [1, 2, 3];
const squares = nums.map(num => num * num);
console.log(squares); // [1, 4, 9]
  • 特点:返回新数组(原数组不变),元素是一一映射的结果

  • 适用场景:数据转换(如 API 响应格式化)

  • 注意 :回调必须return,否则新数组元素为undefined

6. filter 方法

javascript 复制代码
const numbers = [10, 15, 20, 25];
const bigNumbers = numbers.filter(num => num > 15);
console.log(bigNumbers); // [20, 25]
  • 特点:返回通过测试的元素组成的新数组

  • 适用场景:数据筛选(如过滤无效值)

  • 注意:不会修改原数组

🔑 核心区别总结表

方法 主要用途 返回值 能否中断循环 适用数据类型
for 通用循环 数组、字符串
for...of 遍历可迭代对象的值 数组、字符串、Map/Set
for...in 遍历对象键名 对象
forEach 数组遍历 undefined 数组
map 数组元素转换 新数组 数组
filter 数组元素筛选 新数组 数组

💡 黄金实践建议

  1. 遍历数组

    • 需要索引 → forforEach

    • 只需值 → for...of

    • 需返回新数组 → map/filter

  2. 遍历对象只用 for...in (记得用obj.hasOwnProperty(key)过滤)

  3. 特殊需求

    • 需要中断循环 → for/for...of

    • 操作DOM集合 → 先用Array.from()转数组再用数组方法

⚠️ 避免用for...in遍历数组!它会遍历非数字键和原型链属性,导致意外行为。

相关推荐
曼巴UE54 小时前
UE5 C++ 第三方动态库的使用
开发语言·c++
PBitW4 小时前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
zcz16071278214 小时前
Web详解
前端
良木林4 小时前
JS函数进阶
开发语言·前端·javascript
HelloRevit5 小时前
让B站视频4倍速度播放
前端·javascript·音视频
SEO_juper6 小时前
E-E-A-T与现代SEO:赢得搜索引擎信任的完整策略
前端·搜索引擎·seo·数字营销·seo优化·谷歌seo
Python大数据分析@6 小时前
Python 语言有什么奇技淫巧吗?
开发语言·python·c#
Envyᥫᩣ6 小时前
C#中的设计模式:构建更加优雅的代码
开发语言·c#
一点一木6 小时前
2025 前端 3D 选型指南:Three.js、Babylon.js、WebGPU 深度对比
前端·javascript·3d
岭子笑笑6 小时前
vant 4 暗黑主题源码阅读
前端