Map 与 forEach：JavaScript 开发人员理解其核心区别

想象一下：你是一名 Web 开发人员，负责将用户数据列表转换为美观的仪表板。你知道 JavaScript 有迭代数组的工具，但有两种方法脱颖而出：`map()` 和 `forEach()`。你应该使用哪一个？它们可以互换吗？让我们以故事的方式解开这个谜团。

两种方法的故事

从前，在 JavaScript 的世界里，有两个兄弟被创造出来，分别是 `map()` 和 `forEach()`。它们都肩负着一个共同的使命：遍历数组。尽管它们有相似之处，但它们的个性和用途却大不相同。为了了解它们的怪癖，让我们详细了解一下它们。

认识 forEach()：任务完成者

`forEach()` 就像可靠的朋友，完成工作但不期望任何回报。当您调用 `forEach()` 时，它会遍历数组中的每个项目并执行您在其回调函数中定义的操作。

**这里有一个例子：**

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
  console.log(num * 2); // Outputs: 2, 4, 6, 8, 10
});

主要特征：

forEach() 未返回任何内容（未定义）。

它主要用于执行副作用，例如记录到控制台或修改外部变量。

输入 map()：Transformer

`map()` 是富有创意的兄弟，总是考虑转换并返回新内容。当您使用 `map()` 时，它不仅仅是迭代 - 它会根据回调函数中的转换逻辑生成一个新数组。

看一下这个例子：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Outputs: [2, 4, 6, 8, 10]

**主要特征：**

map() 总是返回一个与原始数组长度相同的新数组。

它非常适合数据转换，而无需改变原始数组。

简化差异

虽然这两种方法都是为迭代数组而设计的，但它们的目标却有很大不同：

forEach() 用于执行副作用，如记录或更新外部变量。它不返回任何内容。

map() 用于转换数据。它返回一个包含转换后值的新数组，而原始数组保持不变。

何时使用 forEach()

假设您正在构建一个待办事项应用。您想将每个任务记录到控制台以调试列表。这时，“forEach()” 就是您的首选。

const todos = ['Buy groceries', 'Clean the house', 'Write code'];
todos.forEach(task => console.log(task));

在这种情况下，您正在执行副作用（记录）而不需要转换的结果。

何时使用 map()

假设你正在从 API 中获取用户数据，后端返回一个用户对象数组。你需要创建一个用户名数组以供显示。这就是 `map()` 的用武之地：

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
const usernames = users.map(user => user.name);
console.log(usernames); // Outputs: ['Alice', 'Bob', 'Charlie']

现实世界的类比

可以将 `forEach()` 视为向社区中每个人分发传单的助手。他们专注于完成任务，无论结果如何。另一方面，`map()` 就像一位设计师，为每个人制作定制的传单，为每次互动返回精美制作的结果。

警告

虽然 `forEach()` 很简单，但过度使用会导致涉及转换时代码难以维护。同样，不建议滥用 `map()` 来执行副作用（如日志记录），因为它是用于转换的。

最后的想法

在 `map()` 和 `forEach()` 之间进行选择取决于您的意图。如果您专注于转换并需要一个新的数组，那么 `map()` 就是您的盟友。但如果您的目标是在不更改或创建数据的情况下执行操作，请坚持使用 `forEach()`。

通过了解每种方法的优势，您可以编写更简洁、更高效的代码 - 并成为更自信的 JavaScript 开发人员。那么，在下一个项目中，您将首先与哪个兄弟姐妹交朋友？

喜欢阅读吗？如果您觉得这篇文章很有见地或有帮助，请考虑给我买杯咖啡来支持我的工作。您的贡献有助于激发更多类似的内容。单击此处请我喝杯虚拟咖啡。干杯！

CLIS.CC