Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Clone array
(version: 3)
Array.from vs spread vs [].slice.call
Comparing performance of:
Array.from vs Spread vs [].slice.call
Created:
7 years ago
by:
Registered User
Go to the latest result
Tests:
Array.from
const arr = new Array(100) for (let i = 0; i < arr.length; i++) { arr[i] = i } const clone = Array.from(arr)
Spread
const arr = new Array(100) for (let i = 0; i < arr.length; i++) { arr[i] = i } const clone = [...arr]
[].slice.call
const arr = new Array(100) for (let i = 0; i < arr.length; i++) { arr[i] = i } const clone = [].slice.call(arr)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.from
Spread
[].slice.call
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:134.0) Gecko/20100101 Firefox/134.0
Browser/OS:
Firefox 134 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=586688" width="100%" height="500px"></iframe>
[].slice.call
2.1M/s
Spread
653K/s
Array.from
608K/s
View exact numbers
Test name
Executions per second
✓
[].slice.call
2,113,218 Ops/sec
Spread
653,185 Ops/sec
Array.from
608,474 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is tested on the provided JSON?** The provided JSON represents a JavaScript microbenchmark test case that compares three different approaches for cloning an array: 1. `Array.from()` 2. Spread operator (`...`) 3. `[].slice.call()` (also known as the "array slice" method) These approaches are compared in terms of their execution time and performance. **Options being compared:** * `Array.from()`: Creates a new array from an existing array or iterable. * Spread operator (`...`): Spreads the elements of one array to another array. * `[].slice.call()` (also known as "array slice"): Returns a new array containing all elements from the original array. **Pros and Cons:** 1. **Array.from()** * Pros: + Can create an array from any iterable (e.g., strings, objects). + More concise syntax. * Cons: + May have overhead due to the creation of a new array. 2. Spread operator (`...`): * Pros: + Fast and efficient for cloning arrays. + Can be used with other data types (e.g., strings, objects). * Cons: + May not work as expected if the spreadable value is an object or a function. 3. `[].slice.call()` (array slice): * Pros: + Fast and efficient for cloning arrays. * Cons: + Less concise syntax compared to `Array.from()` and spread operator. **Library used:** None. **Special JS feature or syntax:** None mentioned in the provided code. **Benchmark preparation code:** The benchmark preparation code creates a new array with 100 elements, populates it with numbers from 0 to 99, and then clones it using each of the three approaches being compared. The resulting cloned arrays are used as input for the benchmarking test. **Other alternatives:** There might be other ways to clone an array in JavaScript, such as using `Array.prototype.concat()` or `Buffer.from()`, but these are not part of the provided benchmark definition. Some alternative approaches could be: * Using a library like Lodash (e.g., `_cloneArray`) for cloning arrays. * Using a functional programming approach with `map` and `reduce` methods to clone an array. * Using a native method like `Int8Array.from()` or `Uint8Array.from()` for cloning arrays. However, these alternatives are not part of the standard JavaScript API and may have different performance characteristics compared to the approaches being compared in this benchmark.
Comments
Confirm delete:
Do you really want to delete benchmark?