使用 Performance.now() 对 'for'、'while'、'for...of' 和 'Array.forEach' 进行基准测试

现在，我们来聊聊 JavaScript 中的循环！众所周知，循环有很多种实现方式。开发者常用的一些方法包括：

• 为了
• 尽管
• 对于……
• 数组.forEach

开发者喜欢使用它，Array.forEach因为它简单易用。但是，你有没有想过为什么我们有这么多循环选项？为什么不去掉其他的，只保留最好的那个呢？

现在，让我们使用Performance.now()进行一些性能测试！

基准测试

以下是用于基准测试的测试用例和循环。

测试用例

const iterations = ITERATION_TOTAL // 10, 100, 10000, 1000000, 10000000
const myArray = Array.from(Array(iterations).keys())

let total = 0

const start = performance.now()

// Looping method will be here

const end = performance.now()

console.log(`It took ${end - start} ms.`);

为了

for (let i = 0; i < myArray.length; i++) {
  total += myArray[i]
}

尽管

let i = 0

while (i < myArray.length) {
  total += myArray[i]
  i++
}

对于……

for (const item of myArray) {
  total += item
}

数组.forEach

myArray.forEach((item) => {
  total += item
})

测试使用Node.js v18.17.0版本运行。每个循环都测试了不同的迭代次数：10、100、10,000、1,000,000 和 10,000,000。我计算了每次迭代的平均时间。

结果

以下是每次循环及其迭代次数的结果（数值越低越好）：

10 次迭代

100 次迭代

10,000 次迭代

1,000,000 次迭代

10,000,000 次迭代

结论

对于前端来说，使用任何循环方法（for，，，和）都是可以的while，因为大多数网站在一个页面上通常不会显示超过 10,000 个项目。for...ofArray.forEach

但是，在后端处理、代码验证、代码检查等方面，for循环while仍然是最佳选择！🚀

所以，并非所有对开发者来说很酷很方便的东西都对项目最有利。这其中可能需要权衡取舍。✨