Cara paling efisien untuk mengonversi HTMLCollection ke Array

Apakah ada cara yang lebih efisien untuk mengubah HTMLCollection ke Array, selain iterasi melalui isi dari koleksi tersebut dan secara manual mendorong setiap item ke dalam array?

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

akan memiliki efek yang sama menggunakan kode "asli".

Edit

Karena ini mendapat banyak pandangan, perhatikan (per @ oriol's komentar) bahwa ungkapan yang lebih ringkas berikut ini secara efektif setara:

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

Tetapi perhatikan per komentar JussiR, bahwa tidak seperti bentuk "verbose", itu membuat contoh array kosong, tidak digunakan, dan memang tidak dapat digunakan dalam proses. Apa yang dilakukan kompiler tentang hal ini adalah di luar ken programmer.

Edit

Sejak ECMAScript 2015 (ES 6) ada juga Array.from :

var arr = Array.from(htmlCollection);

Edit

ECMAScript 2015 juga menyediakan operator spread , yang secara fungsional setara dengan Array.from(meskipun catatan yang Array.frommendukung fungsi pemetaan sebagai argumen kedua).

var arr = [...htmlCollection];

Saya telah mengkonfirmasi bahwa kedua hal di atas berfungsi NodeList.

Perbandingan kinerja untuk metode yang disebutkan: http://jsben.ch/h2IFA

tidak yakin apakah ini yang paling efisien, tetapi sintaksis ES6 singkatnya mungkin:

let arry = [...htmlCollection] 

Sunting: Yang lain, dari komentar Chris_F:

let arry = Array.from(htmlCollection)

Saya melihat metode yang lebih ringkas untuk mendapatkan Array.prototypemetode secara umum yang juga berfungsi. Mengubah HTMLCollectionobjek menjadi Arrayobjek ditunjukkan di bawah ini:

[] .slice.call (yourHTMLCollectionObject);

Dan, seperti disebutkan dalam komentar, untuk browser lama seperti IE7 dan sebelumnya, Anda hanya perlu menggunakan fungsi kompatibilitas, seperti:

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

    return a
}

Saya tahu ini adalah pertanyaan lama, tetapi saya merasa jawaban yang diterima sedikit tidak lengkap; jadi saya pikir saya akan membuang ini di sana FWIW.

Untuk implementasi lintas browser saya sarankan Anda melihat fungsi prototype.js $A

disalin dari 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;
}

Mungkin tidak digunakan Array.prototype.slicekarena tidak tersedia di setiap browser. Saya khawatir kinerjanya sangat buruk karena ada kembali adalah javascript loop di atas iterable.

Ini adalah solusi pribadi saya, berdasarkan informasi di sini (utas ini):

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

Di mana $ A dijelaskan oleh Gareth Davis dalam jabatannya:

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;
}

Jika browser mendukung cara terbaik, ok, kalau tidak akan menggunakan browser lintas.

Ini berfungsi di semua browser termasuk versi IE sebelumnya.

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

Karena jsperf masih turun saat ini, berikut adalah jsfiddle yang membandingkan kinerja berbagai metode. https://jsfiddle.net/qw9qf48j/

Untuk mengonversi array-suka menjadi array dengan cara yang efisien, kita dapat menggunakan jQuery makeArray :

makeArray: Konversi objek mirip array menjadi array JavaScript yang benar.

Pemakaian:

var domArray = jQuery.makeArray(htmlCollection);

Sedikit tambahan:

Jika Anda tidak ingin tetap merujuk ke objek array (sebagian besar waktu HTMLCollections berubah secara dinamis sehingga lebih baik untuk menyalinnya ke array lain, Contoh ini memperhatikan kinerja:

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.
}

Seperti apa array itu?

HTMLCollection adalah "array-like"objek, array seperti benda mirip dengan objek array, tetapi kehilangan banyak definisi fungsional nya:

Objek seperti array terlihat seperti array. Mereka memiliki berbagai elemen bernomor dan properti panjang. Tapi di situlah kesamaan berhenti. Objek seperti array tidak memiliki fungsi Array, dan loop for-in bahkan tidak berfungsi!