பெரும்பாலான பயிற்சிகள் தவறவிட்ட 12 ஜாவாஸ்கிரிப்ட் தந்திரங்கள்

நான் ஜாவாஸ்கிரிப்ட் கற்கத் தொடங்கியபோது, ​​நான் செய்த முதல் காரியம், நேரத்தைச் சேமிக்க உதவிய தந்திரங்களின் பட்டியலை உருவாக்குவதுதான். மற்ற புரோகிராமர்கள், வெவ்வேறு தளங்கள் மற்றும் கையேடுகளில் நான் அவற்றைக் கண்டேன்.

இந்தக் கட்டுரையில், உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை மேம்படுத்தவும் வேகப்படுத்தவும் 12 சிறந்த வழிகளைக் காண்பிப்பேன். பெரும்பாலான சந்தர்ப்பங்களில் அவை உலகளாவியவை.

நாங்கள் நினைவூட்டுகிறோம்: "Habr" இன் அனைத்து வாசகர்களுக்கும் - "Habr" விளம்பரக் குறியீட்டைப் பயன்படுத்தி எந்த Skillbox படிப்பிலும் சேரும்போது 10 ரூபிள் தள்ளுபடி.

Skillbox பரிந்துரைக்கிறது: நடைமுறை படிப்பு "மொபைல் டெவலப்பர் புரோ".

தனிப்பட்ட மதிப்புகளை வடிகட்டுதல்

வரிசைகள்

செட் ஆப்ஜெக்ட் வகை 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க்கும் குறைவானது";

ஆனால் சில நேரங்களில் மும்முனை ஆபரேட்டர் கூட தேவைப்படுவதை விட மிகவும் சிக்கலானது. அதற்குப் பதிலாக 'and' && மற்றும் 'or' ஐப் பயன்படுத்தலாம் || பூலியன் ஆபரேட்டர்கள் சில வெளிப்பாடுகளை இன்னும் சுருக்கமான முறையில் மதிப்பிடுகின்றனர். இது பெரும்பாலும் "ஷார்ட் சர்க்யூட்" அல்லது "ஷார்ட் சர்க்யூட் ரேட்டிங்" என்று அழைக்கப்படுகிறது.

இது எப்படி வேலை செய்கிறது

இரண்டு அல்லது அதற்கு மேற்பட்ட நிபந்தனைகளில் ஒன்றை மட்டுமே திரும்பப் பெற விரும்புகிறோம் என்று வைத்துக் கொள்வோம்.

&& பயன்படுத்துவது முதல் தவறான மதிப்பை வழங்கும். ஒவ்வொரு செயலும் சரி என மதிப்பிட்டால், கடைசியாக மதிப்பிடப்பட்ட வெளிப்பாடு திரும்பப் பெறப்படும்.

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?..() பெற மேலே உள்ள உதாரணத்தை நாம் மறுபரிசீலனை செய்யலாம் அதாவது, மதிப்பு பூஜ்யமாக இல்லாவிட்டால் மட்டுமே தரவு வழங்கப்படும்.

அல்லது, மாநிலம் வரையறுக்கப்பட்டுள்ளதா இல்லையா என்பது முக்கியமென்றால், 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

நடத்தை | நீங்கள் நேர்மறை அல்லது எதிர்மறை எண்களைக் கையாளுகிறீர்களா என்பதைப் பொறுத்தது, எனவே நீங்கள் என்ன செய்கிறீர்கள் என்பதில் நம்பிக்கை இருந்தால் மட்டுமே இந்த முறை பொருத்தமானது.

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 அம்புக்குறி குறியீடுகள் வகுப்பு முறைகளில் பயன்படுத்தப்படலாம், மேலும் பிணைப்பு குறிக்கப்படுகிறது. அதாவது, மீண்டும் மீண்டும் வரும் வெளிப்பாடுகளுக்கு நீங்கள் விடைபெறலாம்.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>
      </>
    )
  }
};

வரிசை டிரிம்மிங்

வரிசைகள்

நீங்கள் ஒரு வரிசையில் இருந்து மதிப்புகளை அகற்ற வேண்டும் என்றால், 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]

அணிவரிசையின் கடைசி மதிப்பு(களை) அச்சிடுதல்

வரிசைகள்
இந்த நுட்பத்திற்கு ஸ்லைஸ் () முறையைப் பயன்படுத்த வேண்டும்.

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.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