Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.concat vs spread operator on Children
(version: 1)
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 children = document.body.children
Tests:
slice
var other = Array.prototype.slice.call(children);
spread operator
var other = [ ...children ]
push apply into empty array
var other = []; [].push.apply(other, children)
Array.from
var other = Array.from(children);
Object.values
var other = Object.values(children);
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.1:latest
, generated one year ago):
Let's dive into the benchmark test case provided. **What is being tested?** This test case compares the performance of five different methods for creating a new array by copying the elements from another array (`children`). The methods being compared are: 1. `Array.prototype.slice.call(children)` 2. `[ ...children ]` (spread operator) 3. `[]; Array.prototype.push.apply(other, children)` (push apply into empty array) 4. `Array.from(children)` 5. `Object.values(children)` **What options are compared?** The test case compares the execution time of these five methods for creating a new array by copying the elements from another array (`children`). The execution time is measured in executions per second. **Pros and Cons:** 1. **`Array.prototype.slice.call(children)`** * Pros: + Supported by older browsers (before ES6) + Can be used to copy any type of collection (not just arrays) * Cons: + Slow compared to modern methods + Requires calling `call()` method on `slice()` function 2. **`[ ...children ]` (spread operator)** * Pros: + Fast and efficient + Supported by modern browsers (ES6+) + Simple and easy to read code * Cons: + Not supported in older browsers (before ES6) 3. **`[]; Array.prototype.push.apply(other, children)`** * Pros: + Fast and efficient (similar to spread operator) + Supported by modern browsers (ES5+) * Cons: + Requires creating an empty array first 4. **`Array.from(children)`** * Pros: + Fast and efficient + Supported by modern browsers (ES6+) + Simple and easy to read code * Cons: + Not supported in older browsers (before ES6) 5. **`Object.values(children)`** * Pros: + Not applicable here, as it returns an array of property values, not a new array containing all elements. **Other considerations:** * The test case uses the `children` variable, which is assumed to be an HTMLCollection or NodeList obtained from `document.body.children`. * The test results are specific to Chrome 66 on Mac OS X 10.13.4. * The test case does not consider other factors that may affect performance, such as browser cache, JavaScript engine optimization, or CPU architecture. **Library and special JS feature:** * No external libraries are used in this test case. * The spread operator (`[ ...children ]`) is a special JavaScript feature introduced in ES6 (2015). **Alternatives:** * Other methods for creating a new array by copying elements from another array include `Array.prototype.concat()` and using a loop to push each element into the new array. However, these methods are not compared in this specific test case. I hope this explanation helps!
Related benchmarks:
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator (add)
Array.prototype.concat vs spread operator (fix)
Array.prototype.concat vs spread operator on large array
Array.prototype.concat vs spread operator on small array
Comments
Confirm delete:
Do you really want to delete benchmark?