你有没有过这样的经历？整理书架时，想给每一本书贴上标签；或者点奶茶时，想给每个朋友备注不同的口味。这种「逐个处理一组东西」的需求，在编程里特别常见——尤其是当你要处理一个装满数据的数组时。
今天咱们就聊聊JavaScript里专门干这个事的工具：.forEach()。它就像一个勤劳的小助手，能帮你把数组里的每个元素都「摸一遍」，按你的要求处理。
一、先想个场景：数苹果
假设你有一个装苹果的竹筐（数组），里面装了3个苹果，分别是「红苹果」「青苹果」「黄苹果」。现在你想给每个苹果贴上标签，写上它的位置（第1个、第2个、第3个）。
如果不用工具，你可能得自己动手一个个数：
第1个苹果→贴标签1；
第2个苹果→贴标签2；
第3个苹果→贴标签3……
在代码里，这种「逐个处理数组元素」的操作叫「遍历」。而.forEach()就是JavaScript专门用来遍历数组的「工具人」。
二、.forEach()的「说明书」：怎么用？
.forEach()是数组的一个「方法」（可以理解为数组自带的工具函数）。它的用法很简单，语法大概是这样的：
数组名.forEach(处理每个元素的函数);
别被「函数」这个词吓到——这里的「处理每个元素的函数」，其实就是你告诉.forEach()：「你每拿到一个数组元素，就按我这个方法处理」。
举个具体的例子：
假设我们有一个数组fruits = ['红苹果', '青苹果', '黄苹果']，想给每个苹果贴标签（输出「第1个苹果：红苹果」）。
用.forEach()的话，代码可以这样写：
const fruits = ['红苹果', '青苹果', '黄苹果'];
// 调用forEach，传入一个处理函数
fruits.forEach(function(当前苹果, 索引位置) {
console.log(`第${索引位置 + 1}个苹果：${当前苹果}`);
});
运行这段代码，控制台会输出：第1个苹果：红苹果第2个苹果：青苹果第3个苹果：黄苹果
是不是很神奇？那这里的当前苹果和索引位置是什么？咱们拆开说。
三、.forEach()的「小助手参数」：它能拿到什么信息？
刚才的例子里，forEach后面跟了一个函数，这个函数可以接收最多3个「参数」（输入值），它们分别是：
- 当前元素（必选）：当前正在处理的数组元素。比如第一次循环是「红苹果」，第二次是「青苹果」。
- 索引值（可选）：当前元素在数组中的位置（从0开始数）。比如第一个元素索引是0，第二个是1。
- 原数组（可选）：调用
.forEach()的那个数组本身（也就是fruits）。这个参数用得少，但知道有它总是好的。
我们可以修改上面的例子，把三个参数都打印出来看看：
fruits.forEach(function(元素, 索引, 原数组) {
console.log(`元素：${元素}，索引：${索引}，原数组：${原数组}`);
});
输出结果会是：元素：红苹果，索引：0，原数组：红苹果,青苹果,黄苹果元素：青苹果，索引：1，原数组：红苹果,青苹果,黄苹果元素：黄苹果，索引：2，原数组：红苹果,青苹果,黄苹果
看，.forEach()不仅给了当前元素，还贴心地附上了它的「位置编号」和「整个筐」的信息。
四、为什么用.forEach()而不是for循环？
你可能会想：「我用for循环也能遍历数组啊，为什么非要用.forEach()？」
比如用for循环实现同样的效果：
const fruits = ['红苹果', '青苹果', '黄苹果'];
for (let i = 0; i < fruits.length; i++) {
console.log(`第${i + 1}个苹果：${fruits[i]}`);
}
这两种方法都能实现需求，但.forEach()有两个明显的「懒人友好」优点：
- 不用自己管索引：用
for循环时，你得手动定义索引变量i，还要记得i++（不然会无限循环）。而.forEach()自动帮你处理了索引，代码更简洁。 - 代码更「声明式」：
for循环像在说「怎么做」（先做什么，再做什么）；而.forEach()更像在说「做什么」（我要遍历数组，每个元素按这个方式处理）。后者读起来更接近自然语言，更容易理解。
当然，.forEach()也有局限——比如遍历过程中不能中途「喊停」（用break）。如果需要中途停止遍历（比如找到目标元素后就退出），还是得用for循环。但大部分时候，.forEach()足够用了。
五、新手常见误区：别试图修改原数组！
新手用.forEach()时，常犯一个错误：想在遍历过程中直接修改原数组，结果发现没效果。比如：
const numbers = [1, 2, 3];
numbers.forEach(function(数字) {
数字 = 数字 * 2; // 想把每个元素变成原来的2倍
});
console.log(numbers); // 输出[1, 2, 3]（没变化！）
为什么会这样？因为.forEach()里的数字参数，只是原数组元素的「拷贝」——你修改的是拷贝，不是原数组本身。
那怎么正确修改原数组？可以用「索引」参数，通过索引直接修改原数组的值：
const numbers = [1, 2, 3];
numbers.forEach(function(数字, 索引) {
numbers[索引] = 数字 * 2; // 通过索引修改原数组
});
console.log(numbers); // 输出[2, 4, 6]（成功！）
这样就对了——因为numbers[索引]指向的是原数组的位置，修改它才会真正改变原数组。
六、总结：.forEach()的「使用说明书」
现在你对.forEach()应该有基本概念了。最后总结几个关键点：
- 它是谁：数组的「遍历工具方法」，专门用来逐个处理数组元素。
- 怎么用：
数组名.forEach(处理函数)，处理函数可以接收当前元素、索引、原数组三个参数。 - 优点：代码简洁，不用手动管理索引，适合大多数「遍历处理」场景。
- 注意：无法中途停止遍历；直接修改「参数值」不会改变原数组，需通过索引修改。
下次你需要处理数组里的每个元素时，不妨试试.forEach()——它会像个靠谱的小助手一样，帮你把每个元素都照顾到～
如果觉得这篇文章有用，不妨打开浏览器控制台，自己敲几行代码试试！实践是最好的学习方式～
评论