Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from(NodeList).map vs [...NodeList].map vs map.call(NodeList) vs. NodeList#map copied from Array
(version: 0)
Different methods of mapping a node list.
Comparing performance of:
Array.from(NodeList).map vs [...NodeList].map vs map.call(NodeList) vs NodeList#map
Created:
5 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
NodeList.prototype.map = Array.prototype.map; window.list = document.querySelectorAll('div'); window.mapper = node => node.outerHTML;
Tests:
Array.from(NodeList).map
Array.from(list).map(mapper);
[...NodeList].map
[...list].map(mapper);
map.call(NodeList)
Array.prototype.map.call(list, mapper);
NodeList#map
list.map(mapper);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Array.from(NodeList).map
[...NodeList].map
map.call(NodeList)
NodeList#map
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 benchmark and its test cases. **Benchmark Definition:** The benchmark is designed to compare different methods of mapping a NodeList, which is a collection of DOM nodes. The NodeList prototype method `map()` is compared with four alternative approaches: 1. `Array.from(NodeList).map()` 2. `[...NodeList].map()` 3. `Array.prototype.map.call(NodeList)` 4. `list.map(mapper)` where `list` is a reference to the NodeList and `mapper` is a function that converts each node to its outerHTML. **Options Compared:** 1. **Array.from(NodeList).map()**: This approach uses the `Array.from()` method to create an array from the NodeList, and then calls the `map()` method on it. 2. **[...NodeList].map()**: This approach uses the spread operator (`[...]`) to convert the NodeList to an array, and then calls the `map()` method on it. 3. **Array.prototype.map.call(NodeList)**: This approach uses the `call()` method to bind the `map()` method of the Array prototype to the NodeList as its this value. 4. **list.map(mapper)**: This approach directly calls the `map()` method on the NodeList reference, passing a function (`mapper`) that converts each node to its outerHTML. **Pros and Cons of Each Approach:** 1. **Array.from(NodeList).map()**: * Pros: Creates an array from the NodeList, which can be more predictable and efficient for certain use cases. * Cons: May incur additional overhead due to the creation of a new array. 2. **[...NodeList].map()**: * Pros: Avoids creating an intermediate array and is often faster and more memory-efficient. * Cons: Requires support for the spread operator (`[...]`) in older browsers. 3. **Array.prototype.map.call(NodeList)**: * Pros: Provides a clear and explicit way to call `map()` on a NodeList, even if it doesn't have the prototype chain. * Cons: May be less intuitive and readable than the other approaches. 4. **list.map(mapper)**: * Pros: Directly calls the `map()` method on the NodeList reference, which can be more concise and expressive. * Cons: May not be as efficient or predictable as the first two approaches. **Special Considerations:** The benchmark uses a function (`mapper`) to convert each node to its outerHTML. This is likely done for testing purposes only, as it's not a typical use case for the `map()` method. **Library Usage:** None of the test cases explicitly use any external libraries. **Special JS Features or Syntax:** The spread operator (`[...]`) is used in one of the approaches (`[...NodeList].map()`). This feature was introduced in ECMAScript 2015 and has been widely adopted by modern browsers. **Alternatives:** Other ways to map a NodeList include: 1. Using a loop with `forEach()` or `for` loops. 2. Using an array constructor like `new Array()` followed by `push()` or spread operator (`[...list]`) followed by `map()`. 3. Using a library like Lodash or Ramda, which provide utility functions for mapping arrays and NodeList. In summary, the benchmark compares four different approaches to mapping a NodeList in JavaScript, highlighting the pros and cons of each approach and considering special considerations, library usage, and alternative methods.
Related benchmarks:
Array.from(NodeList).map vs [...NodeList].map vs map.call(NodeList) vs. NodeList#map copied from Array vs for loop
Array.from() vs Array.prototype.map.call() on NodeList
Array.from->map vs Array.prototype.map.call
Array.from().map vs Array.prototype.map.call
Comments
Confirm delete:
Do you really want to delete benchmark?