方法連結(jié)

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

例如：

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

問題

我一直想知道這樣的方法連結(jié)是否會(huì)在每次迭代時(shí)迭代數(shù)組中的值，或者v8引擎是否可能透過在後臺(tái)執(zhí)行資料聚合來優(yōu)化操作。

所以我進(jìn)行了一項(xiàng)小研究。

如何？

使用 console.time 和 console.timeEnd 測(cè)量 10 次有和沒有方法鏈的平均執(zhí)行時(shí)間。
我使用 Chrome 瀏覽器進(jìn)行調(diào)查。

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

結(jié)果：方法連結(jié)不會(huì)聚合操作。

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

代碼-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()（無方法連結(jié)）

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')

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

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

發(fā)現(xiàn)

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

2. 當(dāng)?shù)螖?shù)呈指數(shù)增長(zhǎng)（例如 1,000,000）時(shí)，這將很重要。

結(jié)論

方法鏈不會(huì)聚合操作，但結(jié)果的差異會(huì)隨著迭代次數(shù)呈指數(shù)成長(zhǎng)而擴(kuò)大。

因此我認(rèn)為可以公平地說，當(dāng)?shù)螖?shù)較少時(shí)，可以使用方法鏈來獲得其便捷性的優(yōu)勢(shì)，而另一方面，如果處理大量數(shù)據(jù)，則應(yīng)該使用方法鏈仔細(xì)考慮演算法，不要考慮方法鏈。

感謝您的閱讀！

以上是方法鏈：filter().map()效率低？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！