Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
create array of nodes Array from vs slice vs push vs index vs spread
(version: 0)
Comparing performance of:
Array.from vs Array.slice vs Array.push vs Array[index] vs Array spread
Created:
2 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<ul id="my-test-ul"> </ul>
Script Preparation code:
var ul = document.getElementById('my-test-ul'); for(var i=0;i<1000;i++) { ul.appendChild(document.createElement('li')); } var nodeList = document.querySelectorAll('ul#my-test-ul > li');
Tests:
Array.from
const arr = Array.from(nodeList);
Array.slice
const arr = Array.prototype.slice.call(nodeList, 0);
Array.push
const amount = nodeList.length; const arr = []; for (let i = 0; i < amount; i += 1) arr.push(nodeList[i]);
Array[index]
const amount = nodeList.length; const arr = Array(amount); for (let i = 0; i < amount; i += 1) arr[i] = nodeList[i];
Array spread
const arr = [...nodeList];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
Array.from
Array.slice
Array.push
Array[index]
Array spread
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):
Let's break down the benchmark and its test cases. **Benchmark Description** The benchmark measures the performance of creating an array from a NodeList, using different methods: 1. `Array.from()` 2. `Array.prototype.slice.call()` 3. `Array.push()` with indexing 4. Direct indexing (`Array[index]`) 5. Array spread (`Array(...nodeList)`) **Methods Comparison** Here's a brief overview of each method and their pros and cons: 1. **`Array.from()`**: This method creates a new array from an iterable (in this case, a NodeList). It's a modern, concise way to create arrays. Pros: efficient, readable. Cons: may not be supported in older browsers. 2. **`Array.prototype.slice.call()`**: This method uses the `slice()` function to extract a subset of elements from the original array and then converts it to an array using `call()`. It's a more traditional way to create arrays. Pros: widely supported, no dependencies on modern features. Cons: less readable than `Array.from()`. 3. **`Array.push()` with indexing**: This method creates an array by pushing elements onto it using the `push()` function. The number of elements is determined by the length of the original NodeList. Pros: simple, efficient. Cons: may require extra iterations. 4. **Direct indexing (`Array[index]`)**: This method creates an array by assigning each element of the NodeList to a specific index in the new array. Pros: straightforward, easy to understand. Cons: may be slower than other methods due to indexing overhead. 5. **Array spread (`Array(...nodeList)`)**: This method uses the spread operator to create a new array from the original NodeList. It's similar to `Array.from()`. Pros: concise, readable. Cons: may not be supported in older browsers. **Library and Purpose** In this benchmark, `Array.prototype.slice.call()` relies on the built-in `slice()` function of the Array prototype, which is a standard part of the JavaScript language. **Special JS Feature or Syntax** There are no special JavaScript features or syntax used in this benchmark. The methods being compared are all part of the standard Array API and are supported by modern browsers. **Other Alternatives** If you wanted to test alternative methods for creating arrays, some examples could be: * Using `Array.isArray()` to check if an object is an array and then using its length property to determine how many elements to create. * Using a library like Lodash or Ramda that provides more functional programming-style array creation functions. * Testing different data structures, such as TypedArrays (e.g., `Int32Array`) or binary search trees. Keep in mind that these alternative methods may not be representative of real-world use cases and may introduce additional overhead or dependencies.
Related benchmarks:
spread vs slice vs splice
Splice vs Spread to insert at beginning of array
Splice vs Spread vs Unshift to insert at beginning of array
Splice vs Spread vs Unshift to insert at beginning of array (fixed from slice)
Splice vs Spread vs Unshift vs Push to insert at beginning of array
Comments
Confirm delete:
Do you really want to delete benchmark?