JavaScript for 循环怎么用

在前端开发的日常工作中，我们经常需要重复做同一件事——比如把一串水果的名字一个个展示出来，或者给列表里的每个按钮都加上点击效果。这时候如果一次次写重复的代码，不仅麻烦，还容易出错，而JavaScript里的“for循环”就是帮我们解决这个问题的小工具。

什么是for循环？用逛水果店的例子秒懂

你可以把for循环想象成逛水果店时的“逐个清点”动作：从第一筐水果开始，每拿一个就数一次，直到把最后一筐的水果数完为止。对应到代码里，这个动作就分成了三个部分：

• 「起点」：告诉循环“从第1个开始”；
• 「条件」：告诉循环“要数到什么时候停止”；
• 「步长」：告诉循环“每次数几个”。

举个最常见的生活化例子：你要让电脑把1到5的数字一个个显示出来。不用写5次“显示1”“显示2”，用for循环就能搞定，就像你不用把“1、2、3、4、5”每个字都念5遍，只要说“从1数到5，每次数1个”就行。

基础用法：从1数到5的简单操作

先写一段代码帮你理解最基础的for循环，每行都对应刚才说的三个部分：

`javascript

// 循环变量i从0开始，只要i小于5就继续，每次循环后i加1

for (let i = 0; i < 5; i++) {

console.log("现在的数字是：" + (i + 1));

}

`

这里要注意一个小细节：代码里的i是循环用的“计数器”，从0开始是因为很多代码里习惯用0作为第一个位置的序号（就像你排队时如果从0开始编号，第5个人就是序号4），所以如果要显示1到5，就用i+1调整成我们熟悉的数字。运行这段代码后，电脑会乖乖输出5行文字，正好是1到5，完全不用重复写5次输出命令。

实用场景：遍历数组的常用操作

for循环最常用的地方，是处理像“水果清单”这样的数组——数组就是存一串数据的盒子，比如const fruits = ["苹果", "香蕉", "橙子"]。要把清单里的每个水果都打印出来，用for循环就能轻松搞定，不用一个个手动取：

`javascript

const fruits = ["苹果", "香蕉", "橙子"];

// 数组的length属性就是它的长度，这里是3，所以i小于3就循环

for (let i = 0; i < fruits.length; i++) {

console.log("今天的水果有：" + fruits[i]);

}

`

这段代码运行后，会依次输出“今天的水果有：苹果”“今天的水果有：香蕉”“今天的水果有：橙子”，完美对应了我们想逐个处理数组内容的需求。这里的fruits[i]就是取数组里第i个位置的元素，就像你从水果盒里按顺序拿第1个、第2个水果一样。

小技巧：避开常见的坑

刚学for循环的人很容易踩一个小坑：把循环条件写成i <= 5</code>而不是i <5</code>，这样循环会多跑一次，输出到6就停，就像你数数时数到5还没停，多数了一个6。另外，循环里的变量i如果不用let声明，容易和外面的变量冲突，就像你在水果店清点水果时，不小心把自己的鞋子编号当成水果编号，搞混了顺序，所以一定要记得用let。

掌握了这些基础用法，你就能用for循环解决大部分重复任务，不用再写重复代码啦。