Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
flattt
(version: 0)
Comparing performance of:
map+flat vs reduce+push vs reduce+concat vs map+lodash
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Script Preparation code:
var arr = [{ permissions: [{ target_type: 'tag', operations: ['edit'], }, { target_type: 'log_entry', operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'], }, ], }, { permissions: [{ target_type: 'log_entry', operations: ['list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view'], }, ], }, { permissions: [{ target_type: 'log_entry', operations: ['list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view'], }, ], }, { permissions: [{ target_type: 'log_entry', operations: ['list', 'view'], }, { target_type: 'log_entry', operations: ['list', 'view'], }, ], }, ]
Tests:
map+flat
arr.map((m) => m.permissions).flat()
reduce+push
arr.reduce((acc, cur) => { acc.push(...cur.permissions); return acc; }, [])
reduce+concat
arr.reduce((accu, curr) => { return accu.concat([...curr.permissions]) }, [])
map+lodash
_.flatten(arr.map(m => m.permissions))
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
map+flat
reduce+push
reduce+concat
map+lodash
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Measuring the performance of JavaScript operations is crucial for optimizing code and identifying bottlenecks. **Benchmark Definition JSON** The provided benchmark definition json represents four individual test cases: 1. `arr.map((m) => m.permissions).flat()`: This test case measures the performance of using `map()` followed by `flat()`. 2. `arr.reduce((acc, cur) => {\r\n acc.push(...cur.permissions);\r\n return acc;\r\n}, [])`: This test case measures the performance of using `reduce()` with a callback function that pushes permissions into an accumulator array. 3. `arr.reduce((accu, curr) => {\r\n return accu.concat([...curr.permissions])\r\n}, [])`: Similar to the previous one, but uses `concat()` instead of `push()`. 4. `_.flatten(arr.map(m => m.permissions))`: This test case measures the performance using a library function (`flatten()`) from Lodash. **Comparison of Options** The options compared are: 1. Using `map()` followed by `flat()` 2. Using `reduce()` with `push()` 3. Using `reduce()` with `concat()` 4. Using a library function (`flatten()`) from Lodash Each approach has its pros and cons: * **Using `map()` followed by `flat()`**: + Pros: Efficient way to flatten an array. + Cons: Creates a new array using `map()`, which can be memory-intensive for large arrays, and then flattens it using `flat()`. * **Using `reduce()` with `push()`**: + Pros: Can handle variable-length arrays and avoids creating a new array. + Cons: May have performance overhead due to the callback function and `push()` operation. * **Using `reduce()` with `concat()`**: + Pros: Similar to `push()`, but uses an immutable array. + Cons: Creates multiple intermediate arrays, which can be memory-intensive for large arrays. * **Using a library function (`flatten()`) from Lodash**: + Pros: Efficient and concise way to flatten an array. + Cons: Requires importing an additional library. **Lodash Library** The Lodash library is a popular JavaScript utility library that provides various functions for array manipulation, among other things. The `flatten()` function is used in one of the test cases to measure its performance. **Latest Benchmark Result** The latest benchmark result shows the performance of each test case across different browsers and devices: | Test Name | Chrome 102 | | --- | --- | | reduce+push | 4324703.5 executions/second | | map+lodash | 2371358.75 executions/second | | reduce+concat | 1391013.625 executions/second | | map+flat | 373257.78125 executions/second | In this result, `reduce+push` performs the best, followed by `map+flat`, which is likely due to the efficient use of `map()` and `flat()`. The other test cases have lower performance, possibly due to the overhead of callback functions or library imports. Overall, the benchmark results suggest that using `map()` followed by `flat()` is the most efficient approach for this specific problem. However, the best approach ultimately depends on the specific requirements and constraints of your project.
Related benchmarks:
Lodash flatten v.s. Spread
push vs spread v3
js methonds
push, spread, concat
.flat vs _.flatten
Comments
Confirm delete:
Do you really want to delete benchmark?