Cách nhanh nhất để chuyển đổi JavaScript NodeList sang Array?

Các câu hỏi được trả lời trước đây ở đây nói rằng đây là cách nhanh nhất:

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

Khi đo điểm chuẩn trên trình duyệt của tôi, tôi thấy rằng nó chậm hơn 3 lần so với điều này:

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

Cả hai đều sản xuất cùng một đầu ra, nhưng tôi thấy khó tin rằng phiên bản thứ hai của tôi là cách nhanh nhất có thể, đặc biệt là vì mọi người đã nói khác ở đây.

Đây có phải là một trò chơi trong trình duyệt của tôi (Chromium 6) không? Hay là có một cách nhanh hơn?

EDIT: Đối với bất kỳ ai quan tâm, tôi đã giải quyết các vấn đề sau (dường như là nhanh nhất trong mọi trình duyệt mà tôi đã thử nghiệm):

//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: Tôi đã tìm thấy một cách thậm chí nhanh hơn

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

Cái thứ hai có xu hướng nhanh hơn trong một số trình duyệt, nhưng điểm chính là bạn phải sử dụng nó vì cái thứ nhất không phải là trình duyệt chéo. Mặc dù The Times They are a-Changin '

@ Khangax ( xem trước IE 9 )

Array.prototype.slice hiện có thể chuyển đổi một số đối tượng máy chủ (ví dụ: NodeList) thành mảng - điều mà phần lớn các trình duyệt hiện đại đã có thể thực hiện trong một thời gian dài.

Thí dụ:

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

Với ES6, giờ đây chúng ta có một cách đơn giản để tạo Mảng từ NodeList: Array.from()hàm.

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

Đây là một cách thú vị mới để sử dụng toán tử lây lan ES6 :

let arr = [...nl];

Một số tối ưu hóa:

• lưu chiều dài của NodeList trong một biến
• thiết lập rõ ràng độ dài của mảng mới trước khi cài đặt.
• truy cập các chỉ số, thay vì đẩy hoặc không di chuyển.

Mã ( jsPerf ):

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

Kết quả sẽ hoàn toàn phụ thuộc vào trình duyệt, để đưa ra phán quyết khách quan, chúng tôi phải thực hiện một số thử nghiệm hiệu suất, đây là một số kết quả, bạn có thể chạy chúng ở đây :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

Xem trước nền tảng IE9 3:

Trình duyệt nhanh nhất và nhanh nhất là

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

Như tôi đã so sánh trong

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

* Cảm ơn @CMS vì ý tưởng!

Trong ES6, bạn có thể sử dụng:

• Array.from

  let array = Array.from(nodelist)

• Toán tử trải

  let array = [...nodelist]

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

Bây giờ bạn có thể làm document.querySelector ALL ('div'). ForEach (function () ...)

nhanh hơn và ngắn hơn:

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

Kiểm tra bài viết blog này ở đây nói về điều tương tự. Từ những gì tôi thu thập được, thời gian thêm có thể phải làm với việc đi lên chuỗi phạm vi.

Đây là chức năng tôi sử dụng trong JS của mình:

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

Dưới đây là các biểu đồ được cập nhật kể từ ngày đăng bài này (biểu đồ "nền tảng không xác định" là Internet Explorer 11.15.16299.0):

Từ những kết quả này, có vẻ như phương pháp preallocate 1 là đặt cược nhiều trình duyệt an toàn nhất.

Giả sử nodeList = document.querySelectorAll("div"), đây là một hình thức ngắn gọn nodelistđể chuyển đổi thành mảng.

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

Xem tôi sử dụng nó ở đây .