Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from vs Spread on NodeList
(version: 0)
let wrapper = document.createElement("ul") for (let i=1;i<=1e6;i++) wrapper.append(document.createElement("li")) subject = wrapper.querySelector("li")
Comparing performance of:
Array.from vs Spread
Created:
4 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
let wrapper = document.createElement("ul") for (let i = 1; i <= 1e6; i++) wrapper.append(document.createElement("li")) subject = wrapper.querySelectorAll("li")
Tests:
Array.from
var other = Array.from(subject);
Spread
var other = [...subject];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Array.from
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 provided JSON data and explain what's being tested. **Benchmark Definition** The benchmark measures the performance difference between using `Array.from()` and the spread operator (`...`) on a NodeList. A NodeList is an ordered collection of nodes, similar to an array in JavaScript. In this specific benchmark, a large unordered list (1000 elements) is created dynamically using the Document Object Model (DOM). The test then extracts the first element from this list using both methods: * `Array.from(subject)` * `[...subject]` **Options Compared** The two options being compared are: 1. **`Array.from()`**: A method that converts an iterable (like a NodeList) into a new, static array. This method is useful when you need to work with the resulting array as a whole. 2. **Spread Operator (`...`)**: An operator that extracts elements from an iterable (like a NodeList) and creates a new array. This method is often preferred in modern JavaScript development because it's more concise and expressive. **Pros and Cons** * **`Array.from()`**: + Pros: Can be more explicit about the conversion process, easier to read for some developers. + Cons: Creates a new array, which can be memory-intensive for large datasets. Also, it doesn't modify the original iterable. * **Spread Operator (`...`)**: + Pros: More concise and expressive, doesn't create a new array (it returns an iterator), and modifies the original iterable. + Cons: Can be less explicit about the conversion process, might be less readable for some developers. **Library and Special JS Feature** There is no specific library used in this benchmark. However, it's worth noting that both `Array.from()` and the spread operator rely on modern JavaScript features like iterators and array-like objects. No special JavaScript feature or syntax is being tested in this benchmark. **Alternative Approaches** Other alternatives to compare with these two methods could be: * Using `slice()`: A method that creates a shallow copy of a portion of an array. * Using a for loop: A traditional, explicit way to iterate over the NodeList and extract the first element. * Using `map()` or `filter()` on the NodeList itself. However, using these alternatives would likely be less concise and might not provide a fair comparison with the spread operator. If you're interested in exploring alternative approaches or want to dive deeper into this benchmark, I'd be happy to help!
Related benchmarks:
Array.prototype.slice Versus Spread Operator
Splice vs Spread to insert at beginning of array
unshift vs spread
spread vs ArrayFrom
toSpliced vs Spread
Comments
Confirm delete:
Do you really want to delete benchmark?