Benchmark: Array from() vs Map.keys() vs Map.values() vs spread

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>

Previous results

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: 11 months 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

Test name	Executions per second
Array.from	1333.1 Ops/sec
Map.keys	2122.5 Ops/sec
Map.values	2126.1 Ops/sec
Spread ...	1336.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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:

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

Jump to the latest result

Array.from

Map.keys

Map.values

Spread ...

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):