👴🏻 🍩 👨‍✈️ जेएस में उच्च आदेश कार्य: यंग फाइटर कोर्स 👈🏻 💹 ☝️

यह लेख जावास्क्रिप्ट सीखने के कांटेदार रास्ते पर अपने पहले डरपोक कदम उठाने वाले व्यक्ति के लिए अभिप्रेत है। इस तथ्य के बावजूद कि 2018 में, मैं ईएस 5 सिंटैक्स का उपयोग करता हूं, ताकि एचटीएमएल अकादमी में जावास्क्रिप्ट लेवल 1 पाठ्यक्रम लेने वाले युवा पडावों द्वारा लेख को समझा जा सके।

जेएस को कई अन्य प्रोग्रामिंग भाषाओं से अलग करने वाली विशेषताओं में से एक यह है कि इस भाषा में एक फ़ंक्शन "प्रथम श्रेणी का ऑब्जेक्ट" है। या, रूसी में, एक फ़ंक्शन एक अर्थ है। एक संख्या, स्ट्रिंग या ऑब्जेक्ट के रूप में भी। हम एक फंक्शन को वेरिएबल में लिख सकते हैं, हम इसे एक ऐरे में या किसी ऑब्जेक्ट प्रॉपर्टी में डाल सकते हैं। हम दो कार्य भी जोड़ सकते हैं। वास्तव में, इस से कुछ भी सार्थक नहीं होगा, लेकिन एक तथ्य के रूप में - हम कर सकते हैं!

function hello(){}; function world(){}; console.log(hello + world); //  ,  ,   //   ,

सबसे दिलचस्प बात यह है कि हम ऐसे कार्य बना सकते हैं जो अन्य कार्यों पर काम करते हैं - उन्हें तर्क के रूप में स्वीकार करना या उन्हें मूल्य के रूप में वापस करना। इस तरह के कार्यों को उच्च क्रम के कार्य कहा जाता है। और आज हम, लड़कियों और लड़कों से बात करेंगे कि इस अवसर को राष्ट्रीय अर्थव्यवस्था की जरूरतों के अनुकूल कैसे बनाया जाए। जिस तरह से, आप जेएस में कार्यों की कुछ उपयोगी विशेषताओं के बारे में अधिक जानेंगे।

पाइपलाइन

मान लीजिए कि हमारे पास एक ऐसी चीज है जिसके साथ आपको बहुत सारे टुकड़े बनाने की आवश्यकता है। मान लें कि किसी उपयोगकर्ता ने एक टेक्स्ट फ़ाइल अपलोड की है जो JSON प्रारूप में डेटा संग्रहीत करती है, और हम इसकी सामग्री को संसाधित करना चाहते हैं। सबसे पहले, हमें अतिरिक्त व्हाट्सएप पात्रों को ट्रिम करने की आवश्यकता है, जो उपयोगकर्ता के कार्यों या ऑपरेटिंग सिस्टम के परिणामस्वरूप किनारों के चारों ओर "विकसित" कर सकते हैं। फिर जांचें कि पाठ में कोई दुर्भावनापूर्ण कोड नहीं है (जो जानता है, ये उपयोगकर्ता हैं)। फिर JSON.parse विधि का उपयोग करके टेक्स्ट से ऑब्जेक्ट पर JSON.parse । फिर इस ऑब्जेक्ट से हमें आवश्यक डेटा हटा दें। और अंत में - इस डेटा को सर्वर पर भेजें। आपको ऐसा कुछ मिलता है:

 function trim(){/*  */}; function sanitize(){/*  */}; function parse(){/*  */}; function extractData(){/*  */}; function send(){/*  */}; var textFromFile = getTextFromFile(); send(extractData(parse(sanitize(trim(testFromFile))));

ऐसा लगता है कि सहमत हैं। इसके अलावा, आपने शायद यह नहीं देखा कि एक लापता क्लोजिंग ब्रैकेट है। बेशक, आईडीई आपको यह बताएगा, लेकिन फिर भी एक समस्या है। इसे हल करने के लिए, एक नया ऑपरेटर |> हाल ही में प्रस्तावित किया गया था। वास्तव में, यह नया नहीं है, लेकिन ईमानदारी से कार्यात्मक भाषाओं से उधार लिया गया है, लेकिन यह बात नहीं है। इस ऑपरेटर का उपयोग करते हुए, अंतिम पंक्ति को निम्नानुसार फिर से लिखा जा सकता है:

 textFromFile |> trim |> sanitize |> parse |> extractData |> send;

|>> ऑपरेटर अपने लेफ्ट ऑपरेंड को लेता है और उसे एक तर्क के रूप में राइट ऑपरेंड में भेजता है। उदाहरण के लिए, "Hello" |> console.log console.log("Hello") बराबर है। यह उन मामलों के लिए बहुत सुविधाजनक है जब श्रृंखला के साथ कई कार्य किए जाते हैं। हालांकि, इस ऑपरेटर की शुरुआत से पहले, बहुत समय बीत जाएगा (यदि यह प्रस्ताव बिल्कुल स्वीकार किया जाता है), लेकिन आपको अब किसी तरह जीने की आवश्यकता है। इसलिए, हम अपनी ~~बाइक को एक~~ फ़ंक्शन लिख सकते हैं जो इस व्यवहार को अनुकरण करता है:

 function pipe(){ var args = Array.from(arguments); var result = args.shift(); while(args.length){ var f = args.shift(); result = f(result); } return result; } pipe( textFromFile, trim, sanitize, parse, extractData, send );

यदि आप एक नौसिखिया जावास्क्रिप्ट (जावास्क्रिप्ट? जावास्क्रिप्ट?) हैं, तो फ़ंक्शन की पहली पंक्ति आपके लिए समझ से बाहर हो सकती है। यह सरल है: फ़ंक्शन के अंदर, हम एक अरै-लाइक ऑब्जेक्ट को एक्सेस करने के लिए तर्कों के कीवर्ड का उपयोग करते हैं, जो फ़ंक्शन में दिए गए सभी तर्कों को शामिल करता है। यह बहुत सुविधाजनक है जब हम पहले से नहीं जानते कि उसके पास कितने तर्क होंगे। एक विशाल वस्तु एक सरणी की तरह है, लेकिन काफी नहीं है। इसलिए, हम इसे Array.from विधि का उपयोग करके एक सामान्य सरणी में Array.from करते हैं। आगे कोड, मुझे आशा है, पहले से ही काफी पठनीय है: हम सरणी से तत्वों को निकालने के लिए बाएं से दाएं शुरू करते हैं और उन्हें उसी तरह से एक दूसरे पर लागू करते हैं जैसे कि>> ऑपरेटर करेगा।

लॉगिंग

यहाँ वास्तविक जीवन के करीब एक और उदाहरण है। मान लीजिए कि हमारे पास पहले से ही एक फ़ंक्शन f जो करता है ... कुछ उपयोगी। और हमारे कोड के परीक्षण की प्रक्रिया में, हम वास्तव में यह जानना चाहते हैं कि यह कैसे करता है। किन क्षणों को कहा जाता है, इसके लिए कौन से तर्क दिए जाते हैं, कौन से मूल्य वापस किए जाते हैं।

बेशक, प्रत्येक फ़ंक्शन कॉल के साथ, हम इसे लिख सकते हैं:

 var result = f(a, b); console.log(" f     " + a + "  " + b + "   " + result); console.log(" : " + Date.now());

लेकिन, सबसे पहले, यह बल्कि बोझिल है। और दूसरी बात, इसके बारे में भूलना बहुत आसान है। एक दिन हम बस f(a, b) लिखेंगे, और तब से अज्ञान का अंधेरा हमारे दिमाग में बस जाएगा। यह प्रत्येक नई चुनौती के साथ विस्तार करेगा, जिनमें से हम कुछ भी नहीं जानते हैं।

आदर्श रूप में, मैं स्वचालित रूप से लॉगिंग करना चाहूंगा। ताकि हर बार जब आप f कॉल करें, तो हमें जो कुछ भी चाहिए वह सब कंसोल को लिखा जाए। और, सौभाग्य से, हमारे पास ऐसा करने का एक तरीका है। नए उच्च आदेश सुविधा को पूरा करें!

 function addLogger(f){ return function(){ var args = Array.from(arguments); var result = f.apply(null, args); console.log(" " + f.name + "     " + args.join() + "    " + result + "\n" + " : " + Date.now()); return result; } } function sum(a, b){ return a + b; } var sumWithLogging = addLogger(sum); sum(1, 2); //   sumWithLogging(1, 2) //

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

यहां हमारे पास क्लासिक मैन-इन-द-मिड अटैक केस है। यदि आप f बजाय एक आवरण का उपयोग करते हैं, तो उस कोड के दृष्टिकोण से जो इसका उपयोग करता है, व्यावहारिक रूप से कोई अंतर नहीं है। कोड मान सकता है कि यह सीधे f साथ संचार करता है। इस बीच, रैपर कॉमरेड मेजर को सब कुछ बताता है।

आइंस, ज़ेवी, ड्रेई, वीर ...

और एक और कार्य अभ्यास के करीब। मान लें कि हमें कुछ संस्थाओं को संख्या देने की आवश्यकता है। हर बार एक नई इकाई दिखाई देती है, हम इसके लिए एक नया नंबर प्राप्त करते हैं, जो पिछले एक से अधिक है। ऐसा करने के लिए, हम निम्नलिखित फॉर्म का एक कार्य शुरू करते हैं:

 var lastNumber = 0; function getNewNumber(){ return lastNumber++; }

और फिर हमारे पास एक नई तरह की इकाई है। कहते हैं, इससे पहले, हमने बन्नी को गिना था, और अब खरगोश भी हैं। यदि आप उन और अन्य दोनों के लिए एक फ़ंक्शन का उपयोग करते हैं, तो खरगोशों को जारी किए गए प्रत्येक नंबर को बन्नीज़ को जारी किए गए संख्याओं की श्रृंखला में एक "छेद" बना देगा। तो, हमें दूसरे फ़ंक्शन की आवश्यकता है, और इसके साथ दूसरा चर:

 var lastHareNumber = 0; function getNewHareNumber(){ return lastHareNumber++; } var lastRabbitNumber = 0; function getNewRabbitNumber(){ return lastRabbitNumber++; }

आपको लगता है कि इस कोड से बदबू आती है? मैं कुछ बेहतर करना चाहूंगा। सबसे पहले, मैं इस तरह के कार्यों को कम करने की घोषणा करने में सक्षम होना चाहूंगा, बिना कोड की नकल के। और दूसरी बात, मैं किसी भी तरह से "पैकेज" वैरिएबल को पसंद करूंगा जो कि फंक्शन में ही उपयोग होता है ताकि नाम स्थान को एक बार फिर से रोकना न पड़े।

और फिर एक आदमी फट गया, ओओपी की अवधारणा से परिचित है, और कहता है:

"प्राथमिक, वाटसन।" यह आवश्यक है कि नंबर जनरेटर को ऑब्जेक्ट नहीं, बल्कि ऑब्जेक्ट बनाया जाए। ऑब्जेक्ट्स केवल उन कार्यों को संग्रहीत करने के लिए डिज़ाइन किए गए हैं जो डेटा के साथ काम करते हैं, साथ ही साथ यह बहुत डेटा भी। तब हम कुछ ऐसा लिख सकते थे:

 var numberGenerator = new NumberGenerator(); var n = numberGenerator.get();

जिस पर मैं उत्तर दूंगा:
- ईमानदार होने के लिए, मैं आपसे पूरी तरह सहमत हूं। और सिद्धांत रूप में, यह एक अधिक सही दृष्टिकोण है जो मैं अब पेश करूंगा। लेकिन यहां हमारे पास कार्यों के बारे में एक लेख है, ओओपी के बारे में नहीं। तो क्या आप थोड़ी देर चुप रह सकते हैं और मुझे खत्म कर सकते हैं?

यहाँ (आश्चर्य!) उच्च क्रम फ़ंक्शन हमें फिर से मदद करेगा।

 function createNumberGenerator(){ var n = 0; return function(){ return n++; } } var getNewHareNumber = createNumberGenerator(); var getNewRabbitNumber = createNumberGenerator(); console.log( getNewHareNumber(), getNewHareNumber(), getNewHareNumber(), getNewRabbitNumber(), getNewRabbitNumber(), ); //    0, 1, 2, 0, 1

और यहाँ कुछ लोगों के पास एक सवाल हो सकता है, शायद अश्लील रूप में भी: क्या चल रहा है? हम एक ऐसा वैरिएबल क्यों बना रहे हैं जिसका उपयोग फंक्शन में नहीं किया जाता है? यदि कोई बाहरी कार्य बहुत पहले पूरा हो चुका है, तो एक आंतरिक फ़ंक्शन इसे कैसे एक्सेस करता है? एक ही चर के संदर्भ में दो निर्मित कार्यों को अलग-अलग परिणाम क्यों मिलते हैं? इन सभी सवालों का एक जवाब बंद है ।

हर बार createNumberGenerator फ़ंक्शन को createNumberGenerator , JS दुभाषिया एक जादुई चीज़ बनाता है जिसे "निष्पादन संदर्भ" कहा जाता है। मोटे तौर पर, यह एक ऐसी वस्तु है जिसमें इस फ़ंक्शन में घोषित सभी चर संग्रहीत किए जाते हैं। हम इसे एक सामान्य जावास्क्रिप्ट ऑब्जेक्ट के रूप में एक्सेस नहीं कर सकते, लेकिन फिर भी यह है।

यदि फ़ंक्शन "सरल" था (कहते हैं, संख्याओं को जोड़ना), तो इसके काम के अंत के बाद, निष्पादन संदर्भ बेकार हो जाता है। क्या आप जानते हैं कि JS में अनावश्यक डेटा का क्या होता है? वे कचरा बीनने वाले एक अतुल्य दानव द्वारा खाए जाते हैं। हालाँकि, यदि फ़ंक्शन "जटिल" था, तो ऐसा हो सकता है कि किसी को इस फ़ंक्शन को निष्पादित करने के बाद भी इसके संदर्भ की आवश्यकता हो। इस मामले में, गारबेज कलेक्टर उसे बख्शता है, और वह उसकी याद में कहीं न कहीं लटका रहता है, ताकि जिन लोगों को उसकी आवश्यकता है, वे अभी भी उसके पास पहुंच सकें।

इस प्रकार, createNumberGenerator द्वारा लौटाए गए createNumberGenerator की हमेशा वैरिएबल n की अपनी प्रति तक पहुंच होगी। आप इसे डी एंड डी से बैग की होल्डिंग के रूप में सोच सकते हैं। आप अपने बैग में अपना हाथ डालते हैं और अपने आप को एक व्यक्तिगत अंतर-आयामी "पॉकेट" में पाते हैं, जहाँ आप अपनी इच्छानुसार सब कुछ स्टोर कर सकते हैं।

debounce

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

इसका सार बहुत सरल है: हम कार्य तुरंत नहीं, बल्कि कुछ समय बाद करते हैं। यदि यह समय बीतने से पहले, फ़ंक्शन को फिर से बुलाया गया था, तो हम "टाइमर रीसेट करें"। इस प्रकार, उपयोगकर्ता बटन को कम से कम एक हजार बार क्लिक कर सकता है - केवल एक बलिदान के लिए आवश्यक है। हालाँकि, कम शब्द, अधिक कोड:

 function debounce(f, delay){ var lastTimeout; return function(){ if(lastTimeout){ clearTimeout(lastTimeout); } var args = Array.from(arguments); lastTimeout = setTimeout(function(){ f.apply(null, args); }, delay); } } function sacrifice(name){ console.log(name + "     * *"); } function sacrificeDebounced = debounce(sacrifice, 500); sacrificeDebounced(""); sacrificeDebounced(""); sacrificeDebounced("");

आधे सेकेंड में लीना की बलि दे दी जाएगी, और कटिया और स्वेता हमारे जादुई समारोह की बदौलत बच जाएंगे।

यदि आप पिछले उदाहरणों को ध्यान से पढ़ते हैं, तो आपको इस बात की अच्छी समझ होनी चाहिए कि यहाँ सब कुछ कैसे काम करता है। debounce द्वारा बनाया गया रैपर फ़ंक्शन सेटटाइमआउट का उपयोग करके मूल फ़ंक्शन के विलंबित निष्पादन को ट्रिगर करता है। इस स्थिति में, टाइमआउट पहचानकर्ता अंतिम समय चर में संग्रहीत किया जाता है, जो बंद होने के कारण आवरण तक पहुंच योग्य है। यदि टाइमआउट पहचानकर्ता पहले से ही इस चर में है, तो रैपर इस टाइमआउट को क्लियरटाइम के साथ रद्द कर देता है। यदि पिछला समय समाप्त हो चुका है, तो कुछ भी नहीं होता है। यदि नहीं, तो उसके लिए बहुत बुरा है।

इस पर, शायद, मैं समाप्त कर दूंगा। मुझे आशा है कि आज आपने बहुत सी नई चीजें सीखी हैं, और सबसे महत्वपूर्ण बात - आपने जो कुछ भी सीखा है, उसे आप समझ गए हैं। फिर मिलते हैं।

जेएस में उच्च आदेश कार्य: यंग फाइटर कोर्स

पाइपलाइन

लॉगिंग

आइंस, ज़ेवी, ड्रेई, वीर ...

debounce

More articles: