🥇12 truqeve për punën me JavaScript që nuk i gjeni në shumicën e tutorialeve

Kur unë fillova të studioj JavaScript, e para gjë që bëra ishte të bëja një listë teknikash që më ndihmuan të kurseja kohë. I kam vëzhguar ato te programues të tjerë, në faqe të ndryshme dhe në manuale.

Në këtë artikull, do të tregoj 12 mënyra të shkëlqyera për të përmirësuar dhe përshpejtuar kodin tuaj JavaScript. Në shumicën e rasteve, ato janë universale.

Kujtojmë: për të gjithë lexuesit e «Habra» — zbritje prej 10,000 rublesh për regjistrimin në çdo kurs Skillbox me kodin promovues «Habr».

Skillbox rekomandon: Kurs praktik «Mobil developer PRO».

Filtrimi i vlerave unike

MASIVAT

Tipi i objektit Set u prezantua në ES6, së bashku me …, operatorin spread, mund ta përdorim për të krijuar një masiv të ri, ku ndodhen vetëm vlerat unike.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // Rezultati: [1, 2, 3, 5]

Në situata të zakonshme, për të kryer të njëjtën operacion do të nevojitej shumë më tepër kod.

Ky truk funksionon për masiva që përmbajnë tipe primarë: undefined, null, boolean, string dhe number. Nëse punoni me një masiv që përmban objekte, funksione ose masiva të tjerë, do t'ju nevojitet një qasje tjetër.

Gjatësia e masivit të caching në cikle

CIKLET

Kur e studioni for për ciklet, ndiqni procedurën standarde:

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

Megjithatë, me këtë sintaksë, cikli for kontrollon përsëri gjatësi masivi në çdo iteracion.

Ndonjëherë, kjo mund të jetë e dobishme, por në shumicën e rasteve është më efikase të keni caching të gjatë masivit, që kërkon një qasje të vetme. Ne mund ta bëjmë këtë duke përcaktuar një ndryshore për gjatësi, ku caktuam ndryshoren i, për shembull, kështu:

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

Në parim, pothuajse e njëjta gjë si më sipër, por me rritjen e madhësisë së ciklit, do të kemi një kursim të konsiderueshëm kohe.

Vlerësimi i shkurtimit (vlerësimi i McCarthy)

OPERATORËT KUSHTORË

Operatori ternar është një mënyrë e shpejtë dhe efikase për të shkruar deklarata të thjeshta (dhe ndonjëherë jo aq të thjeshta) kushtore:

x > 100? «më shumë se 100»: «më pak se 100»;
x > 100? (x > 200? «më shumë se 200»: «në mes 100-200»): «më pak se 100»;

Por ndonjëherë, madje edhe operatori ternar është më i komplikuar seç kërkohet. Në vend të tij, ne mund të përdorim operatorët logjikë ‘and’ && dhe ‘or’ || për të vlerësuar disa shprehje në një mënyrë edhe më të shkurtër. Njëherë quhet "shkurtim i shkurtuar" ose "vlerësimi i shkurtimit".

Si funksionon kjo

Të themi se duam të kthejmë vetëm një nga dy ose më shumë kushte.

Përdorimi && do të kthejë vlerën e parë false. Nëse çdo operand vlerësohet si true, atëherë do të kthehet shprehja e fundit e llogaritur.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Rezultati: 3
 
console.log(0 && null); // Rezultati: 0

Përdorimi || do të lejojë kthimin e vlerës së parë true. Nëse çdo operand vlerësohet si false, atëherë do të kthehet vlera e fundit e llogaritur.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Rezultati: 1
 
console.log(0 || null); // Rezultati: null

Shembulli 1

Të themi se duam të kthejmë length të variablës, por nuk e dimë tipin e saj.

Në këtë rast, mund të përdorim if/else për të kontrolluar që foo është një tip i përshtatshëm, por ky metodë mund të jetë shumë e gjatë. Prandaj, është më mirë të përdorim "shkurtesën tonë".

return (foo || []).length;

Nëse variabla foo ka një length të përshtatshme, atëherë ajo do të kthehet. Në rast tjetër, ne do të marrim 0.

Shembulli 2

Keni pasur ndonjë problem me qasjen në një objekt të brendshëm? Nëse mund të mos e dini nëse objekti ose ndonjë nga nën-propritetet e tij ekzistojnë, dhe kjo mund të sjellë probleme.

Për shembull, doja të aksesoj pronën data në this.state, por data nuk është e përcaktuar derisa programi ynë të kthejë një kërkesë për tërheqje.

Varësisht nga vendi ku e përdorim, thirrja this.state.data mund të pengojë ekzekutimin e aplikacionit. Për të zgjidhur problemin, ne mund të mbulojmë këtë me një shprehje kushtore:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Duke Marrë Të Dhënat';
}

Një opsion më i përshtatshëm do të ishte përdorimi i operatorit ‘or’.

return (this.state.data || 'Duke Marrë Të Dhënat');

Nuk mund ta ndryshojmë kodin më sipër për të përdorur &&. Operator ‘Duke Marrë Të Dhënat’ && this.state.data do të kthejë this.state.data pavarësisht nëse është undefined apo jo.

Zinxhiri Opcional

Mund të propozohet përdorimi i zinxhirit opsional kur përpiqemi të kthejmë një pronë thellë në një strukturë me pemë. Kështu, simboli i shenjës pyetëse ? mund të përdoret për të nxjerrë një pronë vetëm nëse ajo nuk është e barabartë me null.

Për shembull, ne mund të riformatojmë shembullin më sipër, duke marrë this.state.data?.. (). Kështu, data kthehet vetëm nëse vlera nuk është null.

Ose, nëse është e rëndësishme nëse state është e përcaktuar apo jo, ne mund të kthejmë this.state?.data.

Shndërrimi në Boolean

SHNDËRRIMI I TIPOLOGJIVE

Përveç funksioneve të zakonshme logjike true dhe false, JavaScript gjithashtu konsideron të gjitha vlerat e tjera si truthy apo falsy.

Derisa nuk është përcaktuar ndryshe, të gjitha vlerat në JavaScript janë truthy, përveç 0, «», null, undefined, NaN dhe, natyrisht, false. Këto të fundit janë falsy.

Ne mund të kalojmë lehtësisht midis të dyve, duke përdorur operatorin !, i cili gjithashtu konverton tipin në logjik.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Rezultati: true
console.log(typeof true); // Rezultati: "boolean"

Konvertimi në string

SHNDËRRIMI I TIPOLOGJIVE

Një konvertim i shpejtë i një numri të plotë në string mund të bëhet në këtë mënyrë.

const val = 1 + "";
 
console.log(val); // Rezultati: "1"
console.log(typeof val); // Rezultati: "string"

Konvertimi në numër të plotë

SHNDËRRIMI I TIPOLOGJIVE

Konvertimi i kundërt kryhet kështu.

let int = "15";
int = +int;
 
console.log(int); // Rezultati: 15
console.log(typeof int); // Rezultati: "number"

Ky metodë mund të përdoret gjithashtu për të konvertuar tipin boolean në vlera numërike të zakonshme, siç tregohet më poshtë:

console.log(+true);  // Kthehet: 1
console.log(+false); // Kthehet: 0

Mund të ketë situata kur + do të interpretohet si operator koncatenimi, dhe jo si shtim. Për të shmangur këtë, është mirë të përdorim tilde: ~~. Ky operator është ekuivalent me shprehjen -n-1. Për shembull, ~ 15 është baraz me -16.

Përdorimi i dy tildeve radhazi anashkalon operacionin, sepse — (- — n — 1) — 1 = n + 1 — 1 = n. Me fjalë të tjera, ~ -16 është baraz me 15.

const int = ~~"15"
console.log(int); // Rezultati: 15
console.log(typeof int); // Rezultati: "number"

<Quick Powers

OPERACIONET

Dukë filluar nga ES7, mund të përdoret operatori i fuqizimit ** si shkurtim për fuqitë. Kjo është shumë më e shpejtë se përdorimi i Math.pow (2, 3). Duket e thjeshtë, por ky moment është i përfshirë në listën e trukeve, sepse nuk përmendet gjithmonë.

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

Mos e ngatërroni atë me simbolin ^, i cili zakonisht përdoret për fuqizim. Por në JavaScript ky është operatori XOR.

Para ES7, shkurtimi ** mund të përdorej vetëm për fuqitë me bazë 2 duke përdorur operatorin e shndërrimit të bitëve majtas <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

Për shembull, 2 << 3 = 16 është ekuivalent me shprehjen 2 ** 4 = 16.

Float në numër të plotë

OPERACIONET / KONSUMI I TIPS

Nëse është e nevojshme të konvertohet float në një numër të plotë, mund të përdoren Math.floor(), Math.ceil() ose Math.round(). Por ka një mënyrë më të shpejtë, për këtë përdorim |, pra operatorin OR.

console.log(23.9 | 0);  // Rezultati: 23
console.log(-23.9 | 0); // Rezultati: -23

Sjellja | në masë të madhe varet nga nëse keni të bëni me numra pozitivë apo negativë, prandaj ky metodë është e përshtatshme vetëm nëse jeni të sigurt për atë që po bëni.

n | 0 heq gjithçka pas ndarësit decimal, duke e prerë numrin me pikë fluturuese në një numër të plotë.

Mund të merrni efektin e njëjtë të rrumbullakimit duke përdorur ~~. Pas konvertimit të detyrueshëm në një numër të plotë, vlera mbetet e pandryshuar.

Heqim numrat e mbyllur

Operatori OR mund të përdoret për të hequr çdo numër nga numri. Kjo do të thotë se nuk është e nevojshme të konvertohen llojet, si këtu:

let str = "1553";
Number(str.substring(0, str.length - 1));

Në vend të kësaj thjesht shkruajmë:

console.log(1553 / 10  | 0)  // Rezultati: 155
console.log(1553 / 100 | 0)  // Rezultati: 15
console.log(1553 / 1000| 0)  // Rezultati: 1

Lidhja automatikisht

KLASAT

Shqyrtimet e arrow ES6 mund të përdoren në metodat e klasës, dhe kjo nënkupton lidhjen. Kështu, mund të themi lamtumirë shprehjeve të përsëritura, si this.myMethod = this.myMethod.bind (this)!

import React, { Component } from React;
 
export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () =&gt; {
    // Ky metoda është e lidhur në mënyrë implicite!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Prerja e array-së

MASIVAT

Nëse keni nevojë të hiqni vlera nga një array, ka metoda më të shpejta sesa splice().

Për shembull, nëse e dini madhësinë e array-së origjinale, mund ta rindërtoni pronën e saj length në këtë mënyrë:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Rezultati: [0, 1, 2, 3]

Por ka edhe një metodë tjetër, dhe më të shpejtë. Nëse shpejtësia është e rëndësishme për ju, ky është zgjedhja jonë:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Rezultati: [0, 1, 2, 3]

Shfaqja e vlerës së fundit (vlerave) të array-së

MASIVAT
Kjo teknikë kërkon përdorimin e metodës slice().

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Rezultati: [9]
console.log(array.slice(-2)); // Rezultati: [8, 9]
console.log(array.slice(-3)); // Rezultati: [7, 8, 9]

Formatimi i kodit JSON

JSON

Ndoshta keni përdorur tashmë JSON.stringify. A e dini se ndihmon në formatimin e JSON tuaj?

Metoda stringify() merr dy parametra opsionalë: funksionin replacer, i cili mund të përdoret për të filtruar JSON e shfaqur, dhe vlerën space.

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

// Rezultati:
// '{
//     "alpha": A,
//     "beta": B
// }'

Kjo është gjithçka, shpresoj se të gjitha këto teknika e kanë ndihmuar. Çfarë truqesh njihni ju? Shkruani ato në komentet.

Skillbox rekomandon:

Kursi praktik dyvjeçar «Unë jam zhvillues web PRO».

Kurs online «Programues C# nga 0».

Kurs praktik njëvjeçar «Zhvillues PHP nga 0 në PRO».

Burimi: habr.com