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