Javascript 性能測試 - for vs for each vs (map, reduce, filter, find)

翻譯：瘋狂的技術宅

原文：codeburst.io/javascript-…

咱們都知道 for 循環比 each 或 javascript 函數更快，由於在javascript函數的引擎下可能會使用for循環或其餘我不肯定的東西。我使用一個對象數組進行了一個簡單的測試，並經過loop/for each/javascript 函數執行一些操做，並觀察執行所需的時間。

---

這些結果來自小例子，可能根據執行的操做和執行環境的選擇而有所不一樣。還與 VM 的選擇有關。

1. Reduce vs for循環 vs foreach

// calculated the sum of upVotes
const posts = [ 
  {id: 1, upVotes: 2},
  {id: 2, upVotes: 18}, 
  {id: 3, upVotes: 1}, 
  {id: 4, upVotes: 30}, 
  {id: 5, upVotes: 50} 
];let sum = 0;
console.time('reduce');
sum = posts.reduce((s, p)=> s+=p.upVotes,0);
console.timeEnd('reduce')sum = 0;
console.time('for loop');
for(let i=0; i<posts.length; i++) {
    sum += posts[i].upVotes;
}
console.timeEnd('for loop');sum = 0;
console.time('for each');
posts.forEach(element => {
    sum += element.upVotes;
});console.timeEnd('for each');
複製代碼

注意：下面是結果列表，代碼能夠在 這裏 找到。

全部結果清楚地代表 for 循環比 map/reduce/filter/find 更加高效。

Map/Reduce/Filter/Find 很慢的緣由有許多，其中有

1. 他們有一個回調，會產生開銷。
2. javascript 函數須要考慮不少極端狀況，好比 getter、稀疏數組和檢查傳遞的參數是不是數組，這會增長開銷。

我找到了一個 庫。從新實現幾個常見的內置原生 JavaScript 函數。

可是使用的原則不單單取決於性能，還有更多因素須要考慮，其中一些是：

1. 代碼可讀性和可維護性
2. 輕鬆編碼
3. 快速編碼
4. 實施和優化
5. 我的選擇

---

就我的而言，我喜歡 map、reduce、filter 和 find，而且我也使用過很長一段時間。他們幫助我寫出乾淨、精確、快速並符合我思路的點代碼。當我別無選擇時，會使用 for 循環。

就優化而言，map/reduce/filter/find 替換應該是最後的選擇，或者根本就不是一個選項，其具體取決於你所需的優化級別。

注意：若是你正在使用循環，請始終用慣用方式使用，由於編譯器如今可以以正確的方式去優化慣用循環

更新：你能夠在這裏找到大數據集和複雜計算的結果。

歡迎關注前端公衆號：前端先鋒， 領取前端工程化實用工具包。