结论：js中的for循环只有在处理百万条数据以上才会展示出他的强大性能,和看出明显优势，但是在百万条数据往下甚至到个位数的数据量通常都是for和while还有do...while不相上下，反而后两者更加优势明显
下面是测试耗时截图（在不同浏览器也会有所不同，我这是 Chrome 版本 111.0.5563.149）
可以复制代码直接运行测试
<script>
let dataList = Array(99).fill({name:'叫我书中枫叶',age:18})
let dataObj = {name: '小明', age: 18}
/*
* for 循环
* 语法：for (初始化; 条件; 步进) {循环体}
* */
console.time('for循环时间');
for (let i = 0; i < dataList.length; i++) {
// console.log("值: ",dataList[i])
}
console.timeEnd('for循环时间');
/*
* while 循环
* 语法：while (条件) {循环体}
* */
console.time('while循环时间');
let j = 0
while (j < dataList.length) {
// console.log("值: ",dataList[j])
j++
}
console.timeEnd('while循环时间');
/*
* do...while 循环
* 语法：do { 循环体 } while ( 条件 )
* */
console.time('do...while循环时间');
let k = 0
do {
// console.log("值: ",dataList[k])
k++
}while (k<dataList.length)
console.timeEnd('do...while循环时间');
/*
* 一般用于循环对象 和 数组会有警告
* for...in 循环 遍历对象的属性
* 语法：for (变量 in 对象) { 循环体 }
* */
/* console.time('测试for...in循环对象时间');
for (const index in dataObj) {
// console.log('下标：', index)
// console.log('值：', dataList[index])
}
console.timeEnd('测试for...in循环对象时间');*/
console.time('for...in循环数组时间');
for (const index in dataList) {
// console.log("值: ", dataList[index])
}
console.timeEnd('for...in循环数组时间');
/*
* 用于循环数组、字符串、Map、Set 等
* for...of 循环
* 语法：for (变量 in 可迭代对象) { 循环体 }
* */
console.time('for...of循环时间');
for (const item of dataList) {
// console.log("值: ", item)
}
console.timeEnd('for...of循环时间');
/*
* 仅用于遍历数组
* forEach 循环 不支持 break 或 return
* 语法：数组.forEach(function(元素, 索引, 数组) { 回调函数 }
* */
console.time('forEach循环时间');
dataList.forEach((el, index, arr) => {
// console.log("值: ", el)
})
console.timeEnd('forEach循环时间');
/*
* 仅用于遍历数组 返回一个新数组 不会修改原始数组
* map 循环
* 语法：const 新数组 = 数组.map(function(元素, 索引, 数组) { return 新元素; }
* */
console.time('map循环时间');
dataList.map((el, index, arr) => {
// console.log("值: ", el)
})
console.timeEnd('map循环时间');
</script>