जावास्क्रिप्ट सरणी विधियों के साथ आरंभ करना .map (), .filter () और .reduce ()

जब मुझे पता चला कि जेएस सरणी तरीकों का उपयोग कैसे किया जाता है। .map() , .filter() और .reduce() , जो कुछ मैंने पढ़ा है, उसे देखा और बहुत जटिल लग रहा था। इन अवधारणाओं को कुछ स्वतंत्र तंत्रों के रूप में माना जाता था जिनका किसी और चीज़ से कोई लेना देना नहीं होता है। मेरे लिए उनके सार को समझ पाना और उन्हें समझना कठिन था।



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

उस कोड के माध्यम से जो मैंने पहले लिखा था, मुझे एहसास हुआ कि 95% मामलों में जब मैंने तार या सरणियों के तत्वों पर पुनरावृत्ति की, तो मैंने निम्नलिखित में से एक किया:

• प्रत्येक मान के लिए निर्देशों का एक निश्चित अनुक्रम लागू करना ( .map() विधि के अनुरूप)।
• फ़िल्टरिंग मान जो किसी दिए गए मानदंड से मेल खाते हैं (जैसा कि .filter() करता है)।
• एक एकल मूल्य ( .reduce() एनालॉग .reduce() लिए सेट किए गए डेटा को कम करना।

यह सच्चाई का क्षण था। यह तब था जब मैंने इन विधियों का सार समझा और जो मैंने लंबे समय से जाना है, उनके साथ उनका संबंध देखा।

अभ्यास करने के लिए, मैंने अपना पुराना कोड लिया और इन विधियों का उपयोग करके इसे फिर से सक्रिय कर दिया। यह बहुत उपयोगी निकला।

और अब, आगे की हलचल के बिना, आइए इन तरीकों के बारे में बात करते हैं, और विशेष रूप से, लूप का उपयोग करने के लिए व्यापक योजनाओं के बजाय उनका उपयोग कैसे करें।

.Map () विधि

यदि आप को निम्न करने की आवश्यकता है, तो .map() विधि का उपयोग किया जाता है:

1. पुनरावृत्त वस्तु के प्रत्येक तत्व पर क्रियाओं का एक निश्चित अनुक्रम करना आवश्यक है।
2. मूल्य को वापस करना आवश्यक है, जो, संभवतः, बदल दिया गया है।

एक साधारण उदाहरण पर विचार करें, जिसमें एक एरे के प्रत्येक तत्व की कीमतें हैं, आपको नई राशियों को खोजने की आवश्यकता है, जिसमें मूल मूल्य और बिक्री कर शामिल हैं:

 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = []; for(let i=0; i < prices.length; i++) {   new_prices.push(prices[i] * 1.06); } 

यहाँ .map() साथ भी ऐसा ही किया जाता है:

 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map(price => price * 1.06); 

यह सुंदर संक्षिप्त वाक्य निर्माण का उपयोग करता है। तो आइए इस उदाहरण को देखें। .map() पद्धति एक कॉलबैक स्वीकार करती है। यह वह फ़ंक्शन है जो सरणी के तत्वों पर लागू किया जाएगा। इस मामले में, यह एक तीर फ़ंक्शन है, जो विधि की घोषणा के बाद सीधे कोष्ठक में घोषित किया जाता है।

price पैरामीटर का नाम वह नाम है जिसका उपयोग सरणी तत्वों के साथ काम करते समय किया जाएगा। चूँकि हमारे एरो फंक्शन में केवल एक पैरामीटर होता है, हम इसे घोषित करते समय कोष्ठक के बिना कर सकते हैं।

तीर ( => ) के बाद की अभिव्यक्ति कॉलबैक का शरीर है। चूंकि फ़ंक्शन बॉडी में केवल एक ही एक्सप्रेशन है, हम बिना कर्ली ब्रेसेस और बिना return कीवर्ड के कर सकते हैं।

यदि आपको यह प्रविष्टि असंगत लगती है, तो इस उदाहरण का थोड़ा विस्तारित संस्करण है:

 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map((price) => {   return price * 1.06 }); 

.Filter () विधि

.filter() विधि का उपयोग उन मामलों में किया जाता है जब कुछ तत्वों को चलने योग्य वस्तु से चुनने की आवश्यकता होती है। इस पद्धति का उपयोग करते समय, आपको यह याद रखना होगा कि फ़िल्टर से संबंधित मान अंतिम परिणाम में शामिल हैं, और इससे बाहर नहीं किया गया है। वह है - वह सब कुछ जिसके लिए फ़ंक्शन पारित हुआ .filter() true लौटेगा, छोड़ दिया जाएगा।

एक उदाहरण पर विचार करें जिसमें पूर्णांक के एक सरणी से केवल विषम तत्वों का चयन किया जाना चाहिए। यहाँ हम ऑपरेटर का उपयोग विभाजन के शेष भाग को लेने के लिए करते हैं और पता लगाते हैं कि क्या सरणी के प्रत्येक तत्व को 2 से विभाजित करने से शेष है। यदि शेष 1 है, तो यह बताता है कि संबंधित संख्या विषम है। पहले, चलो एक नियमित लूप का उपयोग करके इस समस्या को हल करने का एक तरीका देखें:

 const numbers = [1,2,3,4,5,6,7,8]; let odds = []; for(let i=0; i < numbers.length; i++) {   if(numbers[i] % 2 == 1) {      odds.push(numbers[i]);   } } 

.filter() पद्धति, जैसे .filter() , एक कॉलबैक को स्वीकार करता है, जिसमें पुनरावृत्त वस्तु के तत्वों को बदले में पास किया जाएगा:

 const numbers = [1,2,3,4,5,6,7,8]; let odds = numbers.filter(num => num % 2); 

यहाँ काम उसी तरह से आयोजित किया जाता है जैसे कि .map() साथ उदाहरण में। .filter() दिया गया एरो फ़ंक्शन केवल एक पैरामीटर का उपयोग करता है, इसलिए हम कोष्ठक के बिना करते हैं। उसके शरीर में केवल एक अभिव्यक्ति होती है, इसलिए इसे घुंघराले ब्रेसिज़ से छोड़ा जा सकता है और यह बिना return लिए स्वीकार्य है।

.Reduce () विधि

और अब हम अंत में .reduce() विधि के लिए तैयार हो गए। मेरा मानना ​​है कि, आज के तीन तरीकों में से सबसे अचूक है। इस पद्धति का नाम संकेत देता है कि इसका उपयोग एक से कई मानों को कम करने के लिए किया जाता है। हालांकि, यह मुझे लगता है कि इसे एक ऐसी विधि के रूप में सोचना आसान है जो आपको कुछ हिस्सों से कुछ मूल्यों को इकट्ठा करने की अनुमति देता है, न कि एक ऐसी विधि के रूप में जो आपको कुछ "पतन" या "कम" करने की अनुमति देता है।

कोड का निर्माण करते समय जिसमें यह विधि कहा जाता है, एक निश्चित प्रारंभिक मूल्य पहले सेट किया जाता है। जैसा कि विधि सरणी के मूल्यों पर पुनरावृत्त होती है, यह प्रारंभिक मान संशोधित होता है और संशोधित रूप में, अगले पुनरावृत्ति में पारित किया जाता है।

यहां एक क्लासिक समस्या है, जिसे हल करने के लिए आपको सरणी के तत्वों की राशि की गणना करने की आवश्यकता है। हमारे मामले में, यह एक निश्चित दान परियोजना के लिए दान की राशि खोजने में शामिल है:

 const donations = [5, 20, 100, 80, 75]; let total = 0; for(let i=0; i < donations.length; i++) {   total += donations[i]; } 

.map() और .filter() विपरीत, .reduce() मेथड में एक कॉलबैक की जरूरत होती है, जिसमें दो पैरामीटर होते हैं। यह बैटरी और वर्तमान मूल्य है। बैटरी पहला पैरामीटर है। यह वह है जो प्रत्येक पुनरावृत्ति में संशोधित किया गया है और निम्नलिखित को पारित किया गया है:

 const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => {   return total + donation; }); 

.reduce() लिए एक दूसरा तर्क भी पास कर सकते हैं। यह वह है जो बैटरी के लिए प्रारंभिक मूल्य की भूमिका निभाएगा। मान लीजिए कि हम दो दिनों में दान की कुल राशि जानना चाहते हैं, यह देखते हुए कि कल यह राशि $ 450 थी, और आज के दान के बारे में जानकारी एक सरणी में संग्रहीत है:

 const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => {   return total + donation; }, 450); 

परिणाम

उम्मीद है कि अब आप .filter() सरणी विधियाँ .filter() .map() , .filter() और .reduce() पता लगा .reduce() । उन्हें तंत्र के रूप में सोचें जो आपके कोड की पठनीयता में सुधार करते हैं। वे आपको पारंपरिक छोरों का उपयोग करके प्राप्त किए गए लोगों की तुलना में अधिक कॉम्पैक्ट प्रोग्राम लिखने की अनुमति देते हैं। लेकिन उनकी मुख्य ताकत यह है कि वे आपको उस इरादे को स्पष्ट रूप से व्यक्त करने की अनुमति देते हैं जो कोड को रेखांकित करता है।

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

प्रिय पाठकों! क्या आप .map (), .filter (), और .reduce () JS सरणी मेथड्स का उपयोग करते हैं?