js循环相关方法性能测试

js循环相关方法性能测试

众所周知，在js中有几种方法可以做到循环遍历。开发人员通常使用的一些方法是：

• for
• while
• for...of
• Array.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()

// 循环方法

const end = performance.now()

console.log(`耗时 ${end - start} ms.`);

for

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

while

let i = 0

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

for…of

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

Array.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 次迭代

结论

对于前端项目而言，使用任何循环方法都可以（因为大多数网站通常不会在页面上对 10,000 以上的数据量进行循环遍历）。

但当涉及到后端（node）处理、代码验证、格式化等时，for和while仍然是最佳选择。