方法鏈：filter().map()效率低？

方法連結

您可能看過使用 Array.prototype.filter() 和 Array.prototype.map() 在 Javascript 中編輯和刪除 Array 資料中的值的程式碼

例如：

[1,2,3]
.map((mapped) => mapped + 1)
.filter((filtered) => filtered > 1)

問題

我一直想知道這樣的方法連結是否會在每次迭代時迭代數組中的值，或者v8引擎是否可能透過在後台執行資料聚合來優化操作。

所以我進行了一項小研究。

如何？

使用 console.time 和 console.timeEnd 測量 10 次有和沒有方法鏈的平均執行時間。
我使用 Chrome 瀏覽器進行調查。

console.time('Filter Execution Time')
// YOUR CODE
console.timeEnd('Filter Execution Time')

結果：方法連結不會聚合操作。

-	Method Chain(A)	No Method Chain(B)	Aggregate Logic(C)
Iterate 10000000 values	4656 ms	4733 ms	169 ms
Iterate 100000 values	27 ms	24 ms	4 ms

正如您所看到的，有/沒有方法鏈的結果並沒有顯示出太大的差異，而聚合邏輯則獲得了更快的結果。

代碼-A。將方法鏈與map()和filter()一起使用

console.time('Filter Execution Time')
const result = new Array()
.fill(1).map((e) => e + 1)
.filter((e) => e !== 1)
console.timeEnd('Filter Execution Time')

代碼-B。分離map()和filter()（無方法連結）

console.time('Filter Execution Time')
const mapResult = new Array().fill(1).map((e) => e + 1)
const result = mapResult.filter((e) => e !== 1)
console.timeEnd('Filter Execution Time')

代碼-C。聚合邏輯

console.time('Filter Execution Time')
const result = []
new Array().fill(1).forEach((e) =>  {
    if (e !== 1) result.push(e)
})
console.timeEnd('Filter Execution Time')

但是方法鏈很方便不是嗎？

對於那些這麼認為的人，我在 Code Pattern A、B 和 C 下從 100 到 100,000 次迭代時製作了圖表，通過以毫秒為單位計算 10 次的平均時間，與上面類似。

發現

1. 迭代次數不大（例如 100 - 1,000 次）時，沒有太大差異。

2. 當迭代次數呈指數增長（例如 1,000,000）時，這將很重要。

結論

方法鏈不會聚合操作，但結果的差異會隨著迭代次數呈指數成長而擴大。

因此我認為可以公平地說，當迭代次數較少時，可以使用方法鏈來獲得其便捷性的優勢，而另一方面，如果處理大量數據，則應該使用方法鏈仔細考慮演算法，不要考慮方法鏈。

感謝您的閱讀！

以上是方法鏈：filter().map()效率低？的詳細內容。更多資訊請關注PHP中文網其他相關文章！