Optimal Methods for Converting JavaScript NodeList to Array: From Historical Approaches to Modern Practices

Historical Context of NodeList and Array Conversion

In the early stages of JavaScript development, developers often needed to convert array-like objects such as NodeList into true arrays to utilize array-specific methods like map, filter, and reduce. Traditional methods included using Array.prototype.slice.call(nl) and for-loops combined with the push method. However, these methods exhibited significant variations in performance and compatibility across different browsers.

Performance Analysis of Traditional Conversion Methods

The community initially widely regarded Array.prototype.slice.call(nl) as the fastest conversion approach, but actual benchmarking revealed that in some browsers, such as Chromium 6, a simple for-loop was faster:

var arr = [];
for(var i = 0, n; n = nl[i]; ++i) arr.push(n);

This discrepancy primarily stems from differing levels of optimization for Array.prototype.slice across browser engines. The for-loop directly manipulates the array, avoiding the overhead of prototype chain lookups, thus performing better in certain environments.

Modern ES6 Conversion Solutions

With the widespread adoption of ECMAScript 6, JavaScript introduced more concise and efficient array conversion methods:

Array.from() Method

Array.from() is specifically designed for array-like objects and iterables, offering clear syntax and excellent performance:

let myArray = Array.from(nl);

This method internally optimizes the conversion process and supports all objects conforming to the iterable protocol, including NodeList, HTMLCollection, and Set.

Spread Operator [...]

The spread operator provides another intuitive conversion approach:

let arr = [...nl];

This method also relies on the iterable protocol, resulting in concise and readable code, making it a recommended practice in modern JavaScript development.

Choosing Between Direct Iteration and Conversion

Since 2021, NodeList natively supports the forEach method, covering approximately 95% of desktop and mobile browsers:

document.querySelectorAll('img').forEach(highlight);

If only iteration is needed without array-specific features, using forEach directly can avoid unnecessary conversion overhead. However, conversion to an array remains essential in scenarios requiring array methods.

Compatibility and Best Practice Recommendations

For modern projects, prioritize Array.from() or the spread operator for better readability and maintainability. If support for older browsers is required, consider the following strategies:

• Use transpilers like Babel to convert ES6 code to ES5
• Provide polyfills for environments lacking Array.from support
• Test different methods in target environments for performance-sensitive scenarios

Practical Application Example

The following example demonstrates converting all div elements on a page using Array.from():

let nodelist = document.querySelectorAll('div');
let my_arr = Array.from(nodelist);
console.log(my_arr);
for (let val of my_arr) {
    console.log(val);
}

This approach is not only applicable to NodeList but also to other array-like structures, such as the arguments object and custom iterable objects.

Conclusion

The methods for converting NodeList to array in JavaScript have evolved from traditional hacks to modern standards. Developers should select the appropriate method based on project requirements, target browser environments, and performance needs. In most modern applications, Array.from() and the spread operator offer the best comprehensive solutions.