11 abbreviazioni JavaScript e TypeScript da conoscere per una codifica efficiente

JavaScript e TypeScript sono linguaggi di programmazione molto popolari nel campo dello sviluppo web. Entrambi hanno set di funzionalità estesi e molte scorciatoie di sintassi che contribuiscono in modo significativo a migliorare l'efficienza della codifica.

Scopri come rafforzare il tuo codice e ottenere il massimo da questi linguaggi con alcune utili scorciatoie.

1. Operatore ternario

L'operatore ternario offre una sintassi concisa ed efficiente per esprimere affermazioni condizionali. Ha tre parti: una condizione, un'espressione da eseguire se la condizione restituisce true e un'espressione da eseguire se è false.

Questo operatore si rivela particolarmente utile quando si prendono decisioni basate su condizioni e si assegnano valori diversi di conseguenza.

Considera il seguente esempio:

cost età = 20;
cost ageType = età >= 18? "Adulto": "Bambino";
consolare.log (tipoetà); // Uscita: "Adulto"

Questo esempio utilizza l'operatore ternario per verificare se la variabile età è più grande di O uguale a 18. Se lo è, il codice assegna il valore Adulto alla variabile ageType, altrimenti assegna il valore "Child".

2. Letterali modello

I letterali modello offrono un modo potente ed efficiente di formattazione delle stringhe JavaScript e incorporando variabili o espressioni al loro interno. A differenza della tradizionale concatenazione di stringhe che utilizza virgolette singole o doppie, i valori letterali del modello utilizzano apici inversi (`).

Questa sintassi unica offre numerosi vantaggi quando si lavora con le stringhe. Si consideri il seguente esempio che dimostra l'utilizzo dei template literal:

cost nome = "Alice";
cost saluto = `Ciao, ${nome}!`;
consolare.log (saluto); // Output: "Ciao, Alice!"

L'esempio include il nome variabile nel template literal using ${}. Ciò consente di costruire facilmente stringhe dinamiche.

3. Operatore di coalescenza nullo

L'operatore di coalescenza nullo (??) fornisce un modo conveniente per assegnare valori predefiniti quando una variabile è uno dei due nullo O non definito. Restituisce l'operando di destra se l'operando di sinistra lo è nullo O non definito.

Considera il seguente esempio:

cost nome utente = nullo;
cost displayName = nome utente?? "Ospite";
consolare.log (displayName); // Uscita: "Ospite"

In questo esempio, poiché la variabile nome utente È nullo, l'operatore di coalescenza nullish assegna il valore predefinito Ospite alla variabile nome da visualizzare.

4. Valutazione di cortocircuito

La valutazione del cortocircuito consente di scrivere espressioni condizionali concise utilizzando operatori logici come && E ||. Sfrutta il fatto che un operatore logico smetterà di valutare le espressioni non appena può determinare il risultato.

Considera il seguente esempio:

cost nome = "John";
cost saluto = nome && `Ciao, ${nome}`;
consolare.log (saluto); // Output: "Ciao, John"

Questo esempio valuterà solo l'espressione `Ciao, ${name}` se la variabile nome ha un valore veritiero. Altrimenti va in cortocircuito e assegna il valore di nome stesso alla variabile saluto.

5. Assegnazione proprietà oggetto Stenografia

Durante la creazione di oggetti, hai la possibilità di utilizzare una notazione abbreviata che assegna variabili come proprietà con lo stesso nome.

Questa notazione abbreviata elimina la necessità di dichiarare in modo ridondante sia il nome della proprietà che il nome della variabile, ottenendo un codice più pulito e conciso.

Considera il seguente esempio:

cost nome = "John";
cost cognome = "Dai";
cost persona = { nome, cognome };
consolare.log (persona); // Output: { firstName: "John", lastName: "Doe" }

Questo esempio assegna le proprietà nome di battesimo E cognome utilizzando la notazione abbreviata.

6. Concatenamento opzionale

Concatenamento opzionale (?.) consente di accedere alle proprietà nidificate di un oggetto senza preoccuparsi di valori intermedi nulli o non definiti. Se una proprietà nella catena è nulla o non definita, l'espressione va in cortocircuito e restituisce undefined.

Considera il seguente esempio:

cost utente = { nome: "Alice", indirizzo: { città: "New York", Paese: "STATI UNITI D'AMERICA" }};
cost paese = indirizzo.utente?.paese;
consolare.log (paese); // Uscita: "USA"

Nell'esempio precedente, l'operatore di concatenamento facoltativo garantisce che il codice non generi un errore se il indirizzo proprietà o il Paese proprietà mancante.

7. Destrutturazione degli oggetti

Destrutturazione dell'oggetto è una potente funzionalità in JavaScript e TypeScript che consente di estrarre proprietà dagli oggetti e assegnarle a variabili utilizzando una sintassi concisa.

Questo approccio semplifica il processo di accesso e manipolazione delle proprietà degli oggetti. Diamo un'occhiata più da vicino a come funziona la destrutturazione degli oggetti con un esempio:

cost utente = { nome: "John", età: 30 };
cost { nome, età } = utente;
consolare.log (nome, età); // Uscita: "Giovanni" 30

Questo esempio estrae le variabili nome E età dal utente oggetto tramite la destrutturazione dell'oggetto.

8. Operatore di diffusione

L'operatore di diffusione (...) consente di espandere gli elementi di un iterabile, come un array o un oggetto, in singoli elementi. È utile per combinare array o crearne copie poco profonde.

Considera il seguente esempio:

cost numeri = [1, 2, 3];
cost nuoviNumeri = [...numeri, 4, 5];
consolare.log (nuovi numeri); // Uscita: [1, 2, 3, 4, 5]

Nell'esempio sopra, l'operatore spread espande il numeri array in singoli elementi, che vengono poi combinati con 4 E 5 per creare un nuovo array, newNumeri.

9. Scorciatoia ciclo oggetto

Quando si esegue l'iterazione sugli oggetti, è possibile utilizzare il file per...in loop in combinazione con la destrutturazione degli oggetti per iterare comodamente sulle proprietà degli oggetti.

Considera questo esempio:

cost utente = { nome: "John", età: 30 };
per (cost [chiave, valore] DiOggetto.entries (utente)) { 
consolare.tronco d'albero(`${chiave}: ${valore}`);
}
// Produzione:
// nome: Giovanni
// età: 30

Nell'esempio sopra, Object.entries (utente) restituisce un array di coppie chiave-valore, che ogni iterazione poi destruttura nelle variabili chiave E valore.

10. Array.indexOf Shorthand utilizzando l'operatore bit a bit

È possibile sostituire le chiamate al Array.indexOf metodo con una scorciatoia utilizzando l'operatore bit a bit ~ per verificare se un elemento esiste in un array. La scorciatoia restituisce l'indice dell'elemento se trovato o -1 se non trovato.

Considera il seguente esempio:

cost numeri = [1, 2, 3];
cost indice = ~numeri.indiceDi(2);
consolare.log (indice); // Uscita: -2

Nell'esempio sopra, ~numeri.indiceDi (2) ritorna -2 Perché 2 è all'indice 1e l'operatore bit per bit nega l'indice.

11. Casting Values ​​to Boolean With!!

A convertire esplicitamente un valore a un booleano, puoi usare l'operatore di doppia negazione (!!). Converte efficacemente un valore veritiero in VERO e un falso valore a falso.

Considera il seguente esempio:

cost valore1 = "Ciao";
cost valore2 = "";
consolare.log(!!valore1); // Uscita: vero
consolare.log(!!valore2); // Uscita: falso

Nell'esempio sopra, !!valore1 ritorna VERO perché la stringa Ciao è veritiero, mentre !!valore2 ritorna falso perché la stringa vuota è falsa.

Sbloccare l'efficienza e la leggibilità del codice

Utilizzando queste abbreviazioni in JavaScript e TypeScript, puoi migliorare la tua efficienza di codifica e produrre codice più conciso e leggibile. Che si tratti di utilizzare l'operatore ternario, la valutazione del corto circuito o sfruttare la potenza dei valori letterali del modello, queste scorciatoie forniscono strumenti preziosi per una codifica efficiente.

Inoltre, la scorciatoia di assegnazione della proprietà dell'oggetto, il concatenamento facoltativo e la destrutturazione dell'oggetto semplifica il lavoro con gli oggetti, mentre l'operatore spread e le abbreviazioni di array consentono un array efficiente manipolazione. Padroneggiare queste abbreviazioni ti renderà uno sviluppatore JavaScript e TypeScript più produttivo ed efficace.