ES6'da nod listelerini filtreleyin veya eşleyin

ES6'da bir düğüm listesini filtrelemenin veya eşleştirmenin en etkili yolu nedir?

Okumalarıma göre aşağıdaki seçeneklerden birini kullanırdım:

[...nodelist].filter

veya

Array.from(nodelist).filter

Hangisini önerirsiniz? Ve örneğin dizileri dahil etmeden daha iyi yollar var mı?

• [...nodelist] nesne yinelenebiliyorsa, nesneden bir dizi oluşturur.
• Array.from(nodelist)nesne yinelenebilirse veya nesne dizi benzeri ise (has .lengthve sayısal props) bir nesneden bir dizi oluşturur

Varsa NodeList.prototype[Symbol.iterator], iki örneğiniz aynı olacaktır , çünkü her iki durum da yinelemeleri kapsar. NodeListOrtamınız yinelenebilir şekilde yapılandırılmamışsa , ilk örneğiniz başarısız olur ve ikincisi başarılı olur. Babelşu anda bu durumu düzgün bir şekilde ele almıyor .

Dolayısıyla, eğer NodeListtekrarlanabilirse, hangisini kullanacağın gerçekten sana kalmış. Muhtemelen duruma göre seçerdim. Bunun bir yararı, Array.frombir eşleme fonksiyonunun ikinci bir argümanını almasıdır, oysa ilkinin [...iterable].map(item => item)geçici bir dizi yaratması gerekir, Array.from(iterable, item => item)bu değildir. Ancak listeyi eşlemiyorsanız, önemli değil.

TL; DR;

Array.prototype.slice.call(nodelist).filter

Slice () yöntemi bir dizi döndürür. Dönen dizi toplama (nodelist) sığ bir kopyasıdır Yani daha hızlı daha çalışır Yani Array.from () o kadar hızlı çalışır Yani ) (Array.from

Orijinal koleksiyonun öğeleri döndürülen diziye şu şekilde kopyalanır:

• Nesne referansları için (gerçek nesne değil), nesne referanslarını yeni diziye kopyalar. Hem orijinal hem de yeni dizi aynı nesneyi ifade eder. Referans verilen bir nesne değişirse, değişiklikler hem yeni hem de orijinal diziler tarafından görülebilir.
• Dizeler, sayılar ve boole'lar için (String, Number ve Boolean nesneleri değil), dilim, değerleri yeni diziye kopyalar. Bir dizideki dize, sayı veya boole'de yapılan değişiklikler diğer diziyi etkilemez.

Argümanlarla ilgili kısa açıklama

Array.prototype.slice (beginIndex, endIndex)

• isteğe bağlı argümanları beginIndex ve endIndex alır. Sağlanmazsa dilimler beginIndex == 0 kullanır, böylece koleksiyondaki tüm öğeleri çıkarır.

Array.prototype.slice.call (ad alanı, beginIndex, endIndex)

• ilk argüman olarak bir nesneyi alır. Bir koleksiyonu bir nesne olarak kullanırsak, bu kelimenin tam anlamıyla, slice yöntemini doğrudan o nesne ad alanından çağırdığımız anlamına gelir.slice ()

Doğrudan NodeList üzerinde kullanan bir referans buldum map.

Array.prototype.map.call(nodelist, fn)

Test etmedim, ancak bunun daha hızlı olacağı mantıklı görünüyor çünkü doğrudan NodeList'e erişmesi gerekiyor.

Buna ne dersin:

// Be evil. Extend the prototype.
if (window.NodeList && !NodeList.prototype.filter) {
  NodeList.prototype.filter = Array.prototype.filter;
}

// Use it like you'd expect:
const noClasses = document
  .querySelectorAll('div')
  .filter(div => div.classList.length === 0)

NodeList.forEach için MDN belgelerinde belirtilen yaklaşımın aynısıdır ('Polyfill' altında), IE11 , Edge, Chrome ve FF için çalışır.