วิธีที่เร็วที่สุดในการแปลง JavaScript NodeList เป็น Array?

คำถามที่ตอบก่อนหน้านี้ที่นี่บอกว่านี่เป็นวิธีที่เร็วที่สุด:

//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++]));

แก้ไข 2: ฉันพบวิธีที่เร็วยิ่งขึ้น

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

อันที่สองมีแนวโน้มที่จะเร็วกว่าในเบราว์เซอร์บางตัว แต่ประเด็นหลักคือคุณต้องใช้เพราะเบราว์เซอร์แรกนั้นไม่ใช่เบราว์เซอร์ข้าม แม้ว่าพวกเขาจะเป็นเวลาของ Changin

@kangax (ดูตัวอย่าง IE 9 )

Array.prototype.sliceสามารถแปลงวัตถุโฮสต์บางตัว (เช่น NodeList) เป็นอาร์เรย์ซึ่งเป็นสิ่งที่เบราว์เซอร์สมัยใหม่ส่วนใหญ่สามารถทำได้ในขณะนี้

ตัวอย่าง:

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

ด้วย ES6 ตอนนี้เรามีวิธีง่ายๆในการสร้าง Array จาก NodeList: the Array.from()function

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

นี่คือวิธีใหม่ที่ยอดเยี่ยมในการใช้ES6 Spread :

let arr = [...nl];

การเพิ่มประสิทธิภาพบางอย่าง:

• บันทึกความยาวของ NodeList ในตัวแปร
• กำหนดความยาวของอาเรย์ใหม่อย่างชัดเจนก่อนการตั้งค่า
• เข้าถึงดัชนีแทนที่จะผลักหรือไม่ขยับ

รหัส ( jsPerf ):

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

ผลลัพธ์จะขึ้นอยู่กับเบราว์เซอร์อย่างสมบูรณ์เพื่อให้คำตัดสินตามวัตถุประสงค์เราต้องทำการทดสอบประสิทธิภาพบางอย่างนี่คือผลลัพธ์บางส่วนคุณสามารถเรียกใช้งานได้ที่นี่ :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

ดูตัวอย่างแพลตฟอร์ม IE9 3:

เบราว์เซอร์ที่เร็วและข้ามได้มากที่สุดคือ

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

อย่างที่ฉันเปรียบเทียบค่ะ

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

* ขอบคุณ @CMS สำหรับความคิด!

ใน ES6 คุณสามารถใช้:

• Array.from

  let array = Array.from(nodelist)

• ผู้ประกอบการแพร่กระจาย

  let array = [...nodelist]

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

ตอนนี้คุณสามารถทำได้ document.querySelectorAll ('div') forEach (function () ... )

เร็วและสั้น:

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

ลองอ่านโพสต์บล็อกนี้ที่นี่ซึ่งพูดถึงเรื่องเดียวกัน จากสิ่งที่ฉันรวบรวมเวลาเพิ่มเติมอาจต้องเกี่ยวข้องกับการเดินขึ้นห่วงโซ่ขอบเขต

นี่คือฟังก์ชั่นที่ฉันใช้ใน JS ของฉัน:

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

นี่คือแผนภูมิที่อัปเดต ณ วันที่โพสต์นี้ (แผนภูมิ "แพลตฟอร์มที่ไม่รู้จัก" คือ Internet Explorer 11.15.16299.0):

จากผลลัพธ์เหล่านี้ดูเหมือนว่าวิธี preallocate 1 เป็นการเดิมพันข้ามเบราว์เซอร์ที่ปลอดภัยที่สุด

สมมติว่าnodeList = document.querySelectorAll("div")นี่เป็นรูปแบบที่กระชับของการแปลงnodelistเป็นอาเรย์

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

เห็นฉันใช้มันนี่