एक डेवलपर के रूप में, आपने संभवतः नियमित जावास्क्रिप्ट फ़ंक्शन का उपयोग किया होगा। पहले ऑर्डर फ़ंक्शन कहा जाता है, वे किसी फ़ंक्शन को पैरामीटर के रूप में नहीं लेते हैं या फ़ंक्शन वापस नहीं करते हैं।
फ़ंक्शन हैलो (नाम) {वापसी "हैलो," + "" + नाम} कंसोल.लॉग (हैलो ("कैरियर कर्म")); // हैलो, करियर कर्म यह लेख उच्च क्रम के कार्यों (HOF) के बारे में बात करता है। ये ऐसे फ़ंक्शन हैं जो डेवलपर्स को किसी फ़ंक्शन में तर्क के रूप में पास करके या फ़ंक्शन को वापस करके कोड को और अधिक पठनीय बनाने में मदद करते हैं। हम आपको HOF और कार्यात्मक प्रोग्रामिंग से परिचित कराने के लिए कुछ बुनियादी उदाहरणों पर जाएंगे और दो लोकप्रिय उन्नत सरणी विधियों के बारे में बात करेंगे जो काम करने के लिए उच्च क्रम फ़ंक्शन निर्माण का उपयोग करती हैं।
बेसिक हायर ऑर्डर फंक्शन उदाहरण
जावास्क्रिप्ट में हायर ऑर्डर फंक्शंस का उपयोग करने के कई अलग-अलग तरीके हैं।
कैलकुलेटर
आइए एक बुनियादी HOF से शुरू करें जो एक कॉलबैक फ़ंक्शन को एक तर्क के रूप में लेता है और कुछ तर्कों के साथ उस कॉलबैक को लौटाता है:
//उच्च ऑर्डर फ़ंक्शनफ़ंक्शन हायरऑर्डरफ़ंक्शन(num1, num2, cb) {रिटर्न cb(num1, num2); // यह हमारे cb फ़ंक्शन को आमंत्रित करता है और हमारे तर्कों को कॉलबैक में भेजता है। } // कॉलबैकफ़ंक्शन ऐड (num1, num2) {रिटर्न num1 + num2;} फंक्शन गुणा (num1, num2) {रिटर्न num1 * num2;} फंक्शन डिवाइड (num1, num2) {रिटर्न num1 / num2;} फंक्शन घटाना (num1, num2) {रिटर्न num1 - num2;}फंक्शन मोडुलो (num1, num2) {रिटर्न num1% num2;} कंसोल.लॉग (हाईऑर्डरफंक्शन (43, 13, ऐड));
यहां हमारे पास दो प्रकार के फ़ंक्शन हैं:एक उच्च ऑर्डर फ़ंक्शन जो कॉलबैक देता है और एक सेट फर्स्ट ऑर्डर फ़ंक्शन जो दो नंबरों पर एक ऑपरेशन करता है। स्निपेट के अंत में, हम higherOrderFunction() . पर एक फंक्शन कॉल करते हैं . यह फ़ंक्शन दिए गए मापदंडों के साथ पारित किए गए cb के आह्वान का परिणाम देता है। यदि आपने सभी संभावित अंकगणितीय ऑपरेटरों के लिए कॉलबैक फ़ंक्शन लिखा है, तो आप किसी भी ऑपरेशन को कॉल करने के लिए हायरऑर्डर फ़ंक्शन का उपयोग कर सकते हैं।
ईवेंट श्रोता
उच्च क्रम फ़ंक्शन का एक अन्य उदाहरण तब होता है जब आप किसी ईवेंट श्रोता को DOM (दस्तावेज़ ऑब्जेक्ट मॉडल) पर किसी तत्व में जोड़ते हैं। यह उदाहरण लें:
</शीर्षक> <मेटा नाम ="विवरण" सामग्री =""> <मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई =डिवाइस-चौड़ाई, प्रारंभिक-पैमाना =1"> <लिंक rel ="स्टाइलशीट" href =""> </head> <body> <!---[if lt IE 7]> <p class="browsehappy">आप एक <strong>पुराना</strong> ब्राउज़र का उपयोग कर रहे हैं। अपने अनुभव को बेहतर बनाने के लिए कृपया <a href="#">अपना ब्राउज़र अपग्रेड करें</a> ।</p> <![endif]--> <button>मुझे क्लिक करें!</button> <script async defer> const बटन =दस्तावेज़। क्वेरी चयनकर्ता ("बटन"); button.addEventListener ("क्लिक", (ई) => {अलर्ट ("बटन क्लिक किया गया है!"); }) </script> </body></html></pre> <p> इस उदाहरण में, मैंने HTML में एक बटन बनाया, जावास्क्रिप्ट का उपयोग करके इसे चुना, और इसमें एक ईवेंट श्रोता जोड़ा। ईवेंट श्रोता की संरचना एक साधारण उच्च क्रम फ़ंक्शन की है - यह एक अनाम फ़ंक्शन को अपने दूसरे तर्क के रूप में लेता है। <br> </p> <img loading='lazy' alt='जावास्क्रिप्ट में उच्च क्रम के कार्य:एक गाइड ' src="/article/uploadfiles/202203/2022033016310000.jpg" /> <p> हाइलाइट किया गया अनुभाग आपका उच्च क्रम का कार्य है।</P> <p> 81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।</P> <p> बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।</P> <h2>उन्नत सरणी विधियां</h2> <p> जावास्क्रिप्ट बिल्ट-इन ऐरे मेथड्स वे विशेष उच्च क्रम के कार्य हैं जो ES6 के लिए नए हैं जिनका उपयोग हम एक सरणी पर पुनरावृति करने के लिए कर सकते हैं और या तो इसमें हेरफेर कर सकते हैं या एक पूरी तरह से नई सरणी लौटा सकते हैं जिनके मूल्यों में हेरफेर किया गया है। <br> </p> <p> जैसे ही हम जावास्क्रिप्ट में अधिक जटिल समस्या को हल करना शुरू करते हैं, जब हम सरणियों पर पुनरावृति करते हैं, तो हम जो तर्क लिखते हैं उनमें से कुछ को अमूर्त करने के बारे में सोचना शुरू करें। इन उच्च क्रम फ़ंक्शन सरणी विधियों का उपयोग करने से आपको एक बेहतर JS डेवलपर बनने में मदद मिलती है। <br> </p> <p> मान लीजिए कि उदाहरण के लिए हमारे पास प्रोफेसरों की एक सरणी है:<br> </p> <img loading='lazy' alt='जावास्क्रिप्ट में उच्च क्रम के कार्य:एक गाइड ' src="/article/uploadfiles/202203/2022033016310095.jpg" /> <p> </p> <h3>प्रत्येक के लिए</h3> <p> यदि हम ES6 का उपयोग करने से पहले सरणी पर पुनरावृति करना चाहते हैं और प्रत्येक आइटम में हेरफेर करना चाहते हैं, तो हमें यही करना है:<br> </p> <pre>फ़ंक्शन forEachES5(arr){ for(let i =0; i <arr.length; i++) {arr[i] ="Professor" + arr[i]; } वापसी गिरफ्तारी;} कंसोल.लॉग(forEachES5(प्रोफेसरों));</pre> <p> ES6 सिंटैक्स हमें forEach विधि का उपयोग करके कोड को कम करने की अनुमति देता है:</P> <pre>फ़ंक्शन forEachES6(arr) { arr.forEach((professor, index, origArr) => { origArr[index] ="Professor" + प्रोफेसर; }); वापसी गिरफ्तारी; }</पूर्व> <p> यह forEach विधि कॉलबैक फ़ंक्शन को इसके पहले पैरामीटर के रूप में लेती है ताकि इसे उच्च ऑर्डर फ़ंक्शन बनाया जा सके। यह कॉलबैक फ़ंक्शन मूल रूप से सरणी में मौजूद प्रत्येक आइटम पर किया गया "एक्शन" है। इसके अलावा, forEach विधि अपने वैकल्पिक दूसरे और तीसरे पैरामीटर के रूप में एक अनुक्रमणिका और एक सरणी भी लेती है। <br> </p> <p> प्रत्येक विधि (साथ ही अन्य अंतर्निर्मित सरणी विधियों) में इन पैरामीटरों पर ऑर्डर मायने रखता है। पहला हमेशा कॉलबैक फ़ंक्शन होता है, दूसरा हमेशा सरणी में आइटम की अनुक्रमणिका होता है, और तीसरा हमेशा सरणी की एक प्रति होता है। <br> </p> <p> forEach विधि जावास्क्रिप्ट में लूप के लिए प्रस्तुत करने का एक और तरीका है। यह कुछ भी वापस नहीं करता है। विधि पहले से मौजूद चीज़ों में हेरफेर करती है और इसे उस सरणी में सहेजती है जिसके साथ आप काम कर रहे हैं यदि आप निर्दिष्ट करते हैं कि आप इसके साथ क्या करना चाहते हैं।</P> <h3>मानचित्र</h3> <p> प्रत्येक विधि के लिए निकटतम विधि मानचित्र विधि है। यह बहुत हद तक उसी तरह काम करता है, सिवाय इसके कि यह विधि एक नई सरणी लौटाती है। कॉलबैक फ़ंक्शन में आप जो कुछ भी हेरफेर करते हैं, वह मूल सरणी को प्रभावित नहीं करेगा। <br> </p> <p> आइए एक नज़र डालते हैं कि कौन सा नक्शा पूर्व-ES6 जैसा दिखता था:</P> <पूर्व>फ़ंक्शन mapES5(arr){ चलो newArr =[]; for(let i =0; i <arr.length; i++) { newArr.push("Professor" + arr[i]); } नया लौटाएं;}</pre> <p> जैसा कि आप देख सकते हैं, हमें जो करना था वह हमारे लूप के बाहर एक नई सरणी को तुरंत चालू करना था ताकि हम इसमें नए मूल्यों को आगे बढ़ा सकें। फिर हमें वास्तव में इसे कहीं और उपयोग करने में सक्षम होने के लिए अपनी नई सरणी वापस करनी होगी! <br> </p> <p> ES6 और मानचित्र विधि के साथ, हम उस तर्क को और अधिक पठनीय बनाने के लिए उसमें से कुछ को दूर कर सकते हैं:</P> <pre>फ़ंक्शन मैपविथईएस 6 (एआर) {कॉन्स्ट मैप किया गया =एआर.मैप (प्रोफेसर => {रिटर्न "प्रोफेसर" + प्रोफेसर; }) रिटर्न मैप किया गया;}</pre> <p> मानचित्र विधि के साथ-साथ अन्य सरणी विधियों के बारे में विशेष विशेषता, विशेष रूप से फ़ंक्शन को कम करना और फ़िल्टर करना, क्या आप इसे एक चर के लिए असाइन कर सकते हैं और इसे वापस कर सकते हैं या बस पूरे फ़ंक्शन को पूरी तरह से वापस कर सकते हैं! एक नए सरणी के लिए कोई धक्का देने की आवश्यकता नहीं है - यह आपके लिए इस मानचित्र विधि के साथ किया गया है। याद रखें कि आपके मैप मेथड कॉलबैक फंक्शन के अंदर लॉजिक में रिटर्न वैल्यू है!</P> <h2>निष्कर्ष:</h2> <p> आपको बेहतर डेवलपर बनने में मदद करने के लिए हायर ऑर्डर फंक्शन जावास्क्रिप्ट में एक अत्यंत महत्वपूर्ण अवधारणा है। यह आपके कोड को और अधिक पठनीय बनाने के लिए कुछ तर्कों को दूर करने में मदद करेगा, और, कुछ मामलों में, अधिक प्रदर्शनकारी। <br> </p> <p> इस ट्यूटोरियल में, हमने बुनियादी कैलकुलेटर विधियों से लेकर ईवेंट श्रोताओं और उन्नत सरणी फ़ंक्शंस तक, हायर ऑर्डर फ़ंक्शंस लिखने के कुछ अलग-अलग तरीकों की खोज की। एक बार जब आप इसमें महारत हासिल कर लेते हैं, तो आप समस्याओं के कुछ और जटिल समाधानों से निपटने के लिए तैयार होते हैं!</P> <br> </article> <div class="ad5"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4480737146802772" crossorigin="anonymous"></script><!-- computer.wsxdn --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4480737146802772" data-ad-slot="4467655591" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div id="turn-page" class="f-between"> <div class="page up f-align"> <i class="prev"></i> <a class='LinkPrevArticle' href='https://in.wsxdn.com/zx054r/ec552w/1005039053.html' >जावास्क्रिप्ट अनुरोध प्राप्त करें:फ़ेच एपीआई का उपयोग करना </a> <span></span> </div> <div class="page down f-align"> <a class='LinkNextArticle' href='https://in.wsxdn.com/zx054r/ec552w/1005039055.html' >जावास्क्रिप्ट अलर्ट () विधि </a> <i class="next"></i> <span></span> </div> </div> </div> <aside class="box-r"> <section class="small-nav rList"> <p class=h4s> Javascript </p> <ul class="f-between"> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/us544m/' target="_self">सी प्रोग्रामिंग</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/lj545d/' target="_self">C++</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/kh546c/' target="_self">Redis</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/om547h/' target="_self">बाश प्रोग्रामिंग</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/ca548u/' target="_self">Python</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/nl549f/' target="_self">Java</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/sp550k/' target="_self">डेटाबेस</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/zw551r/' target="_self">HTML</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/ec552w/' target="_self">Javascript</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/lj553d/' target="_self">प्रोग्रामिंग</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/tr554l/' target="_self">CSS</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/hf555z/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/fd556x/' target="_self">SQL</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/wu557p/' target="_self">IOS</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/bz558t/' target="_self">Android</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/pn559h/' target="_self">Mongodb</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/ay560s/' target="_self">MySql</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/fc561x/' target="_self">C#</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/cz565u/' target="_self">PHP</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/nl571f/' target="_self">SQL Server</a></li> </ul> <strong class="f-center"> <img loading='lazy' src="https://in.wsxdn.com/css/img/xiala.svg" alt=""> </strong> </section> <aside class="rList"> <p class=h4s> Javascript </p> <ul> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005054867.html" class="t-over" title="जावास्क्रिप्ट क्लोजर बनाम अनाम कार्य ">जावास्क्रिप्ट क्लोजर बनाम अनाम कार्य </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005055021.html" class="t-over" title="जावास्क्रिप्ट में फ़ंक्शन बॉडी के अंदर फ़ंक्शन को कैसे परिभाषित करें? ">जावास्क्रिप्ट में फ़ंक्शन बॉडी के अंदर फ़ंक्शन को कैसे परिभाषित करें? </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005055205.html" class="t-over" title="जावास्क्रिप्ट में नेस्टेड कार्यों को कैसे परिभाषित करें? ">जावास्क्रिप्ट में नेस्टेड कार्यों को कैसे परिभाषित करें? </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005055210.html" class="t-over" title="जावास्क्रिप्ट में फ़ंक्शन कैसे कॉल करें? ">जावास्क्रिप्ट में फ़ंक्शन कैसे कॉल करें? </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005055219.html" class="t-over" title="जावास्क्रिप्ट में तत्काल कार्य क्या हैं? ">जावास्क्रिप्ट में तत्काल कार्य क्या हैं? </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005055570.html" class="t-over" title="जावास्क्रिप्ट में फ़ंक्शन क्या हैं? ">जावास्क्रिप्ट में फ़ंक्शन क्या हैं? </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005055582.html" class="t-over" title="जावास्क्रिप्ट नेस्टेड फ़ंक्शन क्या हैं? ">जावास्क्रिप्ट नेस्टेड फ़ंक्शन क्या हैं? </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005055627.html" class="t-over" title="जावास्क्रिप्ट में कॉलबैक फ़ंक्शन क्या हैं? ">जावास्क्रिप्ट में कॉलबैक फ़ंक्शन क्या हैं? </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005056752.html" class="t-over" title="जावास्क्रिप्ट में इटरेटर फ़ंक्शंस का उपयोग करना ">जावास्क्रिप्ट में इटरेटर फ़ंक्शंस का उपयोग करना </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005057170.html" class="t-over" title="जावास्क्रिप्ट में जेनरेटर फंक्शन समझाइए? ">जावास्क्रिप्ट में जेनरेटर फंक्शन समझाइए? </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005057313.html" class="t-over" title="जावास्क्रिप्ट में नियमित कार्य बनाम तीर कार्य? ">जावास्क्रिप्ट में नियमित कार्य बनाम तीर कार्य? </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005057363.html" class="t-over" title="जावास्क्रिप्ट में Async/प्रतीक्षा कार्य ">जावास्क्रिप्ट में Async/प्रतीक्षा कार्य </a> </li> <li> <a href="https://in.wsxdn.com/zx054r/ec552w/1005057427.html" class="t-over" title="जावास्क्रिप्ट में तीर कार्य ">जावास्क्रिप्ट में तीर कार्य </a> </li> </ul> </aside> </aside> </div> <div class="container box4-2"> <div class="lanmu-list f-between"> <div class="lanmu"> <ol> <li> <div class="img-block"> <span> <a href="https://in.wsxdn.com/zx054r/ec552w/1005057898.html" class="r-over r-over-2" title="जावास्क्रिप्ट में संक्षिप्त तीर कार्य "> जावास्क्रिप्ट में संक्षिप्त तीर कार्य </a> <p> संक्षिप्त तीर फ़ंक्शन सिंटैक्स इस प्रकार है - param1+param2 होता है और यदि एक ही पैरामीटर है तो इसे इस तरह भी लिखा जा सकता है - param1*2 के बाद घुंघराले ब्रेसिज़ {} नहीं हैं, तो इसका निहित प्रतिफल है। जावास्क्रिप्ट में संक्षिप्त तीर कार्यों को लागू करने के लिए कोड निम्नलिखित है - उदाहरण दस्तावेज़ </p> </span> </div> </li> </ol> </div> <div class="lanmu"> <ol> <li> <div class="img-block"> <span> <a href="https://in.wsxdn.com/zx054r/ec552w/1005058030.html" class="r-over r-over-2" title="जावास्क्रिप्ट में उच्च क्रम के कार्यों की व्याख्या करें। "> जावास्क्रिप्ट में उच्च क्रम के कार्यों की व्याख्या करें। </a> <p> जावास्क्रिप्ट फ़ंक्शन को ऑब्जेक्ट के रूप में मानता है और हमें फ़ंक्शन को किसी अन्य फ़ंक्शन के लिए पैरामीटर के रूप में पास करने की अनुमति देता है और यहां तक कि अन्य फ़ंक्शन से फ़ंक्शन वापस करने की अनुमति देता है। जावास्क्रिप्ट में फ़ंक्शन प्रथम श्रेणी के कार्य हैं जिसका अर्थ है कि हम उन्हें चर, वस् </p> </span> </div> </li> </ol> </div> <div class="lanmu"> <ol> <li> <div class="img-block"> <span> <a href="https://in.wsxdn.com/zx054r/ec552w/1005058040.html" class="r-over r-over-2" title="जावास्क्रिप्ट में प्रथम श्रेणी का कार्य "> जावास्क्रिप्ट में प्रथम श्रेणी का कार्य </a> <p> जावास्क्रिप्ट फ़ंक्शन को ऑब्जेक्ट के रूप में मानता है और हमें फ़ंक्शन को किसी अन्य फ़ंक्शन के लिए पैरामीटर के रूप में पास करने की अनुमति देता है और यहां तक कि अन्य फ़ंक्शन से फ़ंक्शन वापस करने की अनुमति देता है। जावास्क्रिप्ट में फ़ंक्शन प्रथम श्रेणी के कार्य हैं जिसका अर्थ है कि हम उन्हें चर, वस् </p> </span> </div> </li> </ol> </div> </div> </div> <footer> <section class="container f-between f-align"> <a href="https://in.wsxdn.com" class="logo"> <img loading='lazy' src="https://in.wsxdn.com/css/img/logo.svg" alt="कंप्यूटर"> </a> <span class="f-end"> © कॉपीराइट <a href="https://in.wsxdn.com">https://in.wsxdn.com</a> सर्वाधिकार सुरक्षित </span> </section> </footer> </body> </html>