12 JavaScript युक्त्या ज्या बहुतेक ट्यूटोरियल चुकतात

जेव्हा मी JavaScript शिकायला सुरुवात केली, तेव्हा मी पहिली गोष्ट केली ती म्हणजे ट्रिक्सची यादी बनवणे ज्याने मला वेळ वाचविण्यास मदत केली. मी त्यांना इतर प्रोग्रामरकडून, वेगवेगळ्या साइटवर आणि मॅन्युअलमध्ये पाहिले.

या लेखात, मी तुम्हाला तुमचा JavaScript कोड सुधारण्यासाठी आणि वेग वाढवण्याचे 12 उत्तम मार्ग दाखवीन. बहुतेक प्रकरणांमध्ये ते सार्वत्रिक आहेत.

आम्ही आठवण करून देतो: सर्व Habr वाचकांसाठी - Habr प्रोमो कोड वापरून कोणत्याही स्किलबॉक्स कोर्समध्ये नावनोंदणी करताना 10 रूबल सवलत.

स्किलबॉक्स शिफारस करतो: प्रॅक्टिकल कोर्स "मोबाइल डेव्हलपर प्रो".

अद्वितीय मूल्ये फिल्टर करणे

ARRAYS

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

समजा आपल्याला व्हेरिएबलची लांबी परत करायची आहे, परंतु आपल्याला त्याचा प्रकार माहित नाही.

या प्रकरणात, foo योग्य प्रकार आहे हे तपासण्यासाठी तुम्ही if/else वापरू शकता, परंतु ही पद्धत खूप मोठी असू शकते. म्हणून, आमचे "शॉर्ट सर्किट" घेणे चांगले आहे.

return (foo || []).length;

व्हेरिएबल foo ची योग्य लांबी असल्यास, ती परत केली जाईल. अन्यथा आम्हाला 0 मिळेल.

उदाहरणार्थ 2

नेस्टेड ऑब्जेक्टमध्ये प्रवेश करण्यात तुम्हाला समस्या आल्या आहेत? एखादी वस्तू किंवा त्‍याच्‍या उपगुणांपैकी एक अस्‍तित्‍वात आहे की नाही हे कदाचित तुम्हाला माहीत नसेल आणि यामुळे समस्या निर्माण होऊ शकतात.

उदाहरणार्थ, आम्‍हाला this.state मधील डेटा प्रॉपर्टीमध्‍ये प्रवेश करायचा होता, परंतु जोपर्यंत आमचा प्रोग्राम फेच विनंती परत करत नाही तोपर्यंत डेटा परिभाषित केला जात नाही.

आम्ही ते कुठे वापरतो यावर अवलंबून, 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?..() मिळविण्यासाठी वरील उदाहरणाचे रिफॅक्टर करू शकतो. म्हणजेच, मूल्य शून्य नसल्यासच डेटा परत केला जातो.

किंवा, राज्य परिभाषित केले आहे की नाही हे महत्त्वाचे असल्यास, आम्ही हा. राज्य?. डेटा परत करू शकतो.

बुलियनमध्ये रूपांतरित करा

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

सामान्य बुलियन फंक्शन्स ट्रू आणि असत्य व्यतिरिक्त, JavaScript इतर सर्व मूल्यांना सत्य किंवा असत्य मानते.

अन्यथा लक्षात येईपर्यंत, JavaScript मधील सर्व मूल्ये सत्य आहेत, 0, "", null, undefined, 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

हे ^ चिन्हासह गोंधळात टाकू नये, जे सामान्यतः घातांकासाठी वापरले जाते. पण JavaScript मध्ये हा 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

वर्तन | तुम्ही सकारात्मक किंवा ऋण संख्यांशी व्यवहार करत आहात की नाही यावर मुख्यत्वे अवलंबून असते, त्यामुळे तुम्ही काय करत आहात यावर तुमचा विश्वास असेल तरच ही पद्धत योग्य आहे.

n | 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>
      </>
    )
  }
};

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

ARRAYS

तुम्हाला अॅरेमधून मूल्ये काढून टाकायची असल्यास, splice() पेक्षा वेगवान पद्धती आहेत.

उदाहरणार्थ, जर तुम्हाला मूळ अॅरेचा आकार माहित असेल, तर तुम्ही त्याची लांबी गुणधर्म खालीलप्रमाणे ओव्हरराइड करू शकता:

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]

अॅरेचे शेवटचे मूल्य मुद्रित करणे

ARRAYS
या तंत्रासाठी स्लाइस() पद्धतीचा वापर करणे आवश्यक आहे.

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 वरून C# विकसक".
• एक वर्षाचा प्रॅक्टिकल कोर्स "PHP विकसक 0 ते PRO".

स्त्रोत: www.habr.com