12 जाभास्क्रिप्ट युक्तिहरू जुन धेरै ट्यूटोरियलहरू मिस हुन्छन्

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

यस लेखमा, म तपाइँलाई तपाइँको JavaScript कोड सुधार गर्न र गति बढाउन 12 उत्कृष्ट तरिकाहरू देखाउनेछु। अधिकांश अवस्थामा तिनीहरू सार्वभौमिक छन्।

हामी सम्झाउँछौं: सबै Habr पाठकहरूका लागि - Habr प्रोमो कोड प्रयोग गरी कुनै पनि Skillbox पाठ्यक्रममा भर्ना गर्दा १०,००० रूबल छुट।

Skillbox सिफारिस गर्दछ: व्यावहारिक पाठ्यक्रम "मोबाइल विकासकर्ता प्रो".

अद्वितीय मानहरू फिल्टर गर्दै

ARRAYS

सेट वस्तु प्रकार ES6 मा प्रस्तुत गरिएको थियो, ..., स्प्रेड अपरेटरको साथ, हामी यसलाई अद्वितीय मानहरू समावेश गर्ने नयाँ एरे सिर्जना गर्न प्रयोग गर्न सक्छौं।

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

सामान्य अवस्थामा, उही अपरेशन गर्न धेरै कोड आवश्यक छ।

यो प्रविधिले आदिम प्रकारहरू समावेश गर्ने एरेहरूको लागि काम गर्दछ: अपरिभाषित, शून्य, बुलियन, स्ट्रिङ र नम्बर। यदि तपाइँ वस्तुहरू, प्रकार्यहरू, वा अतिरिक्त एरेहरू समावेश गर्ने एरेसँग काम गर्दै हुनुहुन्छ भने, तपाइँलाई फरक दृष्टिकोण चाहिन्छ।

चक्रमा क्यास एरेको लम्बाइ

साइकलहरू

जब तपाइँ loops को लागी सिक्नुहुन्छ, तपाइँ मानक प्रक्रिया को पालना गर्नुहुन्छ:

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

यद्यपि, यो सिन्ट्याक्सको साथ, for loop ले प्रत्येक पुनरावृत्ति एरेको लम्बाइ बारम्बार जाँच गर्दछ।

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

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

सिद्धान्तमा, लगभग माथिको जस्तै, तर लुप साइज बढाएर हामीले महत्त्वपूर्ण समय बचत प्राप्त गर्नेछौं।

सर्ट सर्किट रेटिंग (McCarthy रेटिंग)

सशर्त अपरेटरहरू

टर्नरी अपरेटर सरल (र कहिलेकाहीँ त्यति सरल छैन) सशर्त कथनहरू लेख्नको लागि द्रुत र प्रभावकारी तरिका हो:

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 सँग उपयुक्त लम्बाइ छ भने, त्यो फिर्ता गरिनेछ। अन्यथा हामीले ० प्राप्त गर्नेछौं।

उदाहरणका 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 फिर्ता गर्नेछ चाहे यो अपरिभाषित छ वा छैन।

वैकल्पिक चेन

रूख संरचनामा गहिरो सम्पत्ति फिर्ता गर्ने प्रयास गर्दा कसैले वैकल्पिक चेनिङ प्रयोग गर्न सुझाव दिन सक्छ। त्यसोभए, प्रश्न चिन्ह चिन्ह? यो शून्य नभएको खण्डमा मात्र सम्पत्ति पुन: प्राप्त गर्न प्रयोग गर्न सकिन्छ।

उदाहरणका लागि, हामी यो.state.data?...() प्राप्त गर्न माथिको उदाहरणलाई रिफ्याक्टर गर्न सक्छौं। त्यो हो, डाटा मात्र फिर्ता हुन्छ यदि मान शून्य छैन।

वा, यदि राज्य परिभाषित गरिएको छ वा छैन भन्ने कुराले फरक पार्छ भने, हामी यो. राज्य?. डाटा फिर्ता गर्न सक्छौं।

बुलियनमा रूपान्तरण गर्नुहोस्

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

सामान्य बुलियन प्रकार्यहरू साँचो र गलतको अतिरिक्त, जाभास्क्रिप्टले अन्य सबै मानहरूलाई सत्य वा गलत मान्दछ।

अन्यथा नोट नगरेसम्म, जाभास्क्रिप्टमा सबै मानहरू सत्य हुन्, ०, "", शून्य, अपरिभाषित, 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 अघि, ** सर्टकट बिटवाइज बायाँ सिफ्ट अपरेटर प्रयोग गरेर आधार २ को शक्तिहरूको लागि मात्र प्रयोग गर्न सकिन्थ्यो <<:

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 | ० ले दशमलव विभाजक पछि सबै कुरा हटाउँछ, फ्लोटलाई पूर्णांकमा काट्दै।

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

पछिल्लो नम्बरहरू हटाउँदै

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 तीर नोटेशनहरू वर्ग विधिहरूमा प्रयोग गर्न सकिन्छ, र बाइन्डिङ निहित छ। यसको मतलब यो हो कि तपाईंले यो जस्तै दोहोरिने अभिव्यक्तिहरूलाई अलविदा भन्न सक्नुहुन्छ।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
// }'

यो सबै हो, मलाई आशा छ कि यी सबै प्रविधिहरू उपयोगी थिए। तपाईलाई कुन चालहरू थाहा छ? तिनीहरूलाई टिप्पणीहरूमा लेख्नुहोस्।

Skillbox सिफारिस गर्दछ:

• दुई वर्षे व्यावहारिक पाठ्यक्रम "म एक प्रो वेब विकासकर्ता हुँ".
• अनलाइन कोर्स "0 बाट C# विकासकर्ता".
• एक वर्षको व्यावहारिक पाठ्यक्रम "0 देखि PRO मा PHP विकासकर्ता".

स्रोत: www.habr.com