当前位置:首页 > JavaScript

js实现循环

2026-04-06 17:24:36JavaScript

循环方法一:for循环

for循环是最常见的循环结构,适用于已知循环次数的情况。

for (let i = 0; i < 5; i++) {
    console.log(i); // 输出0到4
}
  • 初始化let i = 0 定义循环变量。
  • 条件i < 5 控制循环继续的条件。
  • 更新i++ 每次循环后执行的表达式。

循环方法二:while循环

while循环在条件为真时重复执行代码块,适合不确定循环次数的情况。

let i = 0;
while (i < 5) {
    console.log(i); // 输出0到4
    i++;
}
  • 条件检查:每次循环前检查 i < 5
  • 手动更新:需在循环体内更新变量(如 i++)。

循环方法三:do...while循环

do...while循环至少执行一次,之后检查条件决定是否继续。

let i = 0;
do {
    console.log(i); // 输出0到4
    i++;
} while (i < 5);
  • 先执行后判断:即使条件初始为 false,也会执行一次。

循环方法四:for...of循环

用于遍历可迭代对象(如数组、字符串),直接获取元素值。

const arr = [1, 2, 3];
for (const item of arr) {
    console.log(item); // 输出1, 2, 3
}
  • 简洁性:无需索引,直接访问元素。
  • 支持迭代对象:如数组、Map、Set等。

循环方法五:for...in循环

遍历对象的可枚举属性(键名),通常用于对象而非数组。

js实现循环

const obj = { a: 1, b: 2 };
for (const key in obj) {
    console.log(key, obj[key]); // 输出"a 1", "b 2"
}
  • 遍历对象属性:获取键名而非值。
  • 注意原型链:可能遍历到继承的属性,需用 hasOwnProperty 过滤。

循环控制语句

  • break:立即终止循环。
  • continue:跳过当前迭代,进入下一次循环。
for (let i = 0; i < 5; i++) {
    if (i === 2) continue; // 跳过i=2
    if (i === 4) break;    // 终止循环
    console.log(i); // 输出0, 1, 3
}

标签: js
分享给朋友:

相关文章

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…

js实现目录

js实现目录

实现目录的基本思路 在JavaScript中实现目录功能通常涉及以下几个核心步骤:解析文档中的标题元素(如h1-h6),动态生成目录结构,并添加交互逻辑(如点击跳转)。以下是具体实现方法: 解析标题…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…