讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript循环有哪些以及如何使用?_掌握javascript循环结构【教程】

夏浩酱_4187

夏浩酱_4187

发布时间:2026-01-22 14:06:09

|

962人浏览过

|

来源于php中文网

原创

JavaScript循环需据数据结构、索引需求、提前退出及异步上下文选择:for控制最细但易错边界;while/do...while需防卡顿;关键在判断中断、await、重复注册与遍历中修改集合等细节。

javascript循环有哪些以及如何使用?_掌握javascript循环结构【教程】

JavaScript 循环不是“选一个用就行”,而是得看数据结构、是否需要索引、是否要提前退出、是否在异步上下文中——选错循环类型,轻则逻辑出错,重则阻塞主线程或漏掉 Promise。

for 循环:控制最细,但容易写错边界

适用于已知迭代次数、需要精确控制初始化/条件/更新三部分的场景,比如遍历数组索引、实现算法逻辑(如冒泡排序)。

常见错误是 i 导致越界,或把 <code>i++ 写成 i+ 之类拼写错误;另外在闭包中直接用 i 会捕获最后值,需用 let 声明或立即执行函数包裹。

示例:

立即学习“Java免费学习笔记(深入)”;

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

注意:for 不适合遍历对象属性(无序且含原型链),也不适合遍历 Map 或 Set(虽可行但不语义化)。

for...of 循环:遍历可迭代对象的首选

用于遍历 Array、String、TypedArray、Map、Set、Generator 等实现了 [Symbol.iterator] 的对象。它拿的是值,不是索引。

不能直接拿到下标,如需索引得配合 entries();也不能遍历普通对象(会报 TypeError: obj is not iterable)。

示例:

立即学习“Java免费学习笔记(深入)”;

for (const item of arr) {
  console.log(item); // 直接是元素值
}

for (const [index, value] of arr.entries()) {
  console.log(index, value); // 需显式调用 entries()
}

for...in 循环:只该用来遍历对象键名,且必须加 hasOwnProperty 检查

for...in 遍历的是对象自身 + 原型链上所有**可枚举字符串键**,顺序不保证,对数组使用会把数字索引当字符串,还可能遍历到意外的原型方法(如 arr.toString)。

唯一合理使用场景是调试时快速查看对象自有属性,生产环境务必搭配 Object.prototype.hasOwnProperty.call(obj, key) 过滤。

示例:

立即学习“Java免费学习笔记(深入)”;

for (const key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    console.log(key, obj[key]);
  }
}

别用它遍历数组,也别用它处理 Map / Set ——它们没有可枚举属性。

while 和 do...while:适合条件驱动、非固定长度的循环

当迭代次数完全取决于运行时状态(比如等待某个 DOM 元素出现、读取流数据直到 null、实现状态机)时,while 比 for 更自然。

关键点:必须确保循环体内有能改变条件的语句,否则死循环;do...while 至少执行一次,适合“先操作再判断”的场景(如用户输入校验)。

示例:

立即学习“Java免费学习笔记(深入)”;

let el = document.getElementById('target');
while (!el) {
  await new Promise(r => setTimeout(r, 10));
  el = document.getElementById('target');
}

// do...while 示例:确保至少提示一次
let input;
do {
  input = prompt('请输入非空内容');
} while (!input || input.trim() === '');

注意:while 在处理大量同步计算时易导致页面卡顿,必要时应拆分任务或用 setTimeout / queueMicrotask 让出主线程。

真正难的不是记住语法,而是判断「这个循环会不会被中断?是否要 await?是否在事件回调里重复注册?是否修改了正在遍历的集合?」——这些细节比循环类型本身更容易引发 bug。

相关文章

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

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

下载

相关标签:

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

热门AI工具

更多
SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
while的用法
while的用法

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

354

2023.09.25

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2581

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

356

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

397

2026.01.06

C++ 数据结构与算法实现教程合集
C++ 数据结构与算法实现教程合集

以 C++ 为实现语言,系统讲解核心数据结构与算法,涵盖链表(单链表/双链表/环检测)、栈与队列(单调栈/优先队列)、二叉树(遍历/BST/AVL/红黑树)、哈希表(开地址法/链地址法)、图(邻接表/BFS/DFS/Dijkstra/拓扑排序)、常见排序算法(快排/归并/堆排/计数排序)的实现与复杂度分析,同时分享 LeetCode 刷题技巧、竞赛编程常用模板(二分/前缀和/滑动窗口/动态规划),帮助开发者夯实算法基础。

452

2026.05.09

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

4278

2023.08.10

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

4500

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

4063

2023.10.12

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn