JavaScript Spread Operator: एक संपूर्ण गाइड

JavaScript स्प्रेड ऑपरेटर उस सिंटैक्स में अरे को विस्तारित करता है जो आर्गुमेंट्स स्वीकार करता है। स्प्रेड ऑपरेटर का उपयोग आमतौर पर ऑब्जेक्ट्स को डुप्लिकेट करने, अरे को मर्ज करने, या लिस्ट की सामग्री को फंक्शन में पास करने के लिए किया जाता है।

स्प्रेड ऑपरेटर। नहीं, इसका टोस्ट से कोई लेना-देना नहीं है। JavaScript में, स्प्रेड ऑपरेटर का एक विशिष्ट अर्थ है: यह इटरेबल ऑब्जेक्ट की सामग्री तक पहुंचने का एक तरीका है। हालांकि यह टोस्ट पर स्प्रेड लगाने जितना मजेदार नहीं लग सकता, यह जानने के लिए एक अविश्वसनीय रूप से उपयोगी उपकरण है।

इस गाइड में, हम JavaScript स्प्रेड ऑपरेटर और यह कैसे काम करता है, के बारे में बात करने जा रहे हैं। हम आपको शुरू करने में मदद करने के लिए सामान्य उपयोग के मामलों के कुछ उदाहरणों के माध्यम से चलेंगे।

JavaScript Spread Operator क्या है?

JavaScript स्प्रेड ऑपरेटर आपको इटरेबल ऑब्जेक्ट की सामग्री तक पहुंचने देता है। स्प्रेड ऑपरेटर तीन डॉट्स (एक दीर्घवृत्त) का एक सेट है जिसके बाद उस इटरेबल का नाम आता है जिसे आप एक्सेस करना चाहते हैं। यह ऑपरेटर JavaScript ES6 में पेश किया गया था।

इटरेबल ऑब्जेक्ट्स के तीन प्रकार हैं: अरे, ऑब्जेक्ट लिटरल्स, और स्ट्रिंग्स। फॉर लूप का उपयोग करके, आप इन सभी प्रकार के डेटा के माध्यम से लूप कर सकते हैं और उन पर एक सामान्य प्रक्रिया चला सकते हैं।

इटरेबल ऑब्जेक्ट्स उपयोगी हैं क्योंकि आप उन पर कई बार एक ही प्रक्रिया निष्पादित कर सकते हैं। आप स्ट्रिंग के माध्यम से लूप कर सकते हैं और कुछ वर्णों को बदल सकते हैं। आप अरे के माध्यम से लूप कर सकते हैं और अरे में संग्रहीत सभी मानों का योग बना सकते हैं।

स्प्रेड ऑपरेटर के लिए सिंटैक्स है:

var names = ["John", "Lisa", "Harry"]; var new_names = [...names, "Leslie"]; console.log(new_names);

इस सिंटैक्स में, हम अपने "names" लिस्ट की सामग्री को "new_names" नामक लिस्ट में पास करने के लिए ...names का उपयोग करते हैं। "new_names" लिस्ट में "names" लिस्ट के सभी आइटम्स, साथ ही एक नया नाम: Leslie शामिल है।

स्प्रेड ऑपरेटर के लिए तीन सामान्य उपयोग के मामले हैं:

• इटरेबल की एक प्रति बनाना।
• नए इटरेबल में आइटम्स जोड़ना।
• फंक्शन में आर्गुमेंट्स की सूची पास करना।

स्प्रेड सिंटैक्स लिस्ट में सभी व्यक्तिगत एलिमेंट्स को दर्शाता है।

Spread Operator JavaScript: इटरेबल की प्रति बनाना

स्प्रेड ऑपरेटर इटरेबल को डुप्लिकेट करने का एक प्रभावी तरीका है। जबकि इस समस्या को हल करने के अन्य तरीके हैं, स्प्रेड ऑपरेटर वास्तव में उपयोग करना आसान है। इटरेबल की प्रति बनाने के लिए, तीन डॉट्स और उस अरे का नाम निर्दिष्ट करें जिसे आप बनाना चाहते हैं।

हमारे पिछले उदाहरण में, हमने दिखाया कि यह अरे के साथ कैसे काम करता है। हम स्प्रेड ऑपरेटर का उपयोग JavaScript ऑब्जेक्ट्स को डुप्लिकेट करने के लिए भी कर सकते हैं:

const lemon_drizzle = { name: "Lemon Drizzle", price: 1.95, vegan: true } const new_lemon_drizzle = {...lemon_drizzle}; console.log(new_lemon_drizzle);

हमारा कोड JavaScript कंसोल पर निम्नलिखित प्रिंट करता है:

{ name: "Lemon Drizzle", price: 1.95, vegan: true }

इस उदाहरण में हमें कुछ महत्वपूर्ण अंतर करने की आवश्यकता है। हम JavaScript ऑब्जेक्ट की प्रति बना रहे हैं। इसका मतलब है कि हमें स्क्वायर ब्रैकेट्स ([]) के बजाय कर्ली ब्रेसेस ({}) का उपयोग करने की आवश्यकता है।

दूसरा, एक सिंगल अरे निर्दिष्ट करने के बजाय, हमने एक ऑब्जेक्ट निर्दिष्ट किया है। इस ऑब्जेक्ट में तीन कुंजियाँ और मान हैं, जिनमें से प्रत्येक हमारे "Lemon Drizzle" कपकेक से संबंधित है।

Spread JavaScript: नए इटरेबल में आइटम्स जोड़ना

स्प्रेड ऑपरेटर के उपयोग के मामले इटरेबल्स की प्रतिलिपि बनाने तक नहीं रुकते! तलाशने के लिए और भी बहुत कुछ है। स्प्रेड ऑपरेटर का उपयोग आमतौर पर एक इटरेबल से आइटम्स को अगले में जोड़ने के लिए किया जाता है। निम्न उदाहरण पर विचार करें:

const cupcakes = [ 'Lemon Drizzle', 'Chocolate Chip', 'Vanilla Iced' ]; const new_cupcakes = [...cupcakes, 'Red Velvet', 'Raspberry Dark Chocolate']; console.log(new_cupcakes);

हमारा कोड लौटाता है:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

हमने अपने मूल JavaScript अरे की एक प्रति बनाई है जिसे "new_cupcakes" कहा जाता है, जिसमें कुछ अतिरिक्त मान भी शामिल हैं जिन्हें हमने बनाया है।

आप दो इटरेबल्स को एक साथ मर्ज करने के लिए उसी सिंटैक्स का उपयोग कर सकते हैं। आपको बस स्प्रेड ऑपरेटर का उपयोग करके स्क्वायर ब्रैकेट्स के अंदर दो इटरेबल्स निर्दिष्ट करने की आवश्यकता है:

const old_menu = [ 'Lemon Drizzle', 'Chocolate Chip', 'Vanilla Iced' ]; const new_menu = [ 'Red Velvet', 'Raspberry Dark Chocolate' ] const final_menu = [...old_menu, ...new_menu]; console.log(final_menu);

हमारा कोड लौटाता है:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

पहले की तरह ही परिणाम लौटाया गया है लेकिन इस बार हमने दो अरे को एक साथ मर्ज किया है।

Spread JavaScript: फंक्शन में आर्गुमेंट्स पास करना

जब आप JavaScript फंक्शन में कई आर्गुमेंट्स पास कर रहे होते हैं, तो स्प्रेड ऑपरेटर का उपयोग करना सहायक हो सकता हैं। इस उदाहरण पर विचार करें:

function placeOrder(name, order, price) { console.log('Name: ' + name); console.log('Order: ' + order); console.log('Price: ' + price); } placeOrder('Geoff', 'Red Velvet', 1.85);

हमारा कोड लौटाता है:

Name: Geoff Order: Red Velvet Price 1.85

हमने placeOrder() नामक फंक्शन घोषित किया है जो तीन आर्गुमेंट्स लेता है और उन्हें कंसोल पर प्रिंट करता है। प्रत्येक मान एक लेबल से पहले होता है जो वर्णन करता है कि प्रत्येक आर्गुमेंट में क्या है।

हालांकि यह कोड कार्यात्मक है, हम अपने आर्गुमेंट्स को एक अरे में निर्दिष्ट कर सकते हैं और उन्हें अपने फंक्शन में पास करने के लिए स्प्रेड ऑपरेटर का उपयोग कर सकते हैं:

function placeOrder(name, order, price) { console.log('Name: ' + name); console.log('Order: ' + order); console.log('Price: ' + price); } const order = ['Geoff', 'Red Velvet', 1.85]; placeOrder(...order);

हमारा कोड लौटाता है:

Name: Geoff Order: Red Velvet Price 1.85

इस कोड का आउटपुट समान है, लेकिन हमारे कोड के काम करने का तरीका अलग है। सीधे अपने फंक्शन में मान पास करने के बजाय, हम उन मानों को एक लिस्ट में निर्दिष्ट करते हैं। फिर हम उन मानों को अपने फंक्शन में पास करने के लिए स्प्रेड ऑपरेटर का उपयोग करते हैं।

निष्कर्ष

स्प्रेड ऑपरेटर JavaScript में व्यापक रूप से उपयोग किया जाता है। यह इटरेबल ऑब्जेक्ट्स की प्रतिलिपि बनाना, नए इटरेबल में आइटम्स जोड़ना, और फंक्शन में आर्गुमेंट्स पास करना आसान बनाता है। स्प्रेड ऑपरेटर के लिए सिंटैक्स तीन डॉट्स हैं, उसके बाद वह इटरेबल ऑब्जेक्ट जिसे आप एक्सेस करना चाहते हैं।

अब आप JavaScript स्प्रेड ऑपरेटर का उपयोग प्रो की तरह करने के लिए तैयार हैं!

शीर्ष JavaScript सीखने के संसाधनों, किताबों, और कोर्सेज पर सलाह के लिए, हमारे How to Learn JavaScript लेख को देखें।