Найефективніший спосіб перетворення HTMLCollection в масив

Чи існує більш ефективний спосіб перетворення HTMLCollection в масив, окрім повторення вмісту згаданої колекції та вручну натискання кожного елемента в масив?

var arr = Array.prototype.slice.call( htmlCollection )

матиме такий же ефект, використовуючи "рідний" код.

Редагувати

Так як це отримує багато думок, примітка (коментар PER @ Oriol) , що наступне більш короткий вираз ефективно еквівалентно:

var arr = [].slice.call(htmlCollection);

Але зауважте в коментарі @ JussiR, що на відміну від "багатослівної" форми, вона створює порожній, невикористаний і справді непридатний екземпляр масиву в процесі. Що компілятори з цього приводу роблять поза межами програми програміста.

Редагувати

З ECMAScript 2015 (ES 6) існує також Array.from :

var arr = Array.from(htmlCollection);

Редагувати

ECMAScript 2015 також надає оператор розповсюдження , який функціонально еквівалентний Array.from(хоча зауважте, що Array.fromпідтримує функцію відображення як другий аргумент).

var arr = [...htmlCollection];

Я підтвердив, що і вище, і вище NodeList.

Порівняння продуктивності для згаданих методів: http://jsben.ch/h2IFA

не впевнений, чи це найефективніше, але стислим синтаксисом ES6 може бути:

let arry = [...htmlCollection] 

Редагувати: Ще одне, з коментаря Chris_F:

let arry = Array.from(htmlCollection)

Я побачив більш стислий метод отримання Array.prototypeметодів загалом, який працює так само добре. Перетворення HTMLCollectionоб'єкта в Arrayоб'єкт показано нижче:

[] .slice.call (вашHTMLCollectionObject);

І, як згадувалося в коментарях, для старих веб-переглядачів, таких як IE7 і новіших, вам просто потрібно використовувати функцію сумісності, наприклад:

function toArray(x) {
    for(var i = 0, a = []; i < x.length; i++)
        a.push(x[i]);

    return a
}

Я знаю, що це старе питання, але я вважав, що прийнята відповідь була трохи неповною; тому я подумав, що кину це FWIW.

Для впровадження перехресного веб-переглядача я б придумував вам переглянути функцію prototype.js $A

скопійовано з 1.6.1 :

function $A(iterable) {
  if (!iterable) return [];
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

Він не використовується, Array.prototype.sliceймовірно, тому що він доступний не в кожному браузері. Я боюсь, що продуктивність дуже погана, тому що падіння - це петля JavaScript над iterable.

Це моє особисте рішення, засноване на інформації тут (цієї теми):

var Divs = new Array();    
var Elemns = document.getElementsByClassName("divisao");
    try {
        Divs = Elemns.prototype.slice.call(Elemns);
    } catch(e) {
        Divs = $A(Elemns);
    }

Де $ A описав Гарет Девіс у своєму дописі:

function $A(iterable) {
  if (!iterable) return [];
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

Якщо браузер підтримує найкращий спосіб, добре, інакше буде використовувати перехресний браузер.

Це працює у всіх браузерах, включаючи більш ранні версії IE.

var arr = [];
[].push.apply(arr, htmlCollection);

Оскільки jsperf на даний момент ще не працює, ось jsfiddle, який порівнює ефективність різних методів. https://jsfiddle.net/qw9qf48j/

Щоб ефективно перетворити масив у масив, ми можемо скористатись jQuery makeArray :

makeArray: Перетворення об’єкта, подібного до масиву, у справжній масив JavaScript.

Використання:

var domArray = jQuery.makeArray(htmlCollection);

Трохи додатково:

Якщо ви не хочете зберігати посилання на об’єкт масиву (більшість часу HTMLCollections динамічно змінюється, тому краще скопіювати їх в інший масив. Цей приклад зверніть пильну увагу на продуктивність:

var domDataLength = domData.length //Better performance, no need to calculate every iteration the domArray length
var resultArray = new Array(domDataLength) // Since we know the length its improves the performance to declare the result array from the beginning.

for (var i = 0 ; i < domDataLength ; i++) {
    resultArray[i] = domArray[i]; //Since we already declared the resultArray we can not make use of the more expensive push method.
}

Що таке масив?

HTMLCollection є "array-like"об'єктом, масив подібних об'єктів схожий на об'єкт масиву , але відсутній багато його визначення функціонально:

Об'єкти, схожі на масив, виглядають як масиви. Вони мають різні нумеровані елементи та властивість довжини. Але на цьому схожість зупиняється. Об'єкти, схожі на масив, не мають жодної з функцій Array, а цикли для входу навіть не працюють!