Cách hiệu quả nhất để chuyển đổi HTMLCollection thành Mảng

Có cách nào hiệu quả hơn để chuyển đổi HTMLCollection thành Mảng, ngoài việc lặp qua nội dung của bộ sưu tập nói trên và tự đẩy từng mục vào một mảng không?

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

sẽ có tác dụng tương tự bằng cách sử dụng mã "gốc".

Biên tập

Vì điều này nhận được rất nhiều lượt xem, lưu ý (bình luận của mỗi @ oriol) rằng biểu thức ngắn gọn hơn sau đây có hiệu quả tương đương:

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

Nhưng lưu ý mỗi nhận xét của @ JussiR, không giống như biểu mẫu "dài dòng", nó tạo ra một thể hiện mảng trống, không sử dụng và thực sự không sử dụng được trong quy trình. Trình biên dịch làm gì về điều này nằm ngoài ken của lập trình viên.

Biên tập

Kể từ ECMAScript 2015 (ES 6) cũng có Array.from :

var arr = Array.from(htmlCollection);

Biên tập

ECMAScript 2015 cũng cung cấp toán tử trải rộng , tương đương về chức năng Array.from(mặc dù lưu ý Array.fromhỗ trợ chức năng ánh xạ làm đối số thứ hai).

var arr = [...htmlCollection];

Tôi đã xác nhận rằng cả hai công việc trên NodeList.

So sánh hiệu suất cho các phương pháp được đề cập: http://jsben.ch/h2IFA

không chắc đây có phải là hiệu quả nhất không, nhưng cú pháp ES6 ngắn gọn có thể là:

let arry = [...htmlCollection] 

Chỉnh sửa: Một số khác, từ nhận xét của Chris_F:

let arry = Array.from(htmlCollection)

Tôi thấy một phương pháp ngắn gọn hơn để có được Array.prototypecác phương thức nói chung cũng hoạt động tốt. Chuyển đổi một HTMLCollectionđối tượng thành một Arrayđối tượng được thể hiện dưới đây:

[] .slice.call (yourHTMLCollectionObject);

Và, như đã đề cập trong các nhận xét, đối với các trình duyệt cũ như IE7 trở về trước, bạn chỉ cần sử dụng chức năng tương thích, như:

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

    return a
}

Tôi biết đây là một câu hỏi cũ, nhưng tôi cảm thấy câu trả lời được chấp nhận là một chút không đầy đủ; Vì vậy, tôi nghĩ rằng tôi sẽ ném nó ra khỏi đó FWIW.

Đối với việc thực hiện trình duyệt chéo Tôi muốn sugguest bạn nhìn vào prototype.js $A chức năng

được sao chép từ 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;
}

Nó không sử dụng Array.prototype.slicecó lẽ vì nó không có sẵn trên mọi trình duyệt. Tôi e rằng hiệu suất khá tệ vì có một điểm yếu là vòng lặp javascript iterable.

Đây là giải pháp cá nhân của tôi, dựa trên thông tin ở đây (chủ đề này):

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

Trong đó $ A được mô tả bởi Gareth Davis trong bài đăng của mình:

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

Nếu trình duyệt hỗ trợ cách tốt nhất, ok, nếu không sẽ sử dụng trình duyệt chéo.

Điều này hoạt động trong tất cả các trình duyệt bao gồm các phiên bản IE trước đó.

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

Vì jsperf vẫn chưa hoạt động vào lúc này, đây là một jsfiddle so sánh hiệu suất của các phương thức khác nhau. https://jsfiddle.net/qw9qf48j/

Để chuyển đổi mảng giống như mảng thành mảng theo cách hiệu quả, chúng ta có thể sử dụng jQuery makeArray :

makeArray: Chuyển đổi một đối tượng giống như mảng thành một mảng JavaScript thực sự.

Sử dụng:

var domArray = jQuery.makeArray(htmlCollection);

Phần thưởng nhỏ nhoi:

Nếu bạn không muốn giữ tham chiếu đến đối tượng mảng (phần lớn thời gian HTMLCollections thay đổi động để sao chép chúng vào mảng khác, ví dụ này rất chú ý đến hiệu suất:

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

Giống như mảng là gì?

HTMLCollection là một "array-like"đối tượng, mảng giống như đối tượng tương tự như đối tượng mảng nhưng thiếu rất nhiều định nghĩa về mặt chức năng của nó:

Các đối tượng giống như mảng trông giống như mảng. Họ có các yếu tố được đánh số khác nhau và một thuộc tính chiều dài. Nhưng đó là nơi tương tự dừng lại. Các đối tượng giống như mảng không có bất kỳ chức năng nào của Array và các vòng lặp for-in thậm chí không hoạt động!