JavaScript for 、for...of 、for...in 等 iteration 效率測試

• 由於不同瀏覽器，不同版本性能不一，且控制台本質是是套用了一大堆eval，沙盒化程度高,所以需使用node環境測試來提高準確性

// 準備待測數組
const NUM = 1e7;
let arr = new Array(NUM).fill(1);
// for 測試
let arr1 =[];
console.time('for');
for (let i = 0; i < arr.length; i++) {
  arr1.push(arr[i])
}

console.timeEnd('for');


// Chrome/75.0.3770.100 Safari/537.36 環境
//VM1324:10 for: 576.733154296875ms

// node v10.11.0 環境 
// for:  412.087ms

for 幾種寫法

• 常規寫法

let arr1 = []
console.time('one')
for (let i = 0; i < arr.length; i++ ){
    arr1.push(arr[i])
}
console.timeEnd('one')

數組長度是會動態變化，每次迴圈會重新計算length長度，可能會出現死迴圈

• cache arr.length

for (let i = 0, len = arr.length; i < len; i++ ){
     arr1.push(arr[i])
}

緩存length 值，無需重新計算length

• 倒序

for (let i = arr.length-1; i >= 0; i--){
     arr1.push(arr[i])
}

比第二種方法更簡潔

• 倒敘簡潔版

for (let i = arr.length-1; i--;){
     arr1.push(arr[i])
}

兩個分號之間的表達式為 true 會一直執行直到 判斷為 false (i = 0)

• 正序簡潔版

for (let i = 0, len;len = arr[i++]; ){
     arr1.push(arr[i])
}

當 i 大於等於數組長度或arr[i++]值為false時 將停指迴圈，同時由於arr.length動態變化時可能會造成死迴圈

for...of

for (let value of arr){
     arr1.push(value)
}

es6推出的迭代器，最簡潔，可以是用 break，continue和return 終止迴圈

for...in

for (let key in arr){
     arr1.push(arr[key])
}

for...in 一般用於遍歷對象，他會將本身屬性和原型鏈上的屬性（除系統內置屬性）全部遍歷出來即便是不可枚舉屬性（enumerable:false), 可以通過 items.hasOwnProperty來遍歷本身屬性,由於查詢到自己的原型鏈上，所以性能方面比較差

forEach

arr.forEach(function(value){
    arr1.push(value)
})
     

數組的迭代方法，沒有返回值

map

arr.map(function(value){
   return  arr1.push(value)
})
     

淺拷貝原數組，並且返回一個新數組

性能測試

測試總結

1. 運行效率: 常規for > 正序簡版 for> 倒序 for > cache for > 倒敘簡版 for> forEach > for..of > map > for..in
2. 幾種普通 for 迴圈占用記憶體相差不大, 而 for..of 占用運行記憶體最小
3. for..in 性能最差，記憶體占用高，速度很慢