मैप जावास्क्रिप्ट:ए गाइड टू द मैप () मेथड

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

इन विधियों में से एक को map() . कहा जाता है तरीका। यह विधि किसी मौजूदा सरणी के माध्यम से लूप करती है और उस सरणी में सभी वस्तुओं पर एक विशिष्ट कार्य करती है।

इस गाइड में, हम इस बारे में बात करने जा रहे हैं कि जावास्क्रिप्ट का उपयोग कैसे करें map() समारोह। हम map() . के तीन सामान्य उदाहरणों के माध्यम से चलेंगे आरंभ करने में आपकी सहायता करने के लिए कार्य करें।

मैप फंक्शन क्या है?

जावास्क्रिप्ट map() विधि किसी सरणी में प्रत्येक आइटम पर एक विशिष्ट फ़ंक्शन को कॉल करती है। इस फ़ंक्शन का परिणाम तब अपने स्वयं के सरणी में ले जाया जाता है।

उदाहरण के लिए, मान लें कि आप किसी सरणी में प्रत्येक आइटम को दो से गुणा करना चाहते हैं। आप ऐसा फ़ंक्शन बनाकर कर सकते हैं जो प्रत्येक सरणी आइटम को दो से गुणा करता है, और उस फ़ंक्शन को map() में ले जाता है तरीका।

map() . का सिंटैक्स समारोह है:

const newArray = oldArray.map(function, thisValue);

function कॉलबैक फ़ंक्शन है जो सरणी में प्रत्येक तत्व पर चलाया जाएगा। कार्यों के बारे में अधिक जानने के लिए, आप जावास्क्रिप्ट कार्यों के लिए हमारी अंतिम मार्गदर्शिका पढ़ सकते हैं। thisValue डिफ़ॉल्ट मान है जो this . में संग्रहीत किया जाएगा फ़ंक्शन में परिवर्तनशील। डिफ़ॉल्ट रूप से, यह अपरिभाषित है।

मानचित्र विधि कॉलबैक फ़ंक्शन के परिणामों के आधार पर एक नई सरणी बनाती है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

map() विधि के कई उपयोग हैं। सरणी तत्वों की सूची पर फ़ंक्शन को कॉल करना सबसे आम है। इसका एक उदाहरण संख्याओं की सूची में प्रत्येक संख्या को गुणा करना या स्ट्रिंग्स की सूची में प्रत्येक स्ट्रिंग की लंबाई का पता लगाना होगा।

आपको रिएक्ट या Vue.js जैसे जावास्क्रिप्ट पुस्तकालयों में सूचियों को प्रस्तुत करने के लिए उपयोग किया जाने वाला फ़ंक्शन भी मिलेगा।

मानचित्र के साथ किसी फ़ंक्शन को कॉल करना

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% की वृद्धि की है। सबसे पहले, हमने "कुकीप्राइस" वेरिएबल में कुकी कीमतों की एक सूची घोषित की। फिर, हमने map() . का उपयोग किया एक फ़ंक्शन के साथ विधि जो प्रत्येक कुकी के लिए 5% मूल्य वृद्धि की गणना करती है।

"कुकी * 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 }]

इस उदाहरण में, हमने गणना की है कि प्रत्येक ग्राहक को उनके द्वारा खरीदी गई कुकीज़ की संख्या के आधार पर कुल कितने अंक दिए जाने चाहिए।

सबसे पहले, हमने "ग्राहक" नामक वस्तुओं की एक सरणी घोषित की। यह सूची हमारे ग्राहकों के नाम और कुंजी:वैल्यू पेयर का उपयोग करके उनके द्वारा खरीदी गई कुकी की संख्या को संग्रहीत करती है।

फिर, हमने calculateLoyaltyPoints() . नामक एक फ़ंक्शन घोषित किया . यह फ़ंक्शन प्रत्येक ग्राहक आइटम में "अंक" नामक एक नया आइटम जोड़ता है, जिसकी गणना प्रत्येक ग्राहक द्वारा खरीदी गई कुकीज़ की संख्या को 10 से गुणा करके की जाती है।

हम map() . का उपयोग करते हैं हमारे ग्राहकों की सूची के माध्यम से पुनरावृति करने की विधि और हमारे calculateLoyaltyPoints() . को लागू करें समारोह। अंत में, हम ग्राहकों की संशोधित सूची का प्रिंट आउट लेते हैं। यह सूची अब हमारे "अंक" मूल्य को दर्शाती है जिसे हमने प्रत्येक ग्राहक की प्रविष्टि में जोड़ा है।

लाइब्रेरी का उपयोग करके सूची प्रस्तुत करना

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);

यह कोड रिएक्ट में एक घटक बनाता है जो एक सूची प्रस्तुत करता है। प्रत्येक सूची आइटम