Ранее отвеченные вопросы здесь говорили, что это самый быстрый способ:
//nl is a NodeList
var arr = Array.prototype.slice.call(nl);
При тестировании моего браузера я обнаружил, что он более чем в 3 раза медленнее, чем этот:
var arr = [];
for(var i = 0, n; n = nl[i]; ++i) arr.push(n);
Они оба выдают одинаковый результат, но мне трудно поверить, что моя вторая версия - самый быстрый из возможных, тем более что здесь люди говорили иначе.
Это странная вещь в моем браузере (Chromium 6)? Или есть более быстрый способ?
РЕДАКТИРОВАТЬ: Для всех, кто заботится, я остановился на следующем (который, кажется, самый быстрый в каждом браузере, который я тестировал):
//nl is a NodeList
var l = []; // Will hold the array of Node's
for(var i = 0, ll = nl.length; i != ll; l.push(nl[i++]));
EDIT2: я нашел еще более быстрый способ
// nl is the nodelist
var arr = [];
for(var i = nl.length; i--; arr.unshift(nl[i]));
javascript
arrays
nodelist
jairajs89
источник
источник
arr[arr.length] = nl[i];
может быть быстрее, чем,arr.push(nl[i]);
поскольку он избегает вызова функции.var i = nl.length, arr = new Array(i); for(; i--; arr[i] = nl[i]);
Ответы:
Второй, как правило, работает быстрее в некоторых браузерах, но суть в том, что вы должны использовать его, потому что первый просто не кросс-браузерный. Хотя времена они меняют
@kangax ( IE 9 превью )
Пример:
источник
С ES6 у нас теперь есть простой способ создать массив из NodeList:
Array.from()
функция.источник
console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6]
Вот новый крутой способ сделать это с помощью оператора распространения ES6 :
источник
ERROR TypeError: el.querySelectorAll(...).slice is not a function
Некоторые оптимизации:
Код ( jsPerf ):
источник
Результаты будут полностью зависеть от браузера, чтобы дать объективный вердикт, мы должны сделать некоторые тесты производительности, вот некоторые результаты, вы можете запустить их здесь :
Chrome 6:
Firefox 3.6:
Firefox 4.0b2:
Safari 5:
IE9 Platform Preview 3:
источник
for (var i=o.length; i--;)
... цикл for в этих тестах переоценивал свойство длины на каждой итерации?Самый быстрый и кросс-браузер
Как я сравнил в
http://jsbin.com/oqeda/98/edit
* Спасибо @CMS за идею!
источник
В ES6 вы можете использовать:
Array.from
let array = Array.from(nodelist)
Оператор спреда
let array = [...nodelist]
источник
Теперь вы можете сделать document.querySelectorAll ('div'). ForEach (function () ...)
источник
NodeList
не менее, не работает, ноObject
это:Object.prototype.forEach = Array.prototype.forEach; document.getElementsByTagName("img").forEach(function(img) { alert(img.src); });
быстрее и короче:
источник
>>>0
? И почему бы не поместить назначения в первую часть цикла for?l
есть0
, цикл закончится, поэтому0
элемент th не будет скопирован (помните, что в индексе есть элемент0
)>>>
может не быть необходимости, но он используется, чтобы гарантировать, что длина нодлиста соответствует спецификации массива; это гарантирует, что это 32-разрядное целое число без знака. Проверьте это здесь ecma-international.org/ecma-262/5.1/#sec-15.4 Если вам нравится нечитаемый код, используйте этот метод с предложениями @ CamiloMartin!var
внутрь первой частиfor
цикла из-за «поднятия переменной». Объявлениеvar
будет «поднято» в верхнюю часть функции, даже еслиvar
строка появляется где-то внизу, и это может вызвать побочные эффекты, которые не очевидны из последовательности кода. Например , некоторые код в одной и той же функции происходит прежде , чем для цикла может зависеть отa
иl
будучи недекларируемой. Поэтому для большей предсказуемости объявите свои переменные в верхней части функции (или, если на ES6, используйтеconst
илиlet
вместо этого, которые не поднимаются).Прочтите этот пост здесь, в котором говорится об одном и том же. Из того, что я понял, дополнительное время может быть связано с ходом по цепочке прицелов.
источник
Array.prototype.slice
зависит от браузера. Интересно, какой алгоритм использует каждый из браузеров?Это функция, которую я использую в моем JS:
источник
Вот графики, обновленные на дату публикации («неизвестная платформа» - Internet Explorer 11.15.16299.0):
Исходя из этих результатов, кажется, что метод preallocate 1 является самой безопасной кросс-браузерной ставкой.
источник
Предполагая
nodeList = document.querySelectorAll("div")
, что это краткая форма преобразованияnodelist
в массив.Смотри, я использую это здесь .
источник