Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Array.from() vs Rest operator ([...])
(version: 0)
Benchmark.js
Comparing performance of:
Array.from() vs Spread [...]
Created:
8 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<ul class="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>
Tests:
Array.from()
for (let i=0; i < 100; i++) { const items = Array.from(document.querySelectorAll('.list li')); const values = items.map(i => i.textContent); }
Spread [...]
for (let i=0; i < 100; i++) { const items = [...document.querySelectorAll('.list li')]; const values = items.map(i => i.textContent); }
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:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:126.0) Gecko/20100101 Firefox/126.0
Browser/OS:
Firefox 126 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=524408" width="100%" height="500px"></iframe>
Spread [...]
7K/s
Array.from()
6K/s
View exact numbers
Test name
Executions per second
✓
Spread [...]
6,582 Ops/sec
Array.from()
6,414 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Overview** The benchmark compares two approaches to convert an HTML list to an array: `Array.from()` and the spread operator (`[...]`). The test case uses an existing library, jQuery, which is not explicitly mentioned in the provided code but is implied by the use of `document.querySelectorAll()`. We'll discuss the pros and cons of each approach as well as other considerations. **Benchmark Definitions** The benchmark consists of two individual test cases: 1. **Array.from()**: This test case uses `Array.from()` to convert an HTML list to an array. The script prepares the HTML by creating a `<ul>` element with five `<li>` elements, and then uses `document.querySelectorAll()` to select all `<li>` elements. 2. **Spread [...]**: This test case uses the spread operator (`[...]`) to achieve the same result as `Array.from()`. Again, the script prepares the HTML in the same way. **Pros and Cons** Both approaches have their advantages: * **Array.from()**: * Pros: * Well-established method with good browser support. * More explicit and readable code. * Can be used for other array-related operations (e.g., `Array.from([1, 2, 3])`). * Cons: * Requires the polyfill or native implementation of `Array.from()` in older browsers. * **Spread [...]**: * Pros: * More concise and expressive code. * Native support in modern browsers (ES6+). * Can be used for other spread-related operations (e.g., `{...obj, ...arr}`). **Other Considerations** In addition to the pros and cons mentioned above, consider the following factors when choosing between `Array.from()` and the spread operator: * **Browser Support**: The spread operator has better support in modern browsers. If you need to target older browsers, use `Array.from()`. * **Performance**: Modern JavaScript engines (e.g., V8) are optimized for the spread operator. However, if you're targeting very old browsers or need better performance for specific workloads, `Array.from()` might be a better choice. * **Code Readability and Maintainability**: Choose the approach that makes your code more readable and maintainable. **Library Usage** The benchmark uses jQuery's `document.querySelectorAll()` method to select HTML elements. While not explicitly mentioned in the provided code, this is an example of using an existing library for DOM manipulation. **Special JavaScript Features/Syntax** There are no special JavaScript features or syntaxes used in these test cases. **Alternatives** If you're looking for alternative approaches to convert an HTML list to an array: * **`NodeList.prototype.item()`**: An older method that allows iterating over a `NodeList` object. * **`Array.from(NodeList)`**: A polyfill or native implementation of `Array.from()` for older browsers. Keep in mind that these alternatives might have different performance characteristics and usage patterns compared to `Array.from()` and the spread operator.
Related benchmarks
Array.from() vs new Array()
Slice vs Map (jv)
Array() vs Array.from() fill
Array.from() vs new Array() with index
Comments
Confirm delete:
Do you really want to delete benchmark?