Când vă simțiți confortabil să scrieți programe JavaScript de bază, este timpul să învățați o sintaxă avansată pentru a vă curăța codul și pentru a vă accelera codarea.

JavaScript și TypeScript sunt limbaje de programare foarte populare în domeniul dezvoltării web. Ambele au seturi extinse de caracteristici și multe scurtături de sintaxă care contribuie semnificativ la îmbunătățirea eficienței codificării.

Aflați cum să vă înăspriți codul și să profitați la maximum de aceste limbi cu câteva comenzi rapide utile.

1. Operator ternar

Operatorul ternar oferă o sintaxă concisă și eficientă pentru exprimarea declarațiilor condiționate. Are trei părți: o condiție, o expresie de rulat dacă condiția este evaluată ca adevărată și o expresie de rulat dacă este falsă.

Acest operator se dovedește deosebit de util atunci când se iau decizii bazate pe condiții și se atribuie diferite valori în consecință.

Luați în considerare următorul exemplu:

const varsta = 20;
const ageType = vârsta >= 18? "Adult": "Copil";
consolă.log (ageType); // Ieșire: „Adult”
instagram viewer

Acest exemplu folosește operatorul ternar pentru a verifica dacă variabila vârstă este mai mare sau egal cu 18. Dacă este, codul atribuie valoarea Adult la variabila ageType, altfel atribuie valoarea „Copil”.

2. Literale șablon

Literele șablonului oferă o modalitate puternică și eficientă de formatarea șirurilor JavaScript și încorporând variabile sau expresii în cadrul acestora. Spre deosebire de concatenarea tradițională de șiruri folosind ghilimele simple sau duble, literalele șablonului folosesc backtick-uri (`).

Această sintaxă unică oferă mai multe avantaje atunci când lucrați cu șiruri. Luați în considerare următorul exemplu care demonstrează utilizarea literalelor șablon:

const nume = "Alice";
const salut = `Bună ziua, ${name}!`;
consolă.log (salut); // Ieșire: „Bună, Alice!”

Exemplul include Nume variabilă în literalul șablon folosind ${}. Acest lucru vă permite să construiți cu ușurință șiruri dinamice.

3. Operator de coalescere nul

Operatorul de coalescere nul (??) oferă o modalitate convenabilă de a atribui valori implicite atunci când o variabilă este oricare nul sau nedefinit. Returnează operandul din partea dreaptă dacă operandul din partea stângă este nul sau nedefinit.

Luați în considerare următorul exemplu:

const nume de utilizator = nul;
const displayName = nume de utilizator?? "Oaspete";
consolă.log (nume afișat); // Ieșire: „Invitat”

În acest exemplu, din moment ce variabila nume de utilizator este nul, operatorul de coalescere nul atribuie valoarea implicită Oaspete la variabila Numele de afișare.

4. Evaluare de scurtcircuit

Evaluarea scurtcircuitului vă permite să scrieți expresii condiționale concise folosind operatori logici precum && și ||. Profită de faptul că un operator logic va opri evaluarea expresiilor de îndată ce poate determina rezultatul.

Luați în considerare următorul exemplu:

const nume = "Ioan";
const salut = nume && `Bună ziua, ${name}`;
consolă.log (salut); // Ieșire: „Bună, John”

Acest exemplu va evalua doar expresia `Bună ziua, ${nume}` dacă variabila Nume are o valoare de adevăr. În caz contrar, scurtcircuitează și atribuie valoarea lui Nume însuși la variabilă Salut.

5. Stenografie pentru atribuirea proprietăților obiectului

Când creați obiecte, aveți opțiunea de a utiliza o notație scurtă care atribuie variabile ca proprietăți cu același nume.

Această notație scurtă elimină necesitatea de a declara în mod redundant atât numele proprietății, cât și numele variabilei, rezultând un cod mai curat și mai concis.

Luați în considerare următorul exemplu:

const prenume = "Ioan";
const prenume = "Căprioară";
const persoana = { prenume, prenume };
consolă.log (persoană); // Ieșire: { firstName: „John”, lastName: „Doe” }

Acest exemplu atribuie proprietățile Nume și nume folosind notația scurtă.

6. Înlănțuire opțională

Înlănțuire opțională (?.) vă permite să accesați proprietățile imbricate ale unui obiect fără să vă faceți griji cu privire la valorile nule intermediare sau nedefinite. Dacă o proprietate din lanț este nulă sau nedefinită, expresia scurtcircuitează și returnează nedefinită.

Luați în considerare următorul exemplu:

const utilizator = { Nume: "Alice", abordare: { oraș: "New York", țară: "STATELE UNITE ALE AMERICII" }};
const tara = utilizator.adresa?.tara;
consolă.log (țara); // Ieșire: „SUA”

În exemplul de mai sus, operatorul opțional de înlănțuire se asigură că codul nu aruncă o eroare dacă abordare proprietatea sau țară proprietatea lipsește.

7. Destructurarea obiectelor

Destructurarea obiectelor este o caracteristică puternică în JavaScript și TypeScript care vă permite să extrageți proprietăți din obiecte și să le atribuiți variabilelor folosind o sintaxă concisă.

Această abordare simplifică procesul de accesare și manipulare a proprietăților obiectului. Să aruncăm o privire mai atentă asupra modului în care funcționează destructurarea obiectelor cu un exemplu:

const utilizator = { Nume: "Ioan", vârstă: 30 };
const { nume, vârstă } = utilizator;
consolă.log (nume, vârstă); // Ieșire: „Ioan” 30

Acest exemplu extrage variabilele Nume și vârstă de la utilizator obiect prin destructurarea obiectelor.

8. Operator Spread

Operatorul de răspândire (...) vă permite să extindeți elementele unui iterabil, cum ar fi o matrice sau un obiect, în elemente individuale. Este util pentru a combina matrice sau pentru a crea copii superficiale ale acestora.

Luați în considerare următorul exemplu:

const numere = [1, 2, 3];
const newNumbers = [...numere, 4, 5];
consolă.log (numerele noi); // Ieșire: [1, 2, 3, 4, 5]

În exemplul de mai sus, operatorul de răspândire extinde numere matrice în elemente individuale, care sunt apoi combinate cu 4 și 5 pentru a crea o nouă matrice, numere noi.

9. Stenografia buclă a obiectelor

Când iterați peste obiecte, puteți utiliza pentru...în buclă în combinație cu destructurarea obiectelor pentru a repeta în mod convenabil peste proprietățile obiectului.

Luați în considerare acest exemplu:

const utilizator = { Nume: "Ioan", vârstă: 30 };
pentru (const [valoare cheie] deObiect.intrari (utilizator)) { 
consolă.Buturuga(`${key}: ${value}`);
}
// Ieșire:
// nume: Ioan
// vârsta: 30

În exemplul de mai sus, Object.entries (utilizator) returnează o matrice de perechi cheie-valoare, pe care fiecare iterație le destructura apoi în variabile cheie și valoare.

10. Array.indexOf Shorthand folosind operatorul pe biți

Puteți înlocui apelurile către Array.indexOf metoda cu o stenografie folosind operatorul pe biți ~ pentru a verifica dacă un element există într-o matrice. Stenografia returnează indexul elementului dacă este găsit sau -1 dacă nu este găsit.

Luați în considerare următorul exemplu:

const numere = [1, 2, 3];
const index = ~numbers.indexOf(2);
consolă.log (index); // Ieșire: -2

În exemplul de mai sus, ~numerele.indexOf (2) se intoarce -2 deoarece 2 este la index 1, iar operatorul pe biți neagă indexul.

11. Transmiterea valorilor la boolean cu!!

La converti explicit o valoare la un boolean, puteți folosi operatorul de dublă negație (!!). Convertește efectiv o valoare reală în Adevărat și o valoare falsă pentru fals.

Luați în considerare următorul exemplu:

const valoare1 = "Buna ziua";
const valoare2 = "";
consolă.log(!!valoare1); // Ieșire: adevărat
consolă.log(!!valoare2); // Ieșire: fals

În exemplul de mai sus, !!valoare1 se intoarce Adevărat deoarece sfoara Buna ziua este adevărul, în timp ce !!valoare2 se intoarce fals deoarece șirul gol este fals.

Deblocarea eficienței și lizibilitatea codului

Folosind aceste scurtături în JavaScript și TypeScript, vă puteți îmbunătăți eficiența codificării și puteți produce cod mai concis și mai ușor de citit. Fie că este vorba despre utilizarea operatorului ternar, evaluarea scurtcircuitului sau valorificarea puterii literalelor șablon, aceste scurtături oferă instrumente valoroase pentru o codificare eficientă.

În plus, prescurtarea atribuirii proprietăților obiectului, înlănțuirea opțională și destructurarea obiectului simplifică lucrul cu obiecte, în timp ce operatorul de răspândire și prescurtarea matricei permit o matrice eficientă manipulare. Stăpânirea acestor scurtături te va face un dezvoltator JavaScript și TypeScript mai productiv și mai eficient.