性能 - 在 javascript 中的過濾數組上使用相同條件的 foreach 與具有相同條件的過濾器和 foreach

Question

我有一個關於性能的問題。 假設我有大量名為records的對象。 我的目標是創建一個 Set （確保我有不同的值），其中包含滿足特定條件的記錄中records的值value - if(rec.otherValue === 'something specific') 。 我有兩種可能的方法可以產生預期的結果：

選項1：

const set = new Set();
records.foreach(rec => {
   if(rec.otherValue === 'something specific'){
       set.add(rec.value);
   }
});

第一個選項是直截了當的。 I go 遍歷所有記錄，如果滿足特定條件，則將所需值添加到 Set 中。

選項 2：

const set = new Set();
const filteredRecords = records.filter(rec => rec.otherValue === 'something specific');
filteredRecords.foreach(rec => {
   set.add(rec.value);
});

第二個選項首先過濾大量records數組以獲得更具體的對象數組（從數百條記錄到少於 10 條），然后將所需的值添加到 Set。

這兩個選項產生完全相同的結果。 我的問題是：哪一個是性能最好的？ 我的目標是盡可能快地制作 function。 如果有第三種，甚至更快的選擇，請分享。

Answer 1

那這個呢？ 我認為它具有很高的可讀性，這比性能更重要。

const condition = val => val === 'something specific'
const set = new Set(records.filter(condition))

Answer 2

如果您想要速度，就性能而言，沒有什么比原生（香草）javascript 更好的了。 然后，

for (var i=0; i< records.length; i++) {
// your operations
}

請檢查： 為什么使用 for 比 some() 或 filter() 更快

和

https://web.archive.org/web/20170403221045/https://blogs.oracle.com/greimer/entry/best_way_to_code_a

Answer 3

測試這個
我很好奇現代方法的速度有多快，所以我在 JSPerf 上設置了一些測試。 這是我發現的：

• for 循環和forEach()方法的執行非常接近。
• map()和filter()等方法的速度大約是使用 forEach() 並推送到新數組以執行相同操作的速度的兩倍。
• 使用forEach()進行多步操作的速度大約是filter()和map()等鏈接方法的兩倍。
• 這些結果在 Chrome、Firefox 和 Safari 中是一致的。 我擔心只有 V8 JavaScript 渲染引擎以這種方式進行了優化，但所有現代瀏覽器都看到了類似的結果。

鏈接到源
基准測試：reduce()、filter()、map()、forloop 和 forEach()

我嘗試多次運行基准測試，結果 for 循環最慢，而forEach()和reduce()最快。

您可以使用另一個選項，使用reduce() 。

這是一個例子：

 let data = [ { id: 1, value: 'one' }, { id: 2, value: 'two' }, { id: 3, value: 'three' }, { id: 4, value: 'four' }, { id: 5, value: 'five' }, ]; // Filters IDs of odd numbers [1,3,5] let new_arr = data.reduce((a, b) => { if ([1,3,5].includes(b.id)) { a.push(b.value); } return a; }, []); console.log(new_arr); // Expected Result: ['one', 'three', 'five'] // Or you can use this one Liner let new_arr_1 = data.reduce((a, b) => a.concat(([1,3,5].includes(b.id)? b.value: [])), []); console.log(new_arr_1); // Expected Result: ['one', 'three', 'five']