Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array from() vs Map.keys() vs Map.values() vs spread
(version: 0)
Comparing performance of:
Array.from vs Map.keys vs Map.values vs Spread ...
Created:
4 years ago
by:
Guest
Go to the latest result
Tests:
Array.from
var fooMap = new Map(); for(var i=0;i<10000;i++) { fooMap.set(i, i); } var other = [...fooMap];
Map.keys
var fooMap = new Map(); for(var i=0;i<10000;i++) { fooMap.set(i, i); } var other = fooMap.keys();
Map.values
var fooMap = new Map(); for(var i=0;i<10000;i++) { fooMap.set(i, i); } var other = fooMap.values();
Spread ...
var fooMap = new Map(); for(var i=0;i<10000;i++) { fooMap.set(i, i); } var other = [...fooMap];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Array.from
Map.keys
Map.values
Spread ...
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Browser/OS:
Chrome 136 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=607556" width="100%" height="500px"></iframe>
Map.values
2K/s
Map.keys
2K/s
Spread ...
1K/s
Array.from
1K/s
View exact numbers
Test name
Executions per second
✓
Map.values
2,126 Ops/sec
Map.keys
2,122 Ops/sec
Spread ...
1,337 Ops/sec
Array.from
1,333 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided benchmark definition and test cases, explaining what's being tested, comparing options, and discussing pros and cons. **Benchmark Definition:** The benchmark is designed to compare the performance of four different approaches for creating an array from a Map: 1. `Array.from()` 2. `Map.keys()` 3. `Map.values()` 4. Spread syntax (`...`) **Test Cases:** Each test case consists of two parts: 1. **Benchmark Definition:** A JavaScript code snippet that creates a Map, populates it with 10,000 key-value pairs, and then uses one of the four approaches to create an array from the Map. 2. **Test Name:** The name of the approach being tested. Here's a brief explanation of each test case: * `Array.from()`: Creates an array from the values of the Map using `Array.from()` with the spread operator (`...`). * `Map.keys()`: Creates an iterator over the keys of the Map and then converts it to an array using the spread operator (`...`). * `Map.values()`: Creates an iterator over the values of the Map and then converts it to an array using the spread operator (`...`). * `Spread ...`: Directly spreads the values of the Map into a new array. **Options Comparison:** The four approaches have different pros and cons: 1. **`Array.from()`**: This approach is generally fast and efficient, especially when used with the spread operator (`...`). However, it requires that the Map has numeric keys, which might not be the case for all Maps. 2. **`Map.keys()` + Spread ...**: This approach uses an iterator to traverse the keys of the Map and then converts them to an array using the spread operator (`...`). While this is a valid way to create an array from a Map, it can lead to slower performance due to the overhead of creating an iterator. 3. **`Map.values()` + Spread ...**: Similar to `Map.keys()`, but uses an iterator over the values instead. This approach also has the same trade-offs as using `Map.keys()` plus spread (`...`). 4. **Spread ...**: Directly spreading the values of a Map into a new array can be the fastest option, especially when the Map has numeric keys and is populated with primitive values (e.g., numbers, strings). However, this approach may not work for Maps with non-numeric keys or more complex data structures. **Other Considerations:** * **Browser support:** The benchmark results are specific to Chrome 98 running on a Mac OS X 10.15.7 environment. * **Device platform:** The tests were run on a desktop device, which may affect performance compared to mobile devices or other platforms. * **Map size and complexity:** The benchmark assumes a relatively small Map with 10,000 key-value pairs. Larger Maps or more complex data structures might require different approaches. **Alternatives:** If you need to create an array from a Map and want alternative approaches: 1. **`for...of` loop**: You can use a `for...of` loop to iterate over the values of a Map and push them into a new array. 2. **`Map.forEach()` + spread (`...`)`: Similar to using `Array.from()`, but uses a callback function to process each value before adding it to the new array. 3. **Using `Object.entries()`**: Instead of iterating over the keys or values of a Map, you can use `Object.entries()` to get an array-like object with key-value pairs, and then convert it to a regular array using the spread operator (`...`). Keep in mind that these alternatives might have different performance characteristics compared to the original approaches.
Related benchmarks
Javascript string to array mapping: Array.from() vs Spread syntax [...spread]
Array.from() vs new Array().map()
Array Spread vs Fill vs New Array
Comments
Confirm delete:
Do you really want to delete benchmark?