जावास्क्रिप्ट में [] .slice.call का स्पष्टीकरण?

Question

मैं एक नियमित सरणी में एक डोम NodeList परिवर्तित करने के लिए इस स्वच्छ शॉर्टकट पर ठोकर खाई है, लेकिन मैं मानता चाहिए, मैं पूरी तरह से समझ में नहीं आता कि यह कैसे काम करता है है:

[].slice.call(document.querySelectorAll('a'), 0) 

इसलिए यह एक खाली सरणी [] के साथ शुरू होता है, तो slice का उपयोग call के परिणाम को एक नई सरणी में बदलने के लिए किया जाता है?

बिट मुझे समझ में नहीं आता call है। यह document.querySelectorAll('a') को एक नोडलिस्ट से नियमित सरणी में कैसे परिवर्तित करता है?

Answer 1

यहां क्या हो रहा है यह है कि आप slice() पर कॉल करते हैं जैसे कि यह का call() का उपयोग कर रहा था। slice() इस मामले में एक खाली सरणी बना रहा है, फिर उस ऑब्जेक्ट के माध्यम से पुनरावृत्ति करें जो मूल रूप से चल रहा है (मूल रूप से एक सरणी, अब NodeList) और उस ऑब्जेक्ट के तत्वों को उस खाली सरणी में जोड़ना जारी रखें जो अंततः वापस आ गया है। यहां एक article on this है।

संपादित करें:

इसलिए यह एक खाली सरणी [], तो टुकड़ा लिए हाँ प्रयोग किया जाता है एक नई सरणी के लिए कॉल का परिणाम परिवर्तित साथ शुरू होता है?

यह सही नहीं है। [].slice फ़ंक्शन ऑब्जेक्ट देता है। फ़ंक्शन ऑब्जेक्ट में call() फ़ंक्शन होता है जो call() से this के पहले पैरामीटर को निर्दिष्ट करने वाले फ़ंक्शन को कॉल करता है; दूसरे शब्दों में, फ़ंक्शन को लगता है कि इसे पैरामीटर से कहा जा रहा है (NodeListdocument.querySelectorAll('a') द्वारा लौटाया गया) एक सरणी के बजाय।

Answer 2

यह Array से slice फ़ंक्शन पुनर्प्राप्त करता है। फिर यह उस फ़ंक्शन को कॉल करता है, लेकिन document.querySelectorAll के परिणाम का उपयोग this ऑब्जेक्ट को वास्तविक सरणी के बजाय उपयोग करता है।

Answer 3

जावास्क्रिप्ट में, ऑब्जेक्ट के तरीकों को रनटाइम पर किसी अन्य ऑब्जेक्ट से बाध्य किया जा सकता है। समारोह वस्तुओं की

object1 = { 
    name:'frank', 
    greet:function(){ 
     alert('hello '+this.name) 
    } 
}; 

object2 = { 
    name:'andy' 
}; 

// Note that object2 has no greet method. 
// But we may "borrow" from object1: 

object1.greet.call(object2); 

call और apply विधियों (जावास्क्रिप्ट में कार्य के रूप में अच्छी तरह से वस्तुओं रहे हैं) आप ऐसा कर सकते हैं: संक्षेप में, जावास्क्रिप्ट को एक वस्तु किसी अन्य वस्तु की विधि "उधार" की अनुमति देता है। तो आपके कोड में आप कह सकते हैं कि नोडेलिस्ट सरणी की स्लाइस विधि उधार ले रहा है। रूपांतरण यह तथ्य है कि टुकड़ा एक और सरणी देता है क्योंकि इसका परिणाम होता है।

Answer 4

यह सरणी जैसी वस्तुओं को असली सरणी में परिवर्तित करने की एक तकनीक है।

इन वस्तुओं में से कुछ में शामिल हैं:

• arguments कार्यों
• (अपनी सामग्री प्राप्त किए गए जाने के बाद बदल सकते हैं याद में!API, type, learn)

यह कई उद्देश्यों को पूरा करती है, उदाहरण के वस्तुओं के लिए संदर्भ जबकि द्वारा पारित कर रहे हैं: इसलिए उन्हें सरणी में कनवर्ट करने के लिए उन्हें फ्रीज करने)

jQuery संग्रह, उर्फ ​​jQuery वस्तुओं (कुछ दस्तावेज़ एक रास्ता है सरणी मूल्य से गुजरती हैं।

इसके अलावा, पहले तर्क 0 को छोड़ दिया जा सकता है, thorough explanation here।

और पूर्णता के लिए, jQuery.makeArray() भी है।

Answer 5

कैसे है कि एक NodeList से document.querySelectorAll('a') परिवर्तित करता है एक नियमित सरणी के लिए?

इस कोड है कि हम,

[].slice.call(document.querySelectorAll('a'), 0) 

चलें पहले यह विघटित है

[] // Array object 
.slice // Accessing the function 'slice' present in the prototype of Array 
.call // Accessing the function 'call' present in the prototype of function object(slice) 
(document.querySelectorAll('a'),0) 
    // 'call' can have arguments like, (thisArg, arg1,arg2...n). 
    // So here we are passing the 'thisArg' as an array like object, 
    // that is a 'nodeList'. It will be served as 'this' object inside of slice function. 
// And finally setting 'start' argument of slice as '0' and leaving the 'end' 
// argument as 'undefined' 

कदम: 1 call का निष्पादन समारोह

• call अंदर, अन्य thisArg से, द शेष तर्क को एक तर्क सूची में जोड़ा जाएगा।
• अब समारोह slice रूप thisArg (वस्तु की तरह सरणी document.querySelector से आया) और तर्क सूची के साथ अपने this मूल्य जुड़ कर सक्रिय किया जाएगा। यानी] तर्क start जो 0

चरण शामिल हैं: 2 निष्पादन की slice समारोह के अंदर की call

• start करने के लिए वैरिएबल s0 रूप
• end के बाद से undefined है आवंटित किया जाएगा लागू, this.length होगा e
• में संग्रहीत किया जाना चाहिए rray एक चर a

• में संग्रहीत किया जाएगा ऊपर सेटिंग निम्न यात्रा

  while(s < e) { 
      a.push(this[s]); 
      s++; 
  } 
  

• सरणी भरा a परिणाम के रूप में लौटा दी जाएगी हुआ हो जाएगा करने के बाद। हमारे परिदृश्य के बेहतर समझ के लिए

---

पी.एस कुछ कदम है कि हमारे संदर्भ के लिए आवश्यक हैं call और slice के मूल एल्गोरिथ्म से नजरअंदाज कर दिया गया।

Answer 6

[].slice.call(document.querySelectorAll('.slide')); 

1. The querySelectorAll() method returns all elements in the document that matches a specified selector(s). 

2. The call() method calls a function with a given this value and arguments provided individually. 

3. The slice() method returns the selected elements in an array, as a new array object. 

    so this line return the array of [object HTMLDivElement]. Here is the six div with classname "slide" so array length will be 6. 

<div class="slideshow"> 

    <div class="slide"> 
    first slider1 
    </div> 
    <div class="slide"> 
    first slider2 
    </div> 
    <div class="slide"> 
    first slider3 
    </div> 
    <div class="slide"> 
    first slider4 
    </div> 
    <div class="slide"> 
    first slider5 
    </div> 
    <div class="slide"> 
    first slider6 
    </div> 

</div> 

<script type="text/javascript"> 

    var arraylist = [].slice.call(document.querySelectorAll('.slide')); 

    alert(arraylist); 

</script> 

Answer 7

ES6 से: सीधे शब्दों में Array.from (element.children) के साथ सरणी बनाने या Array.from ({लंबाई: 5})