JS 数组的 forEach() 和 map() 方法

这两个家伙在现代前端开发中必备，尤其在 React 框架里，灵活的使用这几个方法来达成和 Vue 指令相同的效果。

[!note] 现代前端数组方法的共性
基于 不可变性（Immutability）原则，这两个方法都不会对原数组产生任何修改（除非有意为之）

使用 forEach() 遍历数组，并产生副作用

语法：

array.forEach(callback(currentValue, index, array))

简单示例：

const fruits = ['apple', 'banana', 'cherry'];

const result = fruits.forEach((fruit, index) => {
  console.log(`第 ${index + 1} 个水果是: ${fruit}`);
});

// 输出:
// "第 1 个水果是: apple"
// "第 2 个水果是: banana"
// "第 3 个水果是: cherry"

console.log(result); // undefined  <-- 记住，返回值是 undefined!

forEach() 的关键就是其中的那个回调函数。

回调函数的第一个参数是每次取出的元素的值，我认为理解为 item 更好一点。

第二个参数是当前元素的索引。

• callback: 这是你提供的函数，数组中的每个元素都会调用它一次。我们称之为回调函数。

• currentValue: 回调函数执行时，当前正在处理的数组元素。

• index (可选): 当前元素的索引。

• array (可选):调用 forEach 的数组本身。不过使用这个参数来修改原数组是不被推荐的，这破坏了 不可变性（Immutability） 原则。

关键特性

没有返回值，而是产生“副作用”

forEach 的返回值永远是 undefined。这一点至关重要！

它被设计出来的目的就不是为了产生一个新的数组或值，而是为了在每次遍历元素的时候，利用这个元素做点什么，这就是副作用。所谓副作用，就是指函数执行过程中，对外部世界产生了影响。

无法提前跳出循环，return 的作用

• 你不能在 forEach 的回调函数中使用 break 或 continue。如果你需要提前终止循环，传统的 for 循环或者 for…of 循环是更好的选择。

不过值得一提的是，在 forEach 中的 return 语句却出乎意料的有一个作用。

• 对于 forEach 函数本身，return 语句是无意义的，因为 forEach 不应该返回什么东西。
• 但是对于 forEach 的回调函数，return 被执行时，它会立即跳出这个回调函数，而进入下一个元素的遍历。这会产生一个非常有用的效果，它类似于传统 for 循环中的 continue 语句。

使用 map() 遍历数组，并得到处理后的新数组

map() 方法 创建一个新数组，这个新数组由原数组中的每个元素 调用一次提供的回调函数后的返回值组成。所以新数组的长度和原数组也完全相同。

用法：

const newArray = array.map(callback(currentValue, index, array))

参数和 forEach 完全一样。

关键特性

返回新数组

与 forEach 不同，map 函数有一个关键的返回值，也就是不修改原数组的情况下，处理过后的新数组

必须 return

map 的回调函数必须有一个 return 语句（或者在箭头函数中隐式返回）。这个返回值就是新数组中对应位置的元素。如果你不 return（或者 return undefined），新数组里对应位置就是 undefined。

底层原理与不可变性

map 是函数式编程中 纯函数（Pure Function） 和 不可变性（Immutability） 思想的绝佳体现。

• 纯函数：对于相同的输入，永远产生相同的输出，并且没有任何可观察的副作用。map 的回调函数通常被设计为纯函数。

• 不可变性：不直接修改原始数据，而是返回一份新的、经过修改的数据副本。map 创造了一个全新的数组，而原始数组安然无恙。这让我们的数据流变得清晰可预测，极大地降低了调试难度，是 React、Redux 等状态管理库的核心原则。

实例

在这个 React 的例子中，我们使用 map 遍历原来的对象数组，并将处理后得到的新数组渲染到页面上。

// 假设这是在一个 React 组件的 render 方法中
const products = [
  { id: 'p1', name: '笔记本电脑' },
  { id: 'p2', name: '机械键盘' },
];

// 我们把一个产品对象数组，映射成了一个 JSX 元素数组
const productListItems = products.map(product => (
  <li key={product.id}>
    {product.name}
  </li>
));

// 然后在 JSX 中使用
return (
  <ul>
    {productListItems}
  </ul>
);