HTMLCollection'ı Diziye dönüştürmenin en etkili yolu

Bir HTMLCollection'ı bir Diziye dönüştürmenin, adı geçen koleksiyonun içeriğini yinelemekten ve her öğeyi manuel olarak bir diziye itmekten daha etkili bir yolu var mı?

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

"yerel" kod kullanılarak aynı etkiye sahip olacaktır.

Düzenle

Bu çok fazla görüş aldığından, aşağıdaki daha özlü ifadenin etkili bir şekilde eşdeğer olduğunu (@ oriol'un yorumuna göre) not edin :

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

Ancak @ JussiR'nin yorumuna göre, "ayrıntılı" formdan farklı olarak, işlemde boş, kullanılmayan ve gerçekten de kullanılamaz bir dizi örneği oluşturduğunu unutmayın. Derleyicilerin bu konuda yaptıkları programcının ken dışında.

Düzenle

ECMAScript 2015'ten (ES 6) beri Array.from var :

var arr = Array.from(htmlCollection);

Düzenle

ECMAScript 2015 ayrıca işlevsel olarak eşdeğer olan forma operatörünü de sağlar Array.from(her ne Array.fromkadar ikinci argüman olarak bir eşleme işlevini destekliyor olsa da ).

var arr = [...htmlCollection];

Yukarıdakilerin her ikisinin de çalıştığını doğruladım NodeList.

Bahsedilen yöntemler için bir performans karşılaştırması: http://jsben.ch/h2IFA

bunun en verimli olup olmadığından emin değilim, ancak kısa bir ES6 sözdizimi şunlar olabilir:

let arry = [...htmlCollection] 

Edit: Başka bir, Chris_F yorumdan:

let arry = Array.from(htmlCollection)

Array.prototypeGenel olarak yöntemlerin işe yaraması için daha özlü bir yöntem gördüm . Bir HTMLCollectionnesneyi bir nesneye dönüştürmeArray aşağıda gösterilmiştir:

[] .slice.call (yourHTMLCollectionObject);

Yorumlarda belirtildiği gibi, IE7 ve öncesi gibi eski tarayıcılar için , aşağıdaki gibi bir uyumluluk işlevi kullanmanız yeterlidir:

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

    return a
}

Bunun eski bir soru olduğunu biliyorum, ama kabul edilen cevabın biraz eksik olduğunu hissettim; bu yüzden bunu oraya atacağımı düşündüm FWIW.

Çapraz tarayıcı uygulaması için prototype.js $A işlevine bakmanızı öneririm

1.6.1'den kopyalandı :

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

Array.prototype.sliceHer tarayıcıda bulunmadığı için muhtemelen kullanılmaz. Korkarım orada bir düşme üzerinde bir javascript döngü olduğu gibi performansı oldukça kötü iterable.

Bu, buradaki bilgilere dayanarak kişisel çözümüm (bu konu):

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

$ A, Gareth Davis tarafından görevinde belirtildi:

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

Tarayıcı en iyi yolu destekliyorsa, tamam, aksi takdirde çapraz tarayıcıyı kullanır.

Bu, önceki IE sürümleri de dahil olmak üzere tüm tarayıcılarda çalışır.

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

Jsperf şu anda hala kapalı olduğundan, burada farklı yöntemlerin performansını karşılaştıran bir jsfiddle var. https://jsfiddle.net/qw9qf48j/

Dizi benzeri diziyi verimli bir şekilde diziye dönüştürmek için jQuery'den yararlanabiliriz makeArray :

makeArray: Dizi benzeri bir nesneyi gerçek bir JavaScript dizisine dönüştürür.

Kullanımı:

var domArray = jQuery.makeArray(htmlCollection);

Biraz ekstra:

Dizi nesnesine başvurmak istemiyorsanız (çoğu zaman HTMLCollections dinamik olarak değişir, bu nedenle bunları başka bir diziye kopyalamak daha iyidir, Bu örnek performansa dikkat eder:

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

Dizi benzeri nedir?

HTMLCollection bir "array-like"nesnedir, dizi benzeri nesneler dizinin nesnesine benzer, ancak işlevsel tanımının çoğunu yoktur:

Dizi benzeri nesneler dizilere benzer. Çeşitli numaralandırılmış elemanlara ve length özelliğine sahiptirler. Ama benzerlik burada durur. Dizi benzeri nesneler, Dizinin işlevlerinden hiçbirine sahip değildir ve for-in döngüleri bile çalışmaz!