Cara tercepat untuk mengonversi NodeList JavaScript ke Array?

Pertanyaan yang sebelumnya dijawab di sini mengatakan bahwa ini adalah cara tercepat:

//nl is a NodeList
var arr = Array.prototype.slice.call(nl);

Dalam melakukan pembandingan pada browser saya, saya menemukan bahwa ini lebih dari 3 kali lebih lambat dari ini:

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

Keduanya menghasilkan output yang sama, tetapi saya merasa sulit untuk percaya bahwa versi kedua saya adalah cara tercepat yang mungkin, terutama karena orang mengatakan sebaliknya di sini.

Apakah ini kekhasan di browser saya (Chromium 6)? Atau ada cara yang lebih cepat?

EDIT: Untuk siapa pun yang peduli, saya memilih yang berikut (yang tampaknya paling cepat di setiap browser yang saya uji):

//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: Saya menemukan cara yang lebih cepat

// nl is the nodelist
var arr = [];
for(var i = nl.length; i--; arr.unshift(nl[i]));

Yang kedua cenderung lebih cepat di beberapa browser, tetapi poin utamanya adalah Anda harus menggunakannya karena yang pertama bukan cross-browser. Meskipun Masa Mereka Berubah

@kangax ( pratinjau IE 9 )

Array.prototype.slice sekarang dapat mengonversi objek host tertentu (mis. NodeList) menjadi array - sesuatu yang sebagian besar browser modern mampu lakukan selama beberapa saat.

Contoh:

Array.prototype.slice.call(document.childNodes);

Dengan ES6, kita sekarang memiliki cara sederhana untuk membuat Array dari NodeList: Array.from()fungsi.

// nl is a NodeList
let myArray = Array.from(nl)

Berikut cara keren baru untuk melakukannya menggunakan operator penyebaran ES6 :

let arr = [...nl];

Beberapa optimasi:

• simpan panjang NodeList dalam sebuah variabel
• secara eksplisit mengatur panjang array baru sebelum pengaturan.
• mengakses indeks, alih-alih mendorong atau melepaskan.

Kode ( jsPerf ):

var arr = [];
for (var i = 0, ref = arr.length = nl.length; i < ref; i++) {
 arr[i] = nl[i];
}

Hasilnya akan sepenuhnya tergantung pada browser, untuk memberikan putusan yang obyektif, kita harus membuat beberapa tes kinerja, berikut adalah beberapa hasil, Anda dapat menjalankannya di sini :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

Pratinjau Platform IE9 3:

Browser paling cepat dan lintas adalah

for(var i=-1,l=nl.length;++i!==l;arr[i]=nl[i]);

Seperti yang saya membandingkan di

http://jsbin.com/oqeda/98/edit

* Terima kasih @CMS untuk idenya!

Di ES6 Anda dapat menggunakan:

• Dari Array

  let array = Array.from(nodelist)

• Operator yang tersebar

  let array = [...nodelist]

NodeList.prototype.forEach = Array.prototype.forEach;

Sekarang Anda dapat melakukan document.querySelectorAll ('div'). ForEach (function () ...)

lebih cepat dan lebih pendek:

// nl is the nodelist
var a=[], l=nl.length>>>0;
for( ; l--; a[l]=nl[l] );

Lihat posting blog ini di sini yang membahas hal yang sama. Dari apa yang saya kumpulkan, waktu tambahan mungkin ada hubungannya dengan berjalan di rantai lingkup.

Ini adalah fungsi yang saya gunakan di JS saya:

function toArray(nl) {
    for(var a=[], l=nl.length; l--; a[l]=nl[l]);
    return a;
}

Berikut adalah bagan yang diperbarui pada tanggal posting ini (bagan "platform tidak dikenal" adalah Internet Explorer 11.15.16299.0):

Dari hasil ini, tampaknya metode preallocate 1 adalah taruhan lintas-browser yang paling aman.

Dengan asumsi nodeList = document.querySelectorAll("div"), ini adalah bentuk ringkas dari konversi nodelistke array.

var nodeArray = [].slice.call(nodeList);

Lihat saya menggunakannya di sini .