กรองหรือแมป nodelists ใน ES6

Question 1

วิธีใดที่มีประสิทธิภาพที่สุดในการกรองหรือแมป nodelist ใน ES6

จากการอ่านของฉันฉันจะใช้หนึ่งในตัวเลือกต่อไปนี้:

[...nodelist].filter

หรือ

Array.from(nodelist).filter

ท่านใดจะแนะนำ และมีวิธีที่ดีกว่าเช่นโดยไม่ต้องเกี่ยวข้องกับอาร์เรย์หรือไม่?

Question 2

[...nodelist] จะสร้างอาร์เรย์ของอ็อบเจ็กต์หากอ็อบเจ็กต์สามารถทำซ้ำได้
Array.from(nodelist)จะสร้างอาร์เรย์ออกจากวัตถุถ้าวัตถุนั้นทำซ้ำได้หรือถ้าวัตถุนั้นมีลักษณะคล้ายอาร์เรย์ (มี.lengthและอุปกรณ์ประกอบฉากเป็นตัวเลข)

ตัวอย่างทั้งสองของคุณจะเหมือนกันหากNodeList.prototype[Symbol.iterator]มีอยู่เนื่องจากทั้งสองกรณีครอบคลุมการทำซ้ำ หากสภาพแวดล้อมของคุณไม่ได้รับการกำหนดค่าให้NodeListสามารถทำซ้ำได้อย่างไรก็ตามตัวอย่างแรกของคุณจะล้มเหลวและครั้งที่สองจะสำเร็จ Babelขณะนี้ไม่ได้จัดการกับกรณีนี้อย่างถูกต้อง

ดังนั้นหากคุณNodeListสามารถทำซ้ำได้ก็ขึ้นอยู่กับคุณที่คุณใช้ ฉันน่าจะเลือกเป็นกรณี ๆ ไป ข้อดีอย่างหนึ่งArray.fromคือต้องใช้อาร์กิวเมนต์ที่สองของฟังก์ชันการแม็ปในขณะที่ข้อแรก[...iterable].map(item => item)จะต้องสร้างอาร์เรย์ชั่วคราวArray.from(iterable, item => item)จะไม่ อย่างไรก็ตามหากคุณไม่ได้ทำแผนที่รายการก็ไม่สำคัญ

Question 3

TL; DR;

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

slice () วิธีการส่งคืนอาร์เรย์ อาร์เรย์ที่ส่งคืนเป็นสำเนาตื้นของคอลเลกชัน (NodeList) ดังนั้นจึงทำงานได้เร็วกว่าArray.from () ดังนั้นจึงทำงานได้เร็วเท่ากับArray.from ()

องค์ประกอบของคอลเลกชันดั้งเดิมจะถูกคัดลอกไปยังอาร์เรย์ที่ส่งคืนดังนี้:

สำหรับการอ้างอิงอ็อบเจ็กต์ (ไม่ใช่อ็อบเจ็กต์จริง) ให้สไลซ์คัดลอกการอ้างอิงอ็อบเจ็กต์ลงในอาร์เรย์ใหม่ ทั้งอาร์เรย์เดิมและอาร์เรย์ใหม่อ้างถึงวัตถุเดียวกัน หากออบเจ็กต์ที่อ้างอิงเปลี่ยนไปการเปลี่ยนแปลงจะมองเห็นได้ทั้งอาร์เรย์ใหม่และอาร์เรย์เดิม
สำหรับสตริงตัวเลขและบูลีน (ไม่ใช่ออบเจ็กต์ String, Number และ Boolean) ให้สไลซ์คัดลอกค่าลงในอาร์เรย์ใหม่ การเปลี่ยนแปลงสตริงตัวเลขหรือบูลีนในอาร์เรย์หนึ่งไม่มีผลกับอาร์เรย์อื่น

คำอธิบายสั้น ๆ เกี่ยวกับข้อโต้แย้ง

Array.prototype.slice (beginIndex, endIndex)

ใช้ args ที่เป็นทางเลือก beginIndex และ endIndex หากไม่ได้จัดเตรียมชิ้นส่วนให้ใช้ startIndex == 0 ดังนั้นจะแยกรายการทั้งหมดออกจากคอลเลกชัน

Array.prototype.slice.call (เนมสเปซ, beginIndex, endIndex)

ใช้วัตถุเป็นอาร์กิวเมนต์แรก ถ้าเราใช้คอลเลกชันเป็นวัตถุหมายความว่าเราเรียกเมธอด slice โดยตรงจากวัตถุนั้นnamespace.slice ()

Question 4

ฉันพบข้อมูลอ้างอิงที่ใช้mapโดยตรงบน NodeList โดย

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

ฉันยังไม่ได้ทดสอบ แต่ดูเหมือนจะเป็นไปได้ว่าสิ่งนี้จะเร็วกว่าเพราะควรเข้าถึง NodeList โดยตรง

Question 5

แล้วสิ่งนี้ล่ะ:

// 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)

เป็นแนวทางเดียวกับที่กล่าวไว้ในเอกสาร MDN สำหรับ NodeList.forEach (ภายใต้ 'Polyfill') ซึ่งใช้ได้กับ IE11 , Edge, Chrome และ FF