Benchmark: Array.prototype.concat vs spread operator on Classlist

Script Preparation code:

var classes = document.body.querySelector('[class]').classList

Tests:

slice
var other = Array.prototype.slice.call(classes);
spread operator
var other = [ ...classes ]
push apply into empty array
var other = []; [].push.apply(other, classes)
Array.from
var other = Array.from(classes);
Object.values
var other = Object.values(classes);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
spread operator
push apply into empty array
Array.from
Object.values

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares different approaches to convert an HTML class list to an array in JavaScript. The test cases use various methods, including `Array.prototype.slice.call()`, spread operator (`...`), `push.apply()` into an empty array, `Array.from()`, and `Object.values()`. The goal is to determine which method is the most efficient.

**Options Compared**

The benchmark compares the following options:

1. **`Array.prototype.slice.call(classes)`**: This method uses the `slice()` method to extract a portion of the class list as an array, and then calls the `call()` method to convert it into an actual array.
2. **Spread Operator (`...`)**: This method uses the spread operator to create a new array from the class list.
3. **`push.apply(other, classes)`**: This method uses the `apply()` method to call the `push()` method on an empty array with the class list as its argument.
4. **`Array.from(classes)`**: This method uses the `from()` method to create a new array from the class list.
5. **`Object.values(classes)`**: This method uses the `values()` method to get a value iterator for the class list, and then converts it into an array.

**Pros and Cons of Each Approach**

1. **`Array.prototype.slice.call(classes)`**:
	* Pros: Simple and widely supported. Can be used in older browsers.
	* Cons: May be slower than other methods due to the extra steps involved.
2. **Spread Operator (`...`)**:
	* Pros: Modern, efficient, and concise.
	* Cons: Only supported in modern browsers (ES6+).
3. **`push.apply(other, classes)`**:
	* Pros: Efficient, as it avoids creating an intermediate array.
	* Cons: May be less readable due to the use of `apply()`.
4. **`Array.from(classes)`**:
	* Pros: Modern and efficient, with good browser support (ES6+).
	* Cons: May not be as well-known or widely supported as other methods.
5. **`Object.values(classes)`**:
	* Pros: Simple and concise, with good browser support (modern browsers).
	* Cons: May not be as efficient as other methods.

**Special Considerations**

The benchmark uses the `classList` property to access the class list of an HTML element. This is a common pattern in modern web development.

The test cases use different libraries and features that may affect the results, such as:

* `Chrome 66`: The browser version used for testing.
* `Windows NT 10.0; Win64; x64`: The device platform and operating system used for testing.

**Other Alternatives**

If none of these methods are suitable for your use case, you may consider using other approaches, such as:

* Using a library like Lodash or Array.prototype.map() to convert the class list to an array.
* Using a more specialized library like jQuery or Zepto, which provide additional functionality for working with HTML elements.

In conclusion, the spread operator (`...`) and `Array.from(classes)` are likely to be the most efficient methods in modern browsers, while the other approaches may be less efficient or require additional libraries.

Latest run results:

Run details: (Test run date: 6 years ago)

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

Browser/OS: Chrome 66 on Windows

View result in a separate tab

Test name	Executions per second
slice	256590.7 Ops/sec
spread operator	480849.5 Ops/sec
push apply into empty array	1147929.8 Ops/sec
Array.from	369462.1 Ops/sec
Object.values	124244.7 Ops/sec

Related benchmarks:

Array.prototype.concat vs spread operator on Classlist (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: slice vs spread operator vs push apply into empty array vs Array.from vs Object.values

Created: 6 years ago by: Registered User

Jump to the latest result

slice

spread operator

push apply into empty array

Array.from

Object.values

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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