Наибыстрейший способ преобразования NodeList в Array в JS

Быстрый ответ

Для преобразования NodeList в массив лучше всего подходит оператор распространения ...:

const nodeArray = [...document.querySelectorAll('div')];

Важность скорости: традиционный цикл for

Если величина NodeList большая и скорость обработки критична, стоит прибегнуть к проверенному временем циклу for. Он, конечно, не так изящен, как Array.from():

const nodeList = document.querySelectorAll('div');
const nodeArray = []; 
for (let i = 0; i < nodeList.length; i++) {
  nodeArray.push(nodeList[i]); 
}

Цикл можно ускорить, сохранив длину NodeList в отдельную переменную или вычислив длину массива до запуска цикла.

Применяем ES6: Array.from()

Этот современный метод позволяет преобразовать NodeList в массив всего одной строкой:

const nodeArray = Array.from(document.querySelectorAll('div'));

Обратите внимание, что он требует поддержки ES6.

Будем лаконичными: оператор распространения

Для небольших по размеру NodeList и сторонников краткости само выражение идеально подходит оператор распространения ...:

const nodeArray = [...document.querySelectorAll('div')];

Как и Array.from(), он поддерживается современными браузерами, начиная с ES6.

Использование метода push или индексов?

Иногда использование индексов для прямого присваивания элементов массива может оказаться более быстрым, чем push:

const nodeList = document.querySelectorAll('div');
const nodeArray = new Array(nodeList.length);
for (let i = 0; i < nodeList.length; i++) {
  nodeArray[i] = nodeList[i]; 
}

Избегайте ненужных преобразований

Прежде чем преобразовывать NodeList в массив, подумайте, нужно ли это в самом деле. Метод nodeList.forEach() позволяет выполнять итерации без необходимости преобразования:

document.querySelectorAll('div').forEach(node => {
  console.log(node); 
});

Проверьте производительность

Инструменты вроде jsPerf помогут определить, какой метод работает быстрее в вашем конкретном случае: Array.from(), оператор распространения или цикл for.

Не ограничивайтесь браузерами!

Если среди вашей аудитории есть те, кто все еще использует IE11, вам нужны будут полифиллы для Array.from() и других методов из ES6.

Избегайте использования устаревших методов

Методы вроде Array.prototype.slice.call() сегодня используются все реже, когда есть более современные и эффективные подходы.

Визуализация

Продемонстрируем преобразование NodeList в массив на жизненном примере:

nodeList = document.querySelectorAll("div"); // 🏠 для узлов DOM

Узлы — это наши пассажиры 🚶‍♂️🚶🚶‍♀️, которых мы хотим перевезти с платформы на поезд — наш массив:

🚶‍♂️🚶🚶‍♀️🛤️ <== NodeList
🚂[🚶‍♂️, 🚶, 🚶‍♀️] <== Массив

Использование оператора распространения ... — это как мгновенное перемещение всех пассажиров на борт поезда 🚀:

array = [...nodeList]; // Все на местах!

Это быстрый и современный подход, подобно скоростному поезду, который перевезет пассажиров без задержек с максимальной эффективностью. 🚄💨

Совместимость с браузерами: вы в игре или нет?

Обязательно проверьте, поддерживает ли браузер, которым пользуются ваши пользователи, последние возможности ES6 и приготовьте полифиллы, если они нужны.

Выбор наилучшего инструмента для вашего случая

При выборе способа преобразования обратите внимание на читаемость кода, совместимость с браузерами и производительность.

Полезные материалы

1. NodeList – Web APIs | MDN — полная информация о NodeList.
2. Fastest way to convert JavaScript NodeList to Array? – Stack Overflow — обсуждение лучших практик.
3. ECMAScript 2015 Language Specification – ECMA-262 6th Edition — спецификация оператора распространения.
4. Elements kinds in V8 · V8 — оптимизация производительности массивов.
5. Array.from() – JavaScript | MDN — документация по методу Array.from().
6. Iterating over arrays and objects in JavaScript — различные способы итерации.
7. Shadow DOM v1 – Self-Contained Web Components | Articles | web.dev — работа с NodeList в контексте Shadow DOM.