Benchmark: new Array from vs slice vs push vs index vs spread (with array prepared)

Script Preparation code:

var elements = [...document.all];

Tests:

Array.from
const arr = Array.from(elements);
Array.slice
const arr = Array.prototype.slice.call(elements, 0);
Array.push
const amount = elements.length; const arr = []; for (let i = 0; i < amount; i += 1) arr.push(elements[i]);
Array[index]
const amount = elements.length; const arr = Array(amount); for (let i = 0; i < amount; i += 1) arr[i] = elements[i];
Array spread
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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	5183044.5 Ops/sec
Array.slice	4806837.0 Ops/sec
Array.push	1159130.4 Ops/sec
Array[index]	1147004.6 Ops/sec
Array spread	12806729.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of different methods to create an array from the same source: `document.all`. The test cases compare four approaches:

1.  **`Array.from()`**: Creates a new array by cloning the elements of the specified iterable (in this case, `elements`).
2.  **`Array.prototype.slice.call(elements, 0)`**: Converts the specified iterable to an array using the `slice()` method and then calls the `call()` method to convert it back into an array.
3.  **`Array.prototype.push()`**: Creates a new array by pushing elements from the source array (`elements`) one by one.
4.  **Direct Array Indexing (`arr = []` followed by `for...push()`)**: Creates a new array by initializing it with zeros and then pushing elements from the source array (`elements`) into it.

**Options Comparison**

Here's an overview of each approach, their pros, cons, and considerations:

1.  **`Array.from()`**:
    *   Pros:
        *   Fast and efficient, as it uses a dedicated method for creating arrays.
        *   Less memory usage compared to other methods since it only creates a shallow copy of the iterable.
    *   Cons:
        *   May have some overhead due to its specific implementation details (e.g., browser differences).
2.  **`Array.prototype.slice.call(elements, 0)`**:
    *   Pros:
        *   Widely supported and implemented in most browsers.
        *   Can be useful when working with other arrays or iterables that don't support `Array.from()`.
    *   Cons:
        *   Creates an intermediate array using the `slice()` method, which may lead to more memory usage than necessary.
3.  **`Array.prototype.push()`**:
    *   Pros:
        *   Can be useful when working with existing arrays that need to be extended.
    *   Cons:
        *   Requires creating a new array object and then pushing elements into it, which can lead to performance issues if done in a loop.
4.  **Direct Array Indexing (`arr = []` followed by `for...push()`)**:
    *   Pros:
        *   Can be useful when working with existing arrays that need to be extended and don't support `Array.from()`.
    *   Cons:
        *   Requires manual memory management (allocating space for the new array) which can lead to performance issues if done in a loop.

**Library and Syntax**

*   **`Array.prototype.slice()`**: This is an instance method on the Array prototype. It's used to extract a section of an array.
*   **`Array.from()```**: Introduced in ECMAScript 2015, this method creates a new array from an iterable or an array-like object.

**Browser Features and Special JS Syntax**

This benchmark doesn't use any special JavaScript features like async/await, promises, or modern syntax. However, note that the `document.all` property may not work as expected in modern browsers due to security restrictions. Modern browsers recommend using alternative methods, such as `document.querySelectorAll()`.

**Alternatives**

Other alternatives to creating an array from `document.all` include:

*   **`Array.from(document.querySelectorAll('div'))```**: Using the `querySelectorAll()` method is generally preferred over `document.all`, as it provides more control and flexibility when selecting elements.
*   **`new Set(elements)` or `new Map(elements)```**: If you need to create a collection of unique values or key-value pairs, respectively, using a `Set` or `Map` object can be more efficient and convenient.

Related benchmarks:

new Array from vs slice vs push vs index vs spread (with array prepared) (version: 0)

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

Created: 4 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>

Fastest: N/A

Slowest: N/A

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