ईएस 6 में फिल्टर या मानचित्र नोडलिस्ट

Question

ES6 में एक नोडेलिस्ट को फ़िल्टर या मैप करने का सबसे कुशल तरीका क्या है?

मेरे रीडिंग के आधार पर, मैं निम्नलिखित विकल्पों में से एक का उपयोग करूंगा:

[...nodelist].filter

या

Array.from(nodelist).filter

तुम किसकी सिफारिश करना चाहोगे? और क्या बेहतर तरीके हैं, उदाहरण के लिए सरणियों को शामिल किए बिना?

Comments

असल में, दोनों तरीके एक ही काम करते हैं। यह आप का उपयोग कर रहे हैं babel, तो [...coll]बस Array.from(coll)कुछ भी नहीं है कि एक के लिए कॉल करेंगे Array।

— लियोनिद बेस्चस्टानी

FWIW, ...वाक्यविन्यास पुराने IDEs द्वारा असमर्थित हो सकता है , जबकि Array.from()सिर्फ एक नियमित विधि है।

— मराट तानलिन

Answer 1

• [...nodelist] यदि ऑब्जेक्ट चलने योग्य है, तो ऑब्जेक्ट से बाहर की एक सरणी बना देगा।
• Array.from(nodelist)यदि ऑब्जेक्ट चलने योग्य है या ऑब्जेक्ट एरे- लाइक है (तो .lengthऔर संख्यात्मक प्रॉप्स)

यदि NodeList.prototype[Symbol.iterator]मौजूद हैं तो आपके दो उदाहरण समान होंगे , क्योंकि दोनों मामले पुनरावृत्तियों को कवर करते हैं। यदि आपके पर्यावरण को ऐसे कॉन्फ़िगर नहीं किया गया है जो NodeListफिर से चलने योग्य है, तो आपका पहला उदाहरण विफल हो जाएगा, और दूसरा सफल होगा। Babelवर्तमान में इस मामले को ठीक से नहीं संभालता है ।

इसलिए यदि आपका उपयोग करने योग्य NodeListहै, तो यह वास्तव में आप पर निर्भर है जो आप उपयोग करते हैं। मैं संभवतः केस-दर-मामला आधार पर चयन करूँगा। इसका एक लाभ Array.fromयह है कि यह एक मैपिंग फ़ंक्शन का दूसरा तर्क लेता है, जबकि पहले [...iterable].map(item => item)एक अस्थायी सरणी बनाना Array.from(iterable, item => item)होगा , नहीं। यदि आप सूची को मैप नहीं कर रहे हैं, तो इससे कोई फर्क नहीं पड़ता।

Answer 2

टी एल; डॉ;

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

टुकड़ा () विधि एक सरणी देता है। लौटे सरणी संग्रह (NodeList) की एक उथले प्रति है यही कारण है कि तो यह तेजी से काम करता है Array.from () तो यह के रूप में के रूप में तेजी से काम करता है Array.from ()

मूल संग्रह के तत्वों की प्रतिलिपि निम्न प्रकार से बनाई गई है:

• ऑब्जेक्ट संदर्भ (और वास्तविक ऑब्जेक्ट नहीं) के लिए, स्लाइस ऑब्जेक्ट को नए सरणी में संदर्भित करता है। मूल और नए दोनों सरणी एक ही वस्तु को संदर्भित करते हैं। यदि एक संदर्भित ऑब्जेक्ट बदलता है, तो परिवर्तन नए और मूल दोनों सरणियों को दिखाई देते हैं।
• स्ट्रिंग्स, संख्या और बूलियन (स्ट्रिंग, संख्या और बूलियन ऑब्जेक्ट नहीं) के लिए, स्लाइस नए सरणी में मूल्यों की प्रतिलिपि बनाता है। एक सरणी में स्ट्रिंग, संख्या या बूलियन में परिवर्तन दूसरे सरणी को प्रभावित नहीं करता है।

तर्कों के बारे में संक्षिप्त व्याख्या

Array.prototype.slice (startIndex, endIndex)

• वैकल्पिक args startIndex और endIndex लेता है। यदि उन्हें स्लाइस प्रदान नहीं की जाती है, तो वे startIndex == 0 का उपयोग करते हैं, इस प्रकार यह संग्रह से सभी वस्तुओं को निकालता है

Array.prototype.slice.call (नेमस्पेस, बिग इंडेक्स, एंडइंडेक्स)

• पहले तर्क के रूप में एक वस्तु लेता है। यदि हम किसी संग्रह को एक वस्तु के रूप में उपयोग करते हैं, तो इसका शाब्दिक अर्थ है कि हम स्लाइस विधि को सीधे उस ऑब्जेक्ट नेमस्पेस से कहते हैं। ()

Comments

इस कोड स्निपेट के लिए धन्यवाद, जो कुछ सीमित, तत्काल सहायता प्रदान कर सकता है। एक उचित व्याख्या से यह पता चलता है कि यह समस्या का एक अच्छा समाधान क्यों है, यह दिखा कर इसके दीर्घकालिक मूल्य में बहुत सुधार होगा और यह भविष्य के पाठकों को अन्य, समान प्रश्नों के साथ और अधिक उपयोगी बना देगा। कृपया कुछ स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें, जिसमें आपके द्वारा की गई धारणाएँ शामिल हैं

— मैक्सिमिलियन पीटर्स

मैं सोच रहा था कि यह IE समर्थन के बाद से Array.fromनहीं करता है। आईई मशीन खोजने का समय। अब मैं वास्तव में भ्रमित हूं क्योंकि मैं IE10 और IE11: Array.from का उपयोग करने में सक्षम था। यह विधि IE10 + 11 में काम करती है लेकिन मुझे Array.from द्वारा आसानी से काम नहीं मिलता है जब सभी दस्तावेज अन्यथा कहते हैं।

— CTS_AE

Array.fromIE11 में मेरे लिए काम नहीं करता है ऑब्जेक्ट 'से संपत्ति या विधि का समर्थन नहीं करता है'

— फस रो दाह

धन्यवाद, यह मेरे लिए जावास्क्रिप्ट के एक पुराने कार्यान्वयन पर काम किया

— विक Seedoubleyew

Array.fromउथली प्रति भी देता है। इसलिए मैं नहीं देखता कि आप कैसे निष्कर्ष निकालते हैं कि यह तेजी से काम करता है Array#slice।

— रॉबर्ट

Answer 3

मुझे एक संदर्भ मिला जो mapसीधे NodeList द्वारा उपयोग किया जाता है

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

मैंने इसका परीक्षण नहीं किया है, लेकिन यह प्रशंसनीय है कि यह तेजी से होगा क्योंकि इसे सीधे नोडलिस्ट तक पहुंचना चाहिए।

Answer 4

इस बारे में कैसा है:

// 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 ('Polyfill' के तहत) के MDN डॉक्स में उल्लेख किया गया है , यह IE11 , Edge, Chrome और FF के लिए काम करता है ।