Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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:
8 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (5)
Previous results
Fork
Test case name
Result
slice
spread operator
push apply into empty array
Array.from
Object.values
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**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.
Related benchmarks:
Array.prototype.concat vs spread operator on NodeList
Array.prototype.concat vs spread operator on NodeList 2
Array.prototype.concat vs spread operator (add)
Array.prototype.concat vs spread operator (fix)
Comments
Confirm delete:
Do you really want to delete benchmark?