Benchmark: new Array from vs slice vs push vs index vs spread

Tests:

Array.from
const elements = document.all; const arr = Array.from(elements);
Array.slice
const elements = document.all; const arr = Array.prototype.slice.call(elements, 0);
Array.push
const elements = document.all; const amount = elements.length; const arr = []; for (let i = 0; i < amount; i += 1) arr.push(elements[i]);
Array[index]
const elements = document.all; const amount = elements.length; const arr = Array(amount); for (let i = 0; i < amount; i += 1) arr[i] = elements[i];
Array spread
const elements = document.all; const arr = [...elements];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Array.slice
Array.push
Array[index]
Array spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 130 on Android

View result in a separate tab

Test name	Executions per second
Array.from	222601.5 Ops/sec
Array.slice	254990.8 Ops/sec
Array.push	779662.4 Ops/sec
Array[index]	799656.4 Ops/sec
Array spread	185046.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what each test case is trying to measure.

The benchmark is testing the performance of different ways to create an array in JavaScript:

1. `Array.from`: Creates an array from an iterable object (in this case, `document.all`).
2. `Array.prototype.slice.call()`: Converts an array-like object into a true array using `slice.call()`.
3. `Array.prototype.push()`: Pushes elements onto the end of an empty array.
4. `Array[index]`: Accesses and assigns values to specific indices in an existing array.
5. `Array spread` (using the spread operator): Creates a new array by spreading an iterable object.

Each test case creates an array with a specific number of elements, using one of these methods, and then measures how many executions per second are possible on different browsers and devices.

Now, let's discuss the pros and cons of each approach:

1. `Array.from`:
	* Pros: Creates a new array from an iterable object, which can be more efficient than pushing elements onto an existing array.
	* Cons: May not perform well if the iterable object is very large or has many duplicate values.
2. `Array.prototype.slice.call()`:
	* Pros: Converts an array-like object into a true array, which can be useful for certain use cases.
	* Cons: Creates a new array, which can lead to increased memory usage and slower performance compared to other methods.
3. `Array.prototype.push()`:
	* Pros: Pushes elements onto the end of an empty array, which is often used in push-based algorithms.
	* Cons: Slower than other methods due to the overhead of pushing elements onto an array.
4. `Array[index]`:
	* Pros: Can be faster for large arrays since it only accesses and assigns values at specific indices.
	* Cons: Requires manual indexing, which can lead to errors if not implemented correctly.
5. `Array spread` (using the spread operator):
	* Pros: Creates a new array by spreading an iterable object, which can be more efficient than pushing elements onto an existing array.
	* Cons: May not perform well if the iterable object is very large or has many duplicate values.

In general, the performance differences between these methods are relatively small, and the choice of method often depends on the specific use case and requirements. However, `Array.from` and `Array spread` tend to be faster since they create new arrays instead of pushing elements onto existing ones.

Regarding the libraries used in the benchmark, none are explicitly mentioned other than `document` which is a built-in JavaScript object that provides access to HTML document objects.

There are no special JavaScript features or syntax being tested in this benchmark. The focus is on comparing the performance of different array creation methods.

If you want to create alternative benchmarks for specific use cases or libraries, you could consider exploring other methods such as:

* Using `Array.from()` with different types of iterables (e.g., arrays, sets, maps)
* Comparing the performance of `Array.prototype.push()` versus other push-based algorithms (e.g., `array.push()`, `for` loops)
* Creating benchmarks for specific browsers or environments
* Testing the performance of array creation methods in conjunction with other operations (e.g., sorting, filtering)

Related benchmarks:

new Array from vs slice vs push vs index vs spread (version: 3)

Comparing performance of: Array.from vs Array.slice vs Array.push vs Array[index] vs Array spread

Created: 3 years ago by: Registered User

Jump to the latest result

Array.from

Array.slice

Array.push

Array[index]

Array spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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