性能比较：For 循环 vs. forEach vs. Map in JavaScript

JavaScript 提供了几种遍历数组的方式，每种方式都有其自身的语法、功能，以及最重要的性能特征。理解 for 循环、forEach 和 map 之间的区别对于编写高效和优化的 JavaScript 代码至关重要，尤其是在处理大型数据集或对性能要求苛刻的应用程序时。本文提供了一个全面的性能比较，探讨了每种方法的细微差别，并就何时使用哪种方法提供了指导。

简介：JavaScript 中的迭代

遍历数组是编程中的一项基本任务。 JavaScript 提供了多种实现此目的的方法，每种方法都针对特定目的而设计。我们将重点关注三种常见方法：

for 循环： 迭代的传统且可以说是最基本的方式。
forEach： 一种高阶函数，旨在遍历数组中的元素，并为每个元素执行提供的函数。
map： 另一种高阶函数，它通过对调用数组中的每个元素调用提供的函数来创建一个新数组。

选择正确的迭代方法可以显着影响代码的性能。让我们深入研究每种方法，并分析它们的性能特征。

`for` 循环：传统方法

for 循环是 JavaScript 和许多其他编程语言中最基本且被广泛理解的迭代结构。它提供对迭代过程的显式控制。

语法和用法

for 循环的语法很简单：


for (let i = 0; i < array.length; i++) {
  // 对每个元素执行的代码
  console.log(array[i]);
}

以下是组件的分解：

初始化 (let i = 0)： 将计数器变量 (i) 初始化为 0。这仅在循环开始时执行一次。
条件 (i < array.length)： 指定循环继续的条件。只要 i 小于数组的长度，循环就会继续。
增量 (i++)： 在每次迭代后递增计数器变量 (i)。

性能特征

for 循环通常被认为是 JavaScript 中最快的迭代方法。它提供最低的开销，因为它直接操作计数器并使用其索引访问数组元素。

主要优点：

速度： 通常由于开销低而最快。
控制： 提供对迭代过程的完全控制，包括跳过元素或跳出循环的能力。
浏览器兼容性： 适用于所有 JavaScript 环境，包括旧版浏览器。

示例：处理来自世界各地的订单

想象一下，您正在处理来自不同国家/地区的订单列表。您可能需要出于税务目的以不同的方式处理来自某些国家的订单。


const orders = [
  { id: 1, country: 'USA', amount: 100 },
  { id: 2, country: 'Canada', amount: 50 },
  { id: 3, country: 'UK', amount: 75 },
  { id: 4, country: 'Germany', amount: 120 },
  { id: 5, country: 'USA', amount: 80 }
];

function processOrders(orders) {
  for (let i = 0; i < orders.length; i++) {
    const order = orders[i];
    if (order.country === 'USA') {
      console.log(`Processing USA order ${order.id} with amount ${order.amount}`);
      // 应用美国特定的税收逻辑
    } else {
      console.log(`Processing order ${order.id} with amount ${order.amount}`);
    }
  }
}

processOrders(orders);

`forEach`：一种函数式迭代方法

forEach 是数组上可用的一种高阶函数，它提供了一种更简洁和函数式的方式来迭代。它为每个数组元素执行一次提供的函数。

语法和用法

forEach 的语法如下：


array.forEach(function(element, index, array) {
  // 对每个元素执行的代码
  console.log(element, index, array);
});

回调函数接收三个参数：

element： 正在处理的数组中的当前元素。
index（可选）： 当前元素在数组中的索引。
array（可选）： 调用 forEach 的数组。

性能特征

forEach 通常比 for 循环慢。这是因为 forEach 涉及为每个元素调用一个函数的开销，这会增加执行时间。但是，对于较小的数组，差异可以忽略不计。

主要优点：

可读性： 与 for 循环相比，提供更简洁、更易读的语法。
函数式编程： 非常适合函数式编程范例。

主要缺点：

性能较慢： 通常比 for 循环慢。
无法中断或继续： 您不能使用 break 或 continue 语句来控制循环的执行。要停止迭代，您必须抛出异常或从函数返回（这只会跳过当前的迭代）。

示例：格式化来自不同地区的日期

想象一下，您有一个标准格式的日期数组，需要根据不同的地区偏好格式化它们。


const dates = [
  '2024-01-15',
  '2023-12-24',
  '2024-02-01'
];

function formatDate(dateString, locale) {
  const date = new Date(dateString);
  return date.toLocaleDateString(locale);
}

function formatDates(dates, locale) {
  dates.forEach(dateString => {
    const formattedDate = formatDate(dateString, locale);
    console.log(`Formatted date (${locale}): ${formattedDate}`);
  });
}

formatDates(dates, 'en-US'); // US format
formatDates(dates, 'en-GB'); // UK format
formatDates(dates, 'de-DE'); // German format

`map`：转换数组

map 是另一个旨在转换数组的高阶函数。它通过将提供的函数应用于原始数组的每个元素来创建新数组。

语法和用法

map 的语法与 forEach 类似：


const newArray = array.map(function(element, index, array) {
  // 转换每个元素的代码
  return transformedElement;
});

回调函数还接收与 forEach 相同的三个参数（element、index 和 array），但它必须返回一个值，该值将是新数组中对应的元素。

性能特征

与 forEach 类似，由于函数调用开销，map 通常比 for 循环慢。此外，map 会创建一个新数组，这可能会消耗更多内存。但是，对于需要转换数组的操作，map 可能比使用 for 循环手动创建新数组更有效。

主要优点：

转换： 创建一个具有转换元素的新数组，使其成为数据操作的理想选择。
不可变性： 不修改原始数组，促进不可变性。
链接： 可以与其他数组方法轻松链接以进行复杂的数据处理。

主要缺点：

性能较慢： 通常比 for 循环慢。
内存消耗： 创建一个新数组，这会增加内存使用量。

示例：将来自不同国家/地区的货币转换为美元

假设您有一个不同货币的交易数组，需要将它们全部转换为美元以进行报告。


const transactions = [
  { id: 1, currency: 'EUR', amount: 100 },
  { id: 2, currency: 'GBP', amount: 50 },
  { id: 3, currency: 'JPY', amount: 7500 },
  { id: 4, currency: 'CAD', amount: 120 }
];

const exchangeRates = {
  'EUR': 1.10, // Example exchange rate
  'GBP': 1.25,
  'JPY': 0.007,
  'CAD': 0.75
};

function convertToUSD(transaction) {
  const rate = exchangeRates[transaction.currency];
  if (rate) {
    return transaction.amount * rate;
  } else {
    return null; // 指示转换失败
  }
}

const usdAmounts = transactions.map(transaction => convertToUSD(transaction));

console.log(usdAmounts);

性能基准测试

为了客观地比较这些方法的性能，我们可以在 JavaScript 中使用基准测试工具，例如 console.time() 和 console.timeEnd()，或者专门的基准测试库。这是一个基本示例：


const arraySize = 100000;
const largeArray = Array.from({ length: arraySize }, (_, i) => i + 1);

// For loop
console.time('For loop');
for (let i = 0; i < largeArray.length; i++) {
  // 做点什么
  largeArray[i] * 2;
}
console.timeEnd('For loop');

// forEach
console.time('forEach');
largeArray.forEach(element => {
  // 做点什么
  element * 2;
});
console.timeEnd('forEach');

// Map
console.time('Map');
largeArray.map(element => {
  // 做点什么
  return element * 2;
});
console.timeEnd('Map');

预期结果：

在大多数情况下，您将观察到以下性能顺序（从最快到最慢）：

for 循环
forEach
map

重要注意事项：

数组大小： 性能差异随着数组变大而变得更加显着。
操作的复杂性： 在循环或函数内部执行的操作的复杂性也会影响结果。简单的操作将突出显示迭代方法的开销，而复杂的操作可能会掩盖差异。
JavaScript 引擎： 不同的 JavaScript 引擎（例如，Chrome 中的 V8，Firefox 中的 SpiderMonkey）可能具有略有不同的优化策略，这可能会影响结果。

最佳实践和用例

选择正确的迭代方法取决于任务的具体要求。以下是最佳实践的总结：

对性能至关重要的操作： 将 for 循环用于对性能至关重要的操作，尤其是在处理大型数据集时。
简单迭代： 当性能不是主要问题且可读性很重要时，使用 forEach 进行简单迭代。
数组转换： 当您需要转换数组并创建一个包含转换值的新数组时，使用 map。
中断或继续迭代： 如果您需要使用 break 或 continue，则必须使用 for 循环。forEach 和 map 不允许中断或继续。
不可变性： 当您要保留原始数组并创建一个具有修改的新数组时，请使用 map。

现实世界的场景和示例

以下是一些现实世界的场景，其中每种迭代方法可能是最合适的选择：

分析网站流量数据 (for 循环)： 处理数百万条网站流量记录以计算关键指标。由于大型数据集和对最佳性能的需求，for 循环在这里将是理想的。
显示产品列表 (forEach)： 在电子商务网站上显示产品列表。在这里，forEach 已经足够，因为性能影响很小，而且代码更具可读性。
生成用户头像 (map)： 从用户数据生成用户头像，其中每个用户的数据都需要转换为图像 URL。map 将是完美的选择，因为它将数据转换为新的图像 URL 数组。
过滤和处理日志数据 (for 循环)： 分析系统日志文件以识别错误或安全威胁。由于日志文件可能非常大，并且分析可能需要根据某些条件跳出循环，因此 for 循环通常是最有效的选择。
为国际受众本地化数字 (map)： 将数值数组转换为根据各种区域设置设置格式化的字符串，以准备数据以向国际用户显示。使用 map 执行转换并创建一个新的本地化数字字符串数组可确保原始数据保持不变。

超越基础知识：其他迭代方法

虽然本文重点介绍了 for 循环、forEach 和 map，但 JavaScript 提供了其他迭代方法，这些方法在特定情况下可能很有用：

for...of： 遍历可迭代对象的值（例如，数组、字符串、Map、Set）。
for...in： 遍历对象的可枚举属性。（通常不建议用于迭代数组，因为不保证迭代的顺序，并且它还包括继承的属性）。
filter： 创建一个新数组，其中包含通过提供的函数实现的测试的所有元素。
reduce： 将一个函数应用于累加器和数组中的每个元素（从左到右），以将其减少为单个值。

结论

理解 JavaScript 中不同迭代方法的性能特征和用例对于编写高效和优化的代码至关重要。虽然 for 循环通常提供最佳性能，但 forEach 和 map 提供了更简洁和函数式的替代方案，适用于许多场景。通过仔细考虑任务的具体要求，您可以选择最合适的迭代方法，并优化 JavaScript 代码的性能和可读性。

请记住对代码进行基准测试以验证性能假设，并根据应用程序的特定上下文调整您的方法。最佳选择将取决于您数据集的大小、执行的操作的复杂性以及代码的总体目标。

性能比较：For 循环 vs. forEach vs. Map in JavaScript

简介：JavaScript 中的迭代

for 循环：传统方法

语法和用法

性能特征

forEach：一种函数式迭代方法

语法和用法

性能特征

map：转换数组

语法和用法

性能特征

性能基准测试

最佳实践和用例

现实世界的场景和示例

超越基础知识：其他迭代方法

结论

`for` 循环：传统方法

`forEach`：一种函数式迭代方法

`map`：转换数组