直接代码说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script>
// 此处添加测试数组 textArr
var textArr = [], i = 0; while (i<40000000) { textArr.push(i) i++ } const forTest = (textArr) => { console.time('time forTest') var newArr = []
// 第一种写法 不带声明变量的写法 (运行效率最好,性能最佳) for (var i = 0; i < textArr.length; i++) { newArr.push(i) } console.timeEnd('time forTest') } const forTest1 = (textArr) => {
console.time('time forTest1')
var newArr = []
// 第二种带声明变量的写法 (相比之下要差一些)
for (var i = 0,len = textArr.length; i < len; i++) { newArr.push(i) } console.timeEnd('time forTest1') } const forTest2 = (textArr) => { console.time('time forTest2') var newArr = []
// 第三种 forEach的写法 (效率最差,运行最慢) textArr.forEach(item => { newArr.push(item) }) console.timeEnd('time forTest2') } const forTest3 = (textArr) => { console.time('time forTest3') var newArr = []
// 第四种是 for循环的简便写法, (运行效率与不带声明变量的写法相差无几,相比之下,可以使用这种写法,最优),仅仅是本人的观点 for (var i = 1,cur; cur = textArr[i++];) { newArr.push(i) } console.timeEnd('time forTest3') } forTest(textArr) forTest1(textArr) forTest2(textArr) forTest3(textArr) </script> </body> </html>
直接复制粘贴,在控制台即可看到这四种写法的效率比对,欢迎吐槽