For Loop Effectiveness

此篇主要介紹關於 for Loop 的效率

參考文章：掘金-JS數組循環的性能與效率分析

比較組別

常見的幾種 Loop

const persons = ['a','b','c','d','e','f']

//method1（普通for循環）
for (let i=0;i<persons.length ; i++){}

//method2（儲存長度）
for (let i=0 , len = persons.length ; i<len ; i++){}

//method3（取值與判斷合併）
for (let i = 0, person; person = persons[i]; i++) {}

//method4（i-- 與判斷合併，反向迭代）
for (let i = persons.length; i--;) {}

//method5（while）
while (i< persons.length){}

//method6（forEach）
persons.forEach((item)=>{})

//method7（map）
persons.map(item=>item)

//method8（for of）
for(let item of Persons){}

結論

比較佔用內存（作者只有比較四種方法）：

• method3 > method2 > method4 > method1

比較執行速度（Best to Worse）：

• In Chrome

  • method2 -> method3 -> method4 -> method1

• In FireFox

  • method6 -> method8 -> method7 -> method4

• In Safari

  • method7 -> method5 -> method6 -> method4

瀏覽器判斷：

• In Chrome：ES6 & Map is Worse

注意

• for loop、while loop、for of loop 可以使用 break 跳出