प्रोग्रामर अपने कोड में पुनरावृत्ति कम करना पसंद करते हैं। जितना अधिक आप अपना कोड दोहराते हैं, उतना कम रखरखाव योग्य यह होता है, और आपके प्रोग्राम उतने धीमे चलते हैं। यही कारण है कि जावास्क्रिप्ट में डेटासेट के माध्यम से पुनरावृति करने के लिए विभिन्न मेथड्स हैं।
इन मेथड्स में से एक को map() मेथड कहा जाता है। यह मेथड किसी मौजूदा ऐरे के माध्यम से लूप करता है और उस ऐरे के सभी आइटम्स पर एक विशिष्ट फंक्शन करता है।
इस गाइड में, हम जावास्क्रिप्ट map() फंक्शन का उपयोग करने के तरीके के बारे में बात करेंगे। हम map() फंक्शन के तीन सामान्य उदाहरणों के माध्यम से चलेंगे ताकि आप शुरुआत कर सकें।
map फंक्शन क्या है?
जावास्क्रिप्ट map() मेथड ऐरे में प्रत्येक आइटम पर एक विशिष्ट फंक्शन को कॉल करता है। इस फंक्शन का परिणाम फिर अपने स्वयं के ऐरे में चला जाता है।
उदाहरण के लिए, मान लीजिए आप किसी ऐरे में प्रत्येक आइटम को दो से गुणा करना चाहते हैं। आप एक फंक्शन बनाकर ऐसा कर सकते हैं जो प्रत्येक ऐरे आइटम को दो से गुणा करता है, और उस फंक्शन को map() मेथड में ले जाते हैं।
map() फंक्शन का सिंटैक्स है:
const newArray = oldArray.map(function, thisValue);
function वह कॉलबैक फंक्शन है जो ऐरे में प्रत्येक एलिमेंट पर चलेगा। फंक्शन्स के बारे में अधिक जानने के लिए, आप जावास्क्रिप्ट फंक्शन्स पर हमारा अल्टीमेट गाइड पढ़ सकते हैं। thisValue वह डिफ़ॉल्ट मान है जो फंक्शन में this वेरिएबल में स्टोर होगा। डिफ़ॉल्ट रूप से, यह undefined है।
map मेथड कॉलबैक फंक्शन के परिणामों के आधार पर एक नया ऐरे बनाता है।
map() मेथड के कई उपयोग हैं। सबसे आम है ऐरे एलिमेंट्स की सूची पर फंक्शन कॉल करना। इसका एक उदाहरण होगा संख्याओं की सूची में प्रत्येक संख्या को गुणा करना, या स्ट्रिंग्स की सूची में प्रत्येक स्ट्रिंग की लंबाई ढूंढना।
आपको यह फंक्शन रिएक्ट या Vue.js जैसे जावास्क्रिप्ट लाइब्रेरीज़ में सूचियों को रेंडर करने के लिए भी उपयोग होता हुआ मिलेगा।
Map के साथ फंक्शन कॉल करना
map() मेथड आपको किसी सूची में प्रत्येक आइटम पर एक दोहराव वाला कार्य करने की अनुमति देता है, जो इसे कई मामलों में उपयोगी बनाता है।
मान लीजिए आपके पास एक कुकी स्टोर है और आप प्रत्येक कुकी की कीमत 5% बढ़ाने जा रहे हैं। प्रत्येक नई कीमत की व्यक्तिगत रूप से गणना करने के बजाय, आप map() मेथड का उपयोग कर सकते हैं।
यहां वह कोड है जिसका आप उपयोग करेंगे:
const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45]; const newCookiePrices = cookiePrices.map(cookie => { var price = cookie * 1.05; return price.toFixed(2); }); console.log(newCookiePrices);
हमारा कोड रिटर्न करता है:
["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]
इस उदाहरण में, हमने प्रत्येक कुकी की कीमत 5% बढ़ाई है। पहले, हमने "cookiePrices" वेरिएबल में कुकी कीमतों की एक सूची घोषित की। फिर, हमने प्रत्येक कुकी के लिए 5% मूल्य वृद्धि की गणना करने वाले फंक्शन के साथ map() मेथड का उपयोग किया।
"cookie * 1.05" ने प्रतिशत वृद्धि की गणना की, फिर हमने उस वृद्धि को वापस किया, जिसे निकटतम दो दशमलव स्थानों तक राउंड किया गया। अंत में, हमने console.log() मेथड का उपयोग करके नए ऐरे को कंसोल पर प्रिंट किया।
हम अपने फंक्शन को अपने स्वयं के फंक्शन में भी ले जा सकते हैं ताकि हमारा कोड अधिक पठनीय हो:
function calculateIncrease(cookie) { var price = cookie * 1.05; return price.toFixed(2); } const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45]; const newCookiePrices = cookiePrices.map(calculateIncrease); console.log(newCookiePrices);
हमारा कोड पहले के समान मान लौटाता है, लेकिन अधिक पठनीय है:
["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]
ऐरे में आइटम्स बदलना
map() मेथड का उपयोग अक्सर ऐरे में आइटम्स बदलने के लिए किया जाता है। मान लीजिए हमारी कुकी शॉप अपने ग्राहकों के लिए एक लॉयल्टी प्रोग्राम बना रही है। आपके द्वारा खरीदी गई प्रत्येक कुकी आपको 10 पॉइंट्स देती है, और यदि आप 100 पॉइंट्स कमाते हैं, तो आपको एक मुफ्त कुकी मिलेगी।
निम्न प्रोग्राम हमें इस कार्य को पूरा करने की अनुमति देगा:
var customers = [ { name: "Hannah Geoffrey", cookiesPurchased: 2 }, { name: "Peter Clarkson", cookiesPurchased: 3 }, { name: "Steven Hanson", cookiesPurchased: 7 } ] function calculateLoyaltyPoints(customer) { var newCustomer = { name: customer.name, cookiesPurchased: customer.cookiesPurchased, points: customer.cookiesPurchased * 10 } return newCustomer; } var customersWithPoints = customers.map(calculateLoyaltyPoints); console.log(customersWithPoints);
हमारा कोड रिटर्न करता है:
[{ cookiesPurchased: 2, name: "Hannah Geoffrey", points: 20 }, { cookiesPurchased: 3, name: "Peter Clarkson", points: 30 }, { cookiesPurchased: 7, name: "Steven Hanson", points: 70 }]
इस उदाहरण में, हमने प्रत्येक ग्राहक को कितने पॉइंट्स दिए जाने चाहिए, इसकी गणना की है कि उन्होंने कितनी कुकीज़ खरीदी हैं।
पहले, हमने "customers" नामक ऑब्जेक्ट्स का एक ऐरे घोषित किया। यह सूची की-वैल्यू पेयर्स का उपयोग करके हमारे ग्राहकों के नाम और उन्होंने कितनी कुकीज़ खरीदी हैं, स्टोर करती है।
फिर, हमने calculateLoyaltyPoints() नामक एक फंक्शन घोषित किया। यह फंक्शन प्रत्येक ग्राहक आइटम में "points" नामक एक नया आइटम जोड़ता है जिसकी गणना प्रत्येक ग्राहक द्वारा खरीदी गई कुकीज़ की संख्या को 10 से गुणा करके की जाती है।
हम अपने ग्राहकों की सूची के माध्यम से पुनरावृति करने और अपने calculateLoyaltyPoints() फंक्शन को लागू करने के लिए map() मेथड का उपयोग करते हैं। अंत में, हम संशोधित ग्राहकों की सूची प्रिंट करते हैं। यह सूची अब प्रत्येक ग्राहक की एंट्री में जोड़े गए हमारे "points" मान को दर्शाती है।
लाइब्रेरी का उपयोग करके सूची रेंडर करना
map() मेथड आमतौर पर रिएक्ट जैसी जावास्क्रिप्ट लाइब्रेरीज़ में उपयोग किया जाता है। इस मेथड का उद्देश्य सूची में आइटम्स को रेंडर करना है। आइए रिएक्ट में map() के एक उदाहरण के माध्यम से चलते हैं।
मान लीजिए हम अपनी वेबसाइट पर अपनी स्टोर द्वारा बेची जाने वाली कुकीज़ की सूची दिखाना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
import React from "react"; import ReactDOM from "react-dom"; var cookies = ["Raspberry Chocolate Chip", "White Chocolate Chip", "Oat", "Milk Chocolate Chip"]; const CookieList = () => ( <div> <ul>{cookies.map((cookie, i) => <li key={i}>{cookie}</li> )} </ul> </div> ); const root = document.getElementById("root"); ReactDOM.render(<CookieList />, root);
यह कोड रिएक्ट में एक कंपोनेंट बनाता है जो एक सूची रेंडर करता है। प्रत्येक सूची आइटम <li> टैग के भीतर होता है जिसे map() का उपयोग करके रेंडर किया जाता है। map() सूची में प्रत्येक आइटम के लिए एक व्यक्तिगत <li> टैग बनाता है, और "i" वेरिएबल प्रत्येक सूची आइटम को एक यूनिक की असाइन करता है।
Map बनाम इटरेटर मेथड्स
Map जावास्क्रिप्ट में एक इटरेटर मेथड का उदाहरण है। ये मेथड्स आपको सूची में सभी आइटम्स के माध्यम से लूप करने और कुछ एक्शन करने की अनुमति देते हैं।
जब आप map() फंक्शन का उपयोग करने का निर्णय ले रहे हों, तो यह अच्छी प्रथा है कि पहले पूछें कि क्या कोई अन्य इटरेटर मेथड बेहतर होगा। यह सुनिश्चित करेगा कि आप कार्य के लिए सही टूल चुनें।
यहां जावास्क्रिप्ट में मौजूद अन्य इटरेटर मेथड्स हैं:
- reduce(): रिड्यूस मेथड आपको ऐरे को एक सिंगल मान तक कम करने की अनुमति देता है। यह मेथड सबसे अच्छा है यदि आप ऐरे में सभी आइटम्स को जोड़ने जैसा कुछ करना चाहते हैं।
- filter(): फिल्टर आपको सूची से उन आइटम्स को हटाने की अनुमति देता है जो विशेष मानदंडों को पूरा नहीं करते।
- forEach(): forEach() सूची में प्रत्येक आइटम पर एक फंक्शन चलाता है। forEach() फॉर लूप के समान है क्योंकि यह आपको ऐरे पर लूप करने और प्रत्येक आइटम पर कार्य करने की अनुमति देता है।
आप सोच रहे होंगे, "map वास्तव में forEach() मेथड के समान लगता है। क्या वे समान हैं?" यह एक अच्छा प्रश्न है। इन दो मेथड्स के बीच एक सूक्ष्म अंतर है।
map() फंक्शन एक सूची पर पुनरावृति करता है, सूची में प्रत्येक आइटम को बदलता है और एक नई सूची लौटाता है। दूसरी ओर, forEach() फंक्शन एक सूची पर पुनरावृति करता है और, एक साइड इफेक्ट के रूप में, सूची पर कुछ ऑपरेशन लागू करता है।
map() फंक्शन सबसे अच्छा उपयोग किया जाता है यदि आपको सूची में प्रत्येक आइटम पर फंक्शन कॉल करने, रिएक्ट जैसे फ्रेमवर्क में सूची कंपोनेंट घोषित करने, या सूची की सामग्री बदलने की आवश्यकता है।
निष्कर्ष
map() मेथड दोहराव वाले कार्यों को कई बार करने के लिए उपयोगी है। यह रिएक्ट में सूचियों जैसे कंपोनेंट्स घोषित करने के लिए भी उपयोगी है।
इस ट्यूटोरियल में, हमने map() मेथड के तीन मुख्य उपयोगों का विश्लेषण किया। अब आप एक विशेषज्ञ डेवलपर की तरह जावास्क्रिप्ट map() मेथड का उपयोग करना शुरू करने के लिए तैयार हैं!
