जावास्क्रिप्ट में बेहतर कंडीशनल लिखने के लिए 6 उपयोगी टिप्स
किसी भी प्रोग्रामिंग भाषा में, कोड को इनपुट में दी गई शर्त के आधार पर निर्णय लेने और क्रियाओं को निष्पादित करने की आवश्यकता होती है।
उदाहरण के लिए, एक खेल में, यदि खिलाड़ी के जीवन की संख्या 0 है, तो खेल समाप्त हो गया है। मौसम ऐप में, यदि इसे सुबह देखा जा रहा है, तो सूर्योदय का ग्राफ़िक दिखाएं; रात हो तो तारे और चाँद दिखाओ। इस लेख में, हम यह पता लगाएंगे कि तथाकथित सशर्त बयान कैसे काम करते हैं जावास्क्रिप्ट .
यदि आप . के साथ काम करते हैं जावास्क्रिप्ट , आप बहुत सारे कोड लिख रहे होंगे जिसमें कई शर्तें शामिल होंगी। सशर्त पहली बार में सीखना आसान लग सकता है लेकिन कुछ लिखने के अलावा भी बहुत कुछ है |_+_| बयान। सशर्त के साथ बेहतर और क्लीनर कोड लिखने के लिए यहां कुछ उपयोगी टिप्स दी गई हैं।
मैं बूस्ट कहां से खरीद सकता हूं
विषयसूची
- Array.शामिल है
- जल्दी बाहर निकलना / जल्दी लौटना
- स्विच स्टेटमेंट के बजाय ऑब्जेक्ट लिटरल या मैप
- डिफ़ॉल्ट पैरामीटर और विनाशकारी
- Array.every और Array.some का उपयोग करके सभी/आंशिक मानदंडों का मिलान करें
- वैकल्पिक चेनिंग और नलिश कोलेसिंग का प्रयोग करें
1. ऐरे.शामिल हैं
एकाधिक स्थितियों के लिए |_+_| . का उपयोग करें
उदाहरण के लिए:
if/elseउपरोक्त कोड अच्छा दिखता है क्योंकि हमारे पास जांचने के लिए केवल दो जानवर हैं। हालाँकि, हम उपयोगकर्ता इनपुट के बारे में सुनिश्चित नहीं हैं। क्या होगा अगर, हमें कोई और जानवर मिल जाए? यदि हम कथन को और अधिक बढ़ाते रहेंगे |_+_| बयान, कोड को बनाए रखना कठिन हो जाएगा, न कि साफ।
समाधान:
हम |_+_| . का उपयोग करके उपरोक्त सशर्त को फिर से लिख सकते हैं
Array.includesयहां, हमने जानवरों की एक सरणी बनाई है ताकि कोड के बाकी हिस्से से शर्तों को अलग से निकाला जा सके। अब, यदि हम किसी अन्य जानवर की जांच करना चाहते हैं, तो हमें केवल एक नया सरणी आइटम जोड़ना होगा।
हम |_+_| . का भी उपयोग कर सकते हैं इस फ़ंक्शन के दायरे से बाहर चर इसे कोड में कहीं और पुन: उपयोग करने के लिए। यह क्लीनर कोड लिखने का एक तरीका है जिसे समझना और बनाए रखना आसान है। है ना?
2. जल्दी बाहर निकलना / जल्दी लौटना
यह आपके कोड को संघनित करने और इसे साफ-सुथरा दिखाने के लिए एक बहुत अच्छी ट्रिक है। मुझे याद है कि जब मैंने पेशेवर रूप से काम करना शुरू किया, तो मैंने सशर्त लिखना सीखा |_+_| मेरे पहले दिन।
आइए पिछले उदाहरण को लें और कुछ और शर्तें जोड़ें। क्या होगा अगर जानवर के बजाय एक साधारण |_+_|, यह एक |_+_| . है कुछ गुणों के साथ।
तो अब आवश्यकताएं हैं:
- यदि कोई जानवर नहीं है, तो एक त्रुटि फेंकें
- जानवर के प्रकार को प्रिंट करें
- जानवर का नाम प्रिंट करें
- जानवर का लिंग प्रिंट करें
function printAnimals(animal) { if (animal === 'dog' || animal === 'cat') { console.log(`I have a ${animal}`); } } console.log(printAnimals('dog')); // I have a dog उपरोक्त कोड के बारे में आप क्या सोचते हैं?
यह ठीक काम करता है, लेकिन कोड लंबा और बनाए रखने में मुश्किल है। यदि वे लाइनिंग का भी उपयोग नहीं करते हैं, तो यह पता लगाने में कुछ समय बर्बाद हो सकता है कि क्लोजिंग ब्रैकेट कहां हैं। कल्पना कीजिए कि क्या होगा यदि कोड में अधिक जटिल तर्क है। बहुत सारे |_+_| बयान!
हम उपरोक्त फ़ंक्शन को टर्नरी ऑपरेटरों के साथ रिफैक्टर कर सकते हैं, |_+_| शर्तें, आदि, लेकिन इसके बजाय कई रिटर्न स्टेटमेंट का उपयोग करके अधिक सटीक कोड लिखें।
ORरिफैक्टेड संस्करण में, |_+_| और |_+_| भी शामिल है। डिफ़ॉल्ट पैरामीटर यह सुनिश्चित करता है कि यदि हम |_+_| . पास करते हैं विधि के तर्क के रूप में, हमारे पास अभी भी नष्ट करने के लिए एक मूल्य है, यहाँ जो एक खाली वस्तु है |_+_|।
आमतौर पर, पेशेवर दुनिया में, कोड इन दो दृष्टिकोणों के बीच में कहीं लिखा जाता है। बहुत से लोग |_+_| कथनों को समझना आसान है।
सिंगल कोट्स बनाम डबल कोट्स जावास्क्रिप्ट
एक और उदाहरण:
Array.includesअब, ऊपर दिए गए कोड को देखें, हमारे पास है:
- 1 अगर/अन्यथा वह कथन जो अमान्य स्थिति को फ़िल्टर करता है
- नेस्टेड के 3 स्तर अगर बयान (शर्त 1, 2 और 3)
पालन करने के लिए एक सामान्य नियम है |_+_|।
function printAnimals(animal) { const animals = ['dog', 'cat', 'hamster', 'turtle']; if (animals.includes(animal)) { console.log(`I have a ${animal}`); } } console.log(printAnimals('hamster')); // I have a hamster ऐसा करने से, हमारे पास नेस्टेड स्टेटमेंट का एक कम स्तर होता है। यह कोडिंग शैली अच्छी है, खासकर जब आपके पास लंबे समय तक कथन है।
हम नेस्टिंग को और कम कर सकते हैं |_+_|s, परिस्थितियों को उलट कर और जल्दी वापस लौट सकते हैं। हम इसे कैसे करते हैं, यह देखने के लिए नीचे दी गई शर्त 2 को देखें:
animalsशर्त 2 की शर्तों को उलटने से, कोड में अब कोई नेस्टेड स्टेटमेंट नहीं है। यह तकनीक तब उपयोगी होती है जब हमारे पास बहुत सारी शर्तें होती हैं और जब कोई विशेष शर्त पूरी नहीं होती है तो हम आगे की प्रक्रिया को रोकना चाहते हैं।
हालाँकि, ऐसा करने के लिए कोई कठोर नियम नहीं है। आप इसे पिछले संस्करण (नेस्टेड के साथ शर्त 2) के रूप में छोड़ सकते हैं, क्योंकि:
कोड छोटा और सीधा है, यह नेस्टेड |_+_|s के साथ स्पष्ट है।
लंबे समय में डेवलपर्स के लिए इनवर्टिंग स्थितियों में अधिक सोच/संज्ञानात्मक भार हो सकता है।
इसलिए हमेशा |_+_| . के लिए लक्ष्य रखें और |_+_| लेकिन इसे ज़्यादा मत करो।
3. स्विच स्टेटमेंट के बजाय ऑब्जेक्ट लिटरल या मैप
आइए नीचे दिए गए उदाहरण को देखें, हम रंग के आधार पर फलों को प्रिंट करना चाहते हैं:
early exitउपरोक्त कोड गलत नहीं है, लेकिन यह अभी भी काफी क्रियात्मक है। वही परिणाम |_+_| . के साथ प्राप्त किया जा सकता है क्लीनर सिंटैक्स के साथ:
Quickbooks 2016 सर्वर नहीं चल रहा है
stringवैकल्पिक रूप से, आप |_+_| . का उपयोग कर सकते हैं एक ही परिणाम प्राप्त करने के लिए:
object|_+_| ES2015 के बाद से उपलब्ध वस्तु प्रकार है, जो |_+_| . को संग्रहीत करने की अनुमति देता है जोड़ा।
उपरोक्त उदाहरण के लिए, वही परिणाम |_+_| . के साथ प्राप्त किया जा सकता है भी।
const printAnimalDetails = animal => { let result; // declare a variable to store the final value // condition 1: check if animal has a value if (animal) { // condition 2: check if animal has a type property if (animal.type) { // condition 3: check if animal has a name property if (animal.name) { // condition 3: check if animal has a gender property if (animal.gender) { result = `${animal.name} is a ${animal.gender} ${animal.type};`; } else { result = 'No animal gender'; } } else { result = 'No animal name'; } } else { result = 'No animal type'; } } else { result = 'No animal'; } return result; }; console.log(printAnimalDetails()); // 'No animal' console.log(printAnimalDetails({ type: 'dog', gender: 'female' })); // 'No animal name' console.log(printAnimalDetails({ type: 'dog', name: 'Lucy' })); // 'No animal gender' console.log( printAnimalDetails({ type: 'dog', name: 'Lucy', gender: 'female' }) ); // 'Lucy is a female dog' 4. डिफ़ॉल्ट पैरामीटर और विनाशकारी
जावास्क्रिप्ट के साथ काम करते समय, हमें हमेशा |_+_| . की जांच करने की आवश्यकता होती है मान और असाइन करें |_+_|, या संकलन टूट जाता है।
if..elseबहुत आसान और सहज है ना?
क्या होगा अगर |_+_| एक वस्तु है? क्या हम एक डिफ़ॉल्ट पैरामीटर असाइन कर सकते हैं?
&&उपरोक्त उदाहरण में, हम सब्जी का नाम प्रिंट करना चाहते हैं यदि यह उपलब्ध है या प्रिंट करना चाहते हैं |_+_|।
हम सशर्त से बच सकते हैं |_+_| डिफ़ॉल्ट पैरामीटर और विनाश का उपयोग करके।
कैश ऐप कार्ड कैसे लॉक करें
const printAnimalDetails = ({type, name, gender } = {}) => { if(!type) return 'No animal type'; if(!name) return 'No animal name'; if(!gender) return 'No animal gender'; // Now in this line of code, we're sure that we have an animal with all the three properties here. return `${animal.name} is a ${animal.gender} ${animal.type}`; } console.log(printAnimalDetails()); // 'No animal' console.log(printAnimalDetails({ type: dog })); // 'No animal name' console.log(printAnimalDetails({ type: dog, gender: female })); // 'No animal name' console.log(printAnimalDetails({ type: dog, name: 'Lucy', gender: 'female' })); // 'Lucy is a female dog' चूंकि हमें केवल संपत्ति की आवश्यकता है |_+_|, हम |_+_| का उपयोग करके पैरामीटर को नष्ट कर सकते हैं, फिर हम |_+_| का उपयोग कर सकते हैं। |_+_| के बजाय हमारे कोड में एक चर के रूप में।
हम एक खाली वस्तु {} को डिफ़ॉल्ट मान के रूप में भी निर्दिष्ट करते हैं, अन्यथा यह लाइन को निष्पादित करते समय एक त्रुटि देगा |_+_| - |_+_|, क्योंकि |_+_| में कोई नाम संपत्ति नहीं है।
5. Array.every और Array.some का उपयोग करके सभी/आंशिक मानदंडों का मिलान करें
यह टिप कोड की रेखाओं को कम करने के लिए इतनी नई जावास्क्रिप्ट ऐरे विधियों का उपयोग करने के बारे में अधिक नहीं है। नीचे दिए गए कोड को देखें, हम जांचना चाहते हैं कि क्या सभी फल लाल रंग में हैं:
destructuringकोड इतना लंबा है! हम लाइनों की संख्या को कम कर सकते हैं |_+_|:
default parametersअब ज्यादा साफ है ना? इसी तरह, यदि हम परीक्षण करना चाहते हैं कि कोई फल लाल है, तो हम इसे एक पंक्ति में प्राप्त करने के लिए Array.some का उपयोग कर सकते हैं।
undefined6. वैकल्पिक चेनिंग और नलिश कोलेसिंग का प्रयोग करें
यह हिस्सा अभी भी अधिक उपयोग में नहीं है, लेकिन मैं इसे बेहतर सशर्त लिखने के लिए अपने सुझावों में शामिल करना चाहता हूं। ये दो कार्य जावास्क्रिप्ट के लिए एक बहुत ही उपयोगी अतिरिक्त हैं।
इसे लिखते समय, ये विकल्प पूरी तरह से समर्थित नहीं थे, और आपको कोड संकलित करने के लिए बैबेल का उपयोग करने की आवश्यकता थी।
|_+_| इंटरमीडिएट नोड्स मौजूद हैं या नहीं, यह स्पष्ट रूप से जाँच किए बिना हमें पेड़ जैसी संरचनाओं को संभालने में सक्षम बनाता है, और |_+_| वैकल्पिक श्रृखंला के साथ संयोजन में बढ़िया काम करता है और इसका उपयोग किसी मौजूदा के लिए डिफ़ॉल्ट मान सुनिश्चित करने के लिए किया जाता है।
आइए कुछ उदाहरण दिखाते हैं:
{}इसलिए, अगर हम प्रिंट करना चाहते हैं कि कार निर्माता यूएसए से है, तो कोड कुछ इस तरह दिखेगा:
if...elseआप स्पष्ट रूप से देख सकते हैं कि अधिक जटिल वस्तु संरचना के मामले में यह कितना गड़बड़ हो सकता है। कई पुस्तकालयों, जैसे |_+_|, उदाहरण के लिए, वर्कअराउंड के रूप में अपने स्वयं के कार्य हैं, लेकिन हम ऐसा नहीं चाहते हैं, हम इसे वेनिला जेएस में करने में सक्षम होना चाहते हैं। आइए चीजों को करने का एक नया तरीका देखें।
function printVegetablesWithQuantity(vegetable, quantity) { const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus']; // condition 1: vegetable should be present if (vegetable) { // condition 2: must be one of the item from the list if (vegetables.includes(vegetable)) { console.log(`I like ${vegetable}`); // condition 3: must be large quantity if (quantity >= 10) { console.log('I have bought a large quantity'); } } } else { throw new Error('No vegetable from the list!'); } } printVegetablesWithQuantity(null); // error: No fruits printVegetablesWithQuantity('cabbage'); // print: red printVegetablesWithQuantity('cabbage', 20); // 'I like cabbage` // 'I have bought a large quantity' यह देखने में काफी सुंदर और रखरखाव में आसान लगता है। यह पहले से ही TC39 चरण 3 में है, आइए इसके स्वीकृत होने की प्रतीक्षा करें और फिर हम हर जगह इस अविश्वसनीय सिंटैक्स का उपयोग देख सकते हैं।
सारांश
आइए जानें और अधिक स्वच्छ और रखरखाव योग्य कोड लिखने के लिए नई युक्तियों और तकनीकों का प्रयास करें क्योंकि, कुछ महीनों के बाद, लंबी शर्तें पैर में खुद को गोली मारने की तरह हो सकती हैं।
#जावास्क्रिप्ट