12 जावास्क्रिप्ट ट्रिक्स जो अधिकांश ट्यूटोरियल मिस करते हैं

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

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

अनुस्मारक: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रचार कोड का उपयोग करके किसी भी स्किलबॉक्स पाठ्यक्रम में नामांकन करते समय 10 रूबल की छूट।

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

अद्वितीय मानों को फ़िल्टर करना

सरणियों

सेट ऑब्जेक्ट प्रकार को 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

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

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

return (foo || []).length;

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

उदाहरण 2

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

उदाहरण के लिए, हम इस.स्टेट में डेटा प्रॉपर्टी तक पहुंचना चाहते थे, लेकिन डेटा तब तक परिभाषित नहीं होता जब तक हमारा प्रोग्राम एक फ़ेच अनुरोध नहीं लौटाता।

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

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

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

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

हम && का उपयोग करने के लिए उपरोक्त कोड को नहीं बदल सकते। 'फ़ेचिंग डेटा' && this.state.data ऑपरेटर this.state.data को वापस कर देगा भले ही यह अपरिभाषित हो या नहीं।

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

किसी संपत्ति को पेड़ की संरचना में गहराई से वापस करने का प्रयास करते समय कोई वैकल्पिक चेनिंग का उपयोग करने का सुझाव दे सकता है। तो, प्रश्न चिन्ह चिन्ह? किसी संपत्ति को पुनः प्राप्त करने के लिए इसका उपयोग केवल तभी किया जा सकता है जब वह शून्य न हो।

उदाहरण के लिए, हम this.state.data?..() प्राप्त करने के लिए उपरोक्त उदाहरण को दोबारा तैयार कर सकते हैं। अर्थात्, डेटा तभी लौटाया जाता है जब मान शून्य न हो।

या, यदि यह मायने रखता है कि राज्य परिभाषित है या नहीं, तो हम यह.राज्य?.डेटा वापस कर सकते हैं।

बूलियन में कनवर्ट करें

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

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

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

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

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // 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"

<Quick Powers

संचालन

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

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

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

ES7 से पहले, ** शॉर्टकट का उपयोग केवल बिटवाइज़ लेफ्ट शिफ्ट ऑपरेटर << का उपयोग करके बेस 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

स्वचालित लिंकिंग

कक्षाओं

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

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 को फ़ॉर्मेट करने में मदद करता है?

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

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

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

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

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

स्रोत: www.habr.com