メソッドチェーン: filter().map() は非効率ですか?

メソッドチェーン

Javascript で Array.prototype.filter() と Array.prototype.map() を使用して配列データの値を編集および削除するコードを見たことがあるかもしれません

例:

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

でも、メソッドチェーンは便利ですよね。

そう思っている方のために、上記と同様にコードパターンA、B、Cの繰り返し回数100回から100,000回までの10回の平均時間をミリ秒単位で計測してグラフを作成してみました。

調査結果

1. いずれにせよ、反復回数が 100 ～ 1,000 回など大きくない場合は、大きな差はありません。

2. 反復数が 1,000,000 など、指数関数的に増加する場合に問題になります。

結論

メソッドチェーン は操作を集約しませんが、反復回数が指数関数的に増加するにつれて結果の差が広がります。

したがって、反復回数が少ない場合は、その手軽さの利点を得るためにメソッドチェーンを使用しても問題ありませんが、一方で、大量のデータを扱う場合は、メソッドチェーンを使用する必要があると言えると思います。メソッドチェーンを使用せずにアルゴリズムを慎重に検討してください。

読んでいただきありがとうございます!

以上がメソッドチェーン: filter().map() は非効率ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。