javascript中的循环有哪些_如何避免常见错误【教程】

酷晨姑娘_9105

酷晨姑娘_9105

2026-01-20

593人浏览

原创

应优先用for循环而非forEach(),因for支持break/continue、反向遍历、类数组操作且能提前终止;forEach()无法中断遍历、不支持类数组、return仅退出当前回调。

javascript中的循环有哪些_如何避免常见错误【教程】

JavaScript 中没有“必须用哪种循环”的硬性规定,关键看你要遍历什么、是否需要中途退出、是否要处理异步逻辑。常见的 for、while、for...of、for...in、forEach() 各有明确边界,混用或误用会直接导致 bug 或性能问题。

什么时候该用 for 循环而不是 forEach()

forEach() 看起来简洁,但它不能 break 或 continue,也不能用 return 中断整个遍历;而原生 for 循环完全可控。如果你需要在满足某个条件时立刻跳出(比如查找第一个匹配项),for 是唯一可靠选择。

  • 查找数组中第一个大于 10 的数:用 for 可以 break,用 forEach() 只能靠抛错或额外标记位,不直观也不高效
  • forEach() 的回调函数中 return 只是退出当前回调,不影响后续迭代
  • for 支持反向遍历(i--),forEach() 固定从头到尾
  • 对类数组对象(如 arguments、NodeList)操作时,forEach() 可能不支持,而 for 总是可用
const arr = [2, 5, 12, 8];
let found = null;
for (let i = 0; i  10) {
    found = arr[i];
    break; // ✅ 有效终止
  }
}

for...in 和 for...of 别搞混:一个遍历键,一个遍历值

for...in 遍历的是对象的**可枚举属性名(字符串)**,包括原型链上的;for...of 遍历的是**可迭代对象的实际值**(如数组元素、Set 成员、字符串字符),它依赖 [Symbol.iterator]。拿数组举例:for...in 给你的是索引("0", "1"),for...of 给你的是元素(10, 20)。

JavaScript 开发专家
JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载
  • 永远不要用 for...in 遍历数组——它不保证顺序,还会遍历手动添加的非数字属性
  • for...in 对空数组也会执行(如果原型上有可枚举属性);for...of 不会
  • 普通对象默认不可迭代,for...of 直接报错 TypeError: obj is not iterable;此时应改用 Object.keys() + for...of 或 for...in
const arr = [10, 20];
arr.custom = 'hello';

for (const key in arr) {
  console.log(key); // "0", "1", "custom" —— ❌ 不是纯数组遍历
}

for (const value of arr) {
  console.log(value); // 10, 20 —— ✅ 纯元素值
}

异步循环里用 var 声明 i 会导致所有回调共享同一个 i

这是闭包和变量提升的经典坑。用 var 声明的循环变量是函数作用域,在异步回调中访问时,i 已经变成终值(比如 arr.length)。解决方法只有两个:用 let(块级作用域),或用立即执行函数包裹 var i。

  • let 是最直接的解法,每次迭代都绑定独立的 i
  • 用 forEach() 也天然规避此问题,因为它的参数是函数参数,不是变量提升目标
  • for...of 同样安全,因为它的遍历变量也是块级绑定
  • 千万别在 setTimeout 或 fetch().then() 里直接引用 var i
const arr = ['a', 'b', 'c'];
for (var i = 0; i  console.log(i), 100); // 输出 3, 3, 3 —— ❌
}

for (let i = 0; i  console.log(i), 100); // 输出 0, 1, 2 —— ✅
}

真正难的不是记住语法,而是判断「这个数据结构是否可迭代」「这次遍历要不要提前退出」「回调里访问的变量生命周期是否匹配」。这些判断一旦出错,bug 往往延迟暴露,调试成本远高于写的时候多想两秒。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
while的用法
while的用法

while的用法是“while 条件: 代码块”,条件是一个表达式,当条件为真时,执行代码块,然后再次判断条件是否为真,如果为真则继续执行代码块,直到条件为假为止。本专题为大家提供while相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.25

354

5

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

2025.12.04

838

13

java中break的作用
java中break的作用

本专题整合了java中break的用法教程,阅读专题下面的文章了解更多详细内容。

2025.10.15

3340

7

java break和continue
java break和continue

本专题整合了java break和continue的区别相关内容,阅读专题下面的文章了解更多详细内容。

2025.10.24

867

6

java break和continue
java break和continue

本专题整合了java break和continue的区别相关内容,阅读专题下面的文章了解更多详细内容。

2025.10.24

867

6

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1938

5

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

3204

5

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

2023.10.24

6404

49

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

2023.11.24

6589

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习