చాలా ట్యుటోరియల్స్ మిస్ చేసే 12 జావాస్క్రిప్ట్ ట్రిక్స్

నేను జావాస్క్రిప్ట్ నేర్చుకోవడం ప్రారంభించినప్పుడు, నేను చేసిన మొదటి పని సమయం ఆదా చేయడంలో నాకు సహాయపడే ఉపాయాల జాబితాను రూపొందించడం. నేను వాటిని ఇతర ప్రోగ్రామర్‌ల నుండి, వివిధ సైట్‌లలో మరియు మాన్యువల్‌లలో గుర్తించాను.

ఈ కథనంలో, మీ జావాస్క్రిప్ట్ కోడ్‌ని మెరుగుపరచడానికి మరియు వేగవంతం చేయడానికి నేను మీకు 12 గొప్ప మార్గాలను చూపుతాను. చాలా సందర్భాలలో అవి సార్వత్రికమైనవి.

మేము గుర్తు చేస్తున్నాము: Habr పాఠకులందరికీ - Habr ప్రోమో కోడ్‌ని ఉపయోగించి ఏదైనా Skillbox కోర్సులో నమోదు చేసుకున్నప్పుడు 10 రూబుల్ తగ్గింపు.

Skillbox సిఫార్సు చేస్తోంది: ప్రాక్టికల్ కోర్సు "మొబైల్ డెవలపర్ PRO".

ప్రత్యేక విలువలను ఫిల్టర్ చేస్తోంది

శ్రేణులు

సెట్ ఆబ్జెక్ట్ రకం 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);
}

అయితే, ఈ సింటాక్స్‌తో, for loop ప్రతి పునరావృతం యొక్క శ్రేణి యొక్క పొడవును పదేపదే తనిఖీ చేస్తుంది.

కొన్నిసార్లు ఇది ఉపయోగకరంగా ఉంటుంది, కానీ చాలా సందర్భాలలో శ్రేణి యొక్క పొడవును కాష్ చేయడం మరింత ప్రభావవంతంగా ఉంటుంది, దీనికి ఒక ప్రాప్యత అవసరం. మేము వేరియబుల్ 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?..()ని పొందడానికి మేము ఎగువ ఉదాహరణను రీఫాక్టర్ చేయవచ్చు. అంటే, విలువ శూన్యం కాకపోతే మాత్రమే డేటా తిరిగి వస్తుంది.

లేదా, రాష్ట్రం నిర్వచించబడిందా లేదా అనేది ముఖ్యమైతే, మేము this.state?.dataని తిరిగి ఇవ్వవచ్చు.

బూలియన్‌కి మార్చండి

రకం మార్పిడి

సాధారణ బూలియన్ ఫంక్షన్‌లు ఒప్పు మరియు తప్పులతో పాటు, JavaScript అన్ని ఇతర విలువలను కూడా నిజం లేదా తప్పుగా పరిగణిస్తుంది.

గుర్తించబడే వరకు, 0, "", శూన్య, నిర్వచించబడని, NaN మరియు, వాస్తవానికి, తప్పు తప్ప, JavaScriptలోని అన్ని విలువలు నిజం. తరువాతివి తప్పుడువి.

మేము ! ఆపరేటర్‌ని ఉపయోగించి రెండింటి మధ్య సులభంగా మారవచ్చు, ఇది రకాన్ని బూలియన్‌గా మారుస్తుంది.

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

అర్రే ట్రిమ్మింగ్

శ్రేణులు

మీరు శ్రేణి నుండి విలువలను తీసివేయవలసి వస్తే, స్ప్లైస్ () కంటే వేగవంతమైన పద్ధతులు ఉన్నాయి.

ఉదాహరణకు, అసలు శ్రేణి పరిమాణం మీకు తెలిస్తే, మీరు ఈ క్రింది విధంగా దాని పొడవు ప్రాపర్టీని భర్తీ చేయవచ్చు:

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
// }'

అంతే, ఈ పద్ధతులన్నీ ఉపయోగకరంగా ఉన్నాయని నేను ఆశిస్తున్నాను. మీకు ఏ ఉపాయాలు తెలుసు? వాటిని వ్యాఖ్యలలో వ్రాయండి.

Skillbox సిఫార్సు చేస్తోంది:

• రెండేళ్ల ప్రాక్టికల్ కోర్సు "నేను PRO వెబ్ డెవలపర్‌ని".
• ఆన్‌లైన్ కోర్సు "0 నుండి C# డెవలపర్".
• ప్రాక్టికల్ ఒక సంవత్సరం కోర్సు "0 నుండి PRO వరకు PHP డెవలపర్".

మూలం: www.habr.com