12 जावास्क्रिप्ट चाल सबसे ट्यूटोरियल में नहीं मिला

जब मैंने जावास्क्रिप्ट सीखना शुरू किया, तो मैंने जो पहली चीज़ की, वह उन ट्रिक्स की एक सूची थी, जिसने मुझे समय बचाने में मदद की। मैंने उन्हें अन्य प्रोग्रामर्स पर, विभिन्न साइटों पर और मैनुअल में जासूसी की।

इस लेख में, मैं आपको अपने जावास्क्रिप्ट कोड को बेहतर बनाने और गति देने के लिए 12 शानदार तरीके दिखाऊंगा। ज्यादातर मामलों में, वे सार्वभौमिक हैं।

हम आपको याद दिलाते हैं: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रोमो कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

स्किलबॉक्स अनुशंसा करता है: व्यावहारिक पाठ्यक्रम "मोबाइल डेवलपर प्रो" ।

अद्वितीय मूल्य फ़िल्टरिंग

सरणियों

सेट ऑब्जेक्ट का प्रकार ES6 में पेश किया गया था ..., प्रसार ऑपरेटर के साथ, हम इसका उपयोग एक नया सरणी बनाने के लिए कर सकते हैं जिसमें केवल अनन्य मान हैं।

const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // Result: [1, 2, 3, 5] 

एक सामान्य स्थिति में, समान ऑपरेशन करने के लिए बहुत अधिक कोड की आवश्यकता होती है।

यह ट्रिक आदिम प्रकार से युक्त सरणियों के लिए काम करती है: अपरिभाषित, अशक्त, बूलियन, स्ट्रिंग और संख्या। यदि आप ऑब्जेक्ट, फ़ंक्शंस, या अतिरिक्त सरणियों वाले सरणी के साथ काम कर रहे हैं, तो आपको एक अलग दृष्टिकोण की आवश्यकता होगी।

चक्रों में कैश की लंबाई

चक्र

जब आप लूप के लिए सीखते हैं, तो आप मानक प्रक्रिया का पालन करते हैं:

 for (let i = 0; i < array.length; i++){ console.log(i); } 

हालाँकि, इस वाक्यविन्यास के लिए, लूप प्रत्येक पुनरावृत्ति पर सरणी की लंबाई को फिर से जाँचता है।

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

 for (let i = 0, length = array.length; i < length; i++){ console.log(i); } 

सिद्धांत रूप में, यह ऊपर के रूप में लगभग समान है, लेकिन चक्र के आकार में वृद्धि के साथ, हमें महत्वपूर्ण समय की बचत मिलेगी।

शॉर्ट सर्किट रेटिंग (मैककार्थी रेटिंग)

कंडिशनल ओपेंटर

टर्नरी ऑपरेटर सरल और (कभी-कभी बहुत सरल नहीं) सशर्त विवरण लिखने का एक त्वरित और कुशल तरीका है:

x> 100? "100 से अधिक": "100 से कम";
x> 100? (x> 200; "200 से अधिक": "100-200 के बीच"): "100 से कम";

लेकिन कभी-कभी एक टर्नरी ऑपरेटर भी आवश्यकता से अधिक जटिल होता है। इसके बजाय, हम 'और' और 'और' या 'का उपयोग कर सकते हैं || तार्किक ऑपरेटर कुछ अभिव्यक्तियों का मूल्यांकन और भी संक्षिप्त तरीके से करते हैं। इसे अक्सर "शॉर्ट सर्किट" या "शॉर्ट सर्किट मूल्यांकन" कहा जाता है।

यह कैसे काम करता है

कहें कि हम केवल दो या अधिक स्थितियों में से एक को वापस करना चाहते हैं।

&& का उपयोग करके पहला गलत मान लौटाया जाएगा। यदि प्रत्येक ऑपरेंड सत्य का मूल्यांकन करता है, तो अंतिम मूल्यांकित अभिव्यक्ति वापस आ जाएगी।

 let one = 1, two = 2, three = 3; console.log(one && two && three); // Result: 3 console.log(0 && null); // Result: 0 

का उपयोग कर || पहला असली मूल्य लौटाएगा। यदि प्रत्येक ऑपरेंड गलत का मूल्यांकन करता है, तो अंतिम गणना मूल्य वापस कर दिया जाएगा।

 let one = 1, two = 2, three = 3; console.log(one || two || three); // Result: 1 console.log(0 || null); // Result: null 

उदाहरण 1

मान लें कि हम एक चर की लंबाई लौटना चाहते हैं, लेकिन इसके प्रकार को नहीं जानते हैं।

इस स्थिति में, आप उपयोग कर सकते हैं कि / वर यह सत्यापित करने के लिए कि फू एक उपयुक्त प्रकार है, लेकिन यह विधि बहुत लंबी हो सकती है। इसलिए, हमारे "शॉर्ट सर्किट" को लेना बेहतर है।

 return (foo || []).length; 

यदि चर फू की लंबाई उपयुक्त है, तो उसे वापस कर दिया जाएगा। अन्यथा, हमें 0 मिलता है।

उदाहरण 2

क्या आपको किसी नेस्टेड ऑब्जेक्ट को एक्सेस करने में समस्या है? आप नहीं जान सकते हैं कि क्या कोई वस्तु या उसकी एक उपप्रजाति मौजूद है, और इससे समस्याएं हो सकती हैं।

उदाहरण के लिए, हम डेटा संपत्ति को इस। में एक्सेस करना चाहते थे, लेकिन डेटा तब तक परिभाषित नहीं किया जाता है जब तक कि हमारा प्रोग्राम चयन के लिए एक प्रश्न नहीं लौटाता।

इस पर निर्भर करते हुए कि हम इसका उपयोग कहां करते हैं, इस पर कॉल करने के लिए .state.data एप्लिकेशन को शुरू होने से रोक सकता है। समस्या को हल करने के लिए, हम इसे सशर्त अभिव्यक्ति में लपेट सकते हैं:

 if (this.state.data) { return this.state.data; } else { return 'Fetching Data'; } 

एक अधिक उपयुक्त विकल्प "या" ऑपरेटर का उपयोग करना होगा।

 return (this.state.data || 'Fetching Data'); 

हम उपर्युक्त कोड को उपयोग और बदलने के लिए नहीं बदल सकते। 'Fetching Data' && this.state.data स्टेटमेंट यह वापस करेगा ।state.data यह अपरिभाषित है या नहीं।

वैकल्पिक श्रृंखला

जब आप किसी प्रॉपर्टी को ट्री स्ट्रक्चर में वापस करने की कोशिश कर रहे हों तो आप वैकल्पिक श्रृंखला का उपयोग करने का सुझाव दे सकते हैं। तो, एक प्रश्न चिह्न प्रतीक? एक संपत्ति प्राप्त करने के लिए इस्तेमाल किया जा सकता है केवल अगर यह शून्य नहीं है।

उदाहरण के लिए, हम इस उदाहरण को प्राप्त कर सकते हैं। यही है, डेटा केवल तभी लौटाया जाता है जब मूल्य शून्य नहीं होता है।

या, अगर यह महत्वपूर्ण है कि क्या राज्य परिभाषित है या नहीं, हम इसे वापस कर सकते हैं।

बुलियन में परिवर्तित करें

प्रकार परिवर्तन

सामान्य तार्किक कार्यों के सही और गलत होने के अलावा, जावास्क्रिप्ट अन्य सभी मूल्यों को भी सत्य या मिथ्या मानता है।

जब तक अन्यथा निर्दिष्ट न हो, जावास्क्रिप्ट में सभी मान 0, "", अशक्त, अपरिभाषित, NaN, और, निश्चित रूप से, के अपवाद के साथ, सत्य हैं। उत्तरार्द्ध मिथ्या हैं।

हम आसानी से दोनों के बीच स्विच कर सकते हैं! ऑपरेटर, जो तार्किक को भी टाइप करता है।

 const isTrue = !0; const isFalse = !1; const alsoFalse = !!0; console.log(isTrue); // Result: true console.log(typeof true); // Result: "boolean" 

स्ट्रिंग में परिवर्तित करें

प्रकार परिवर्तन

एक स्ट्रिंग के लिए पूर्णांक का एक त्वरित रूपांतरण निम्नानुसार किया जा सकता है।

 const val = 1 + ""; console.log(val); // Result: "1" console.log(typeof val); // Result: "string" 

पूर्णांक में रूपांतरण

प्रकार परिवर्तन

हम उलटा परिवर्तन करते हैं।

 let int = "15"; int = +int; console.log(int); // Result: 15 console.log(typeof int); Result: "number" 

इस विधि का उपयोग बूलियन बूलियन डेटा प्रकार को नियमित संख्यात्मक मानों में बदलने के लिए किया जा सकता है, जैसा कि नीचे दिखाया गया है:

 console.log(+true); // Return: 1 console.log(+false); // Return: 0 

ऐसी परिस्थितियाँ हो सकती हैं जहाँ + को जोड़-घटाव के बजाय संघचालक के रूप में व्याख्या किया जाएगा। इससे बचने के लिए टिल्ड्स का उपयोग करें: ~~ यह ऑपरेटर एक्सप्रेशन -n-1 के बराबर है। उदाहरण के लिए, ~ 15 है -16।

एक पंक्ति में दो टिल्ड का उपयोग करने से ऑपरेशन की उपेक्षा होती है, क्योंकि - (- - n - 1) - 1 = n + 1 - 1 = n। दूसरे शब्दों में, ~ -16 15 है।

 const int = ~~"15" console.log(int); // Result: 15 console.log(typeof int); Result: "number" 

<त्वरित शक्तियाँ

संचालन

ES7 से शुरू करते हुए, आप घातांक ऑपरेटर ** को डिग्री के लिए संक्षिप्त नाम के रूप में उपयोग कर सकते हैं। यह Math.pow (2, 3) का उपयोग करने की तुलना में बहुत तेज़ है। यह सरल लगता है, लेकिन यह क्षण रिसेप्शन की सूची में शामिल है, क्योंकि इसका उल्लेख हर जगह नहीं है।

 console.log(2 ** 3); // Result: 8 

इसे प्रतीक ^ के साथ भ्रमित न करें, जो आमतौर पर घातांक के लिए उपयोग किया जाता है। लेकिन जावास्क्रिप्ट में, यह XOR ऑपरेटर है।

ईएस 7 से पहले, संक्षिप्त नाम ** केवल 2 आधार के साथ डिग्री के लिए लागू किया जा सकता है जो कि बिटवाइड लेफ्ट शिफ्ट ऑपरेटर << का उपयोग करता है:

 Math.pow(2, n); 2 << (n - 1); 2**n; 

उदाहरण के लिए, 2 << 3 = 16 अभिव्यक्ति के बराबर है 2 ** 4 = 16।

फ्लोट पूर्णांक

संचालन / स्थानांतरण प्रकार

यदि आपको एक फ्लोट को पूर्णांक में बदलने की आवश्यकता है, तो आप Math.floor (), Math.ceil () या Math.round () का उपयोग कर सकते हैं। लेकिन एक तेज़ तरीका है, इसके लिए हम उपयोग करते हैं | यानी OR ऑपरेटर।

 console.log(23.9 | 0); // Result: 23 console.log(-23.9 | 0); // Result: -23 

व्यवहार | काफी हद तक इस बात पर निर्भर करता है कि आप सकारात्मक या नकारात्मक संख्याओं के साथ काम कर रहे हैं, इसलिए यह विधि केवल तभी उपयुक्त है जब आप जो कर रहे हैं उस पर पूरा भरोसा हो।

एन | 0 दशमलव विभाजक के बाद सब कुछ हटा देता है, फ़्लोटिंग-पॉइंट संख्या को पूर्णांक तक काट देता है।

आप ~~ का उपयोग करके समान गोलाई प्रभाव प्राप्त कर सकते हैं। किसी पूर्णांक में जबरन रूपांतरण के बाद, मान अपरिवर्तित रहता है।

हम अनुगामी संख्याओं को निकालते हैं

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

 let str = "1553"; Number(str.substring(0, str.length - 1)); 

इसके बजाय, हम बस लिखते हैं:

 console.log(1553 / 10 | 0) // Result: 155 console.log(1553 / 100 | 0) // Result: 15 console.log(1553 / 1000 | 0) // Result: 1 

ऑटो लिंक

कक्षाओं

ईएस 6 तीरथ का उपयोग कक्षा के तरीकों में किया जा सकता है, और बाध्यकारी निहित है। इसके लिए धन्यवाद, आप बार-बार के भावों को अलविदा कह सकते हैं जैसे कि this.myMethod = this.myMethod.bind (यह)!

 import React, { Component } from React; export default class App extends Compononent { constructor(props) { super(props); this.state = {}; } myMethod = () => { // This method is bound implicitly! } render() { return ( <> <div> {this.myMethod()} </div> </> ) } }; 

ट्रे ट्रिमिंग

सरणियों

यदि आपको किसी सरणी से मान निकालने की आवश्यकता है, तो ब्याह () की तुलना में तेज़ विधियाँ हैं।

उदाहरण के लिए, यदि आप मूल सरणी का आकार जानते हैं, तो आप इसकी लंबाई की संपत्ति को निम्नानुसार ओवरराइड कर सकते हैं:

 let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4; console.log(array); // Result: [0, 1, 2, 3] 

लेकिन एक और तरीका है, और तेजी से। यदि गति आपके लिए मायने रखती है, तो यहाँ हमारी पसंद है:

 let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array); // Result: [0, 1, 2, 3] 

आउटपुट अंतिम सरणी मान

सरणियों
इस तकनीक में स्लाइस () पद्धति के उपयोग की आवश्यकता है।

 let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(array.slice(-1)); // Result: [9] console.log(array.slice(-2)); // Result: [8, 9] console.log(array.slice(-3)); // Result: [7, 8, 9] 

JSON कोड स्वरूपण

JSON

आपने JSON.stringify का उपयोग पहले ही कर लिया होगा। क्या आप जानते हैं कि यह आपके JSON को प्रारूपित करने में मदद करता है?

Stringify () पद्धति दो वैकल्पिक मापदंडों को स्वीकार करती है: प्रतिकृति फ़ंक्शन, जिसका उपयोग प्रदर्शित JSON, और मान स्थान को फ़िल्टर करने के लिए किया जा सकता है।

 console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t')); // Result: // '{ // "alpha": A, // "beta": B // }' 

बस इतना ही, मुझे उम्मीद है कि ये सभी तरकीबें उपयोगी थीं। और आपको क्या ट्रिक पता है? उन्हें टिप्पणियों में लिखें।

स्किलबॉक्स अनुशंसा करता है:

• दो वर्षीय व्यावहारिक पाठ्यक्रम "मैं एक प्रो वेब डेवलपर हूं । "
• ऑनलाइन पाठ्यक्रम "सी # डेवलपर 0 के साथ" ।
• व्यावहारिक वार्षिक पाठ्यक्रम "पीएचपी-डेवलपर 0 से प्रो तक" ।