10 abbreviazioni JavaScript per principianti

Stenografia JavaScript non solo accelera il processo di codifica, ma rende anche gli script più brevi, quindi porta a carichi di pagina più veloci. I codici di stenografia sono validi quanto le versioni a mano lunga; loro essenzialmente stare per la stessa cosa-solo in un formato più compatto. Sono una delle tecniche di ottimizzazione del codice più semplici.

Esistono diverse stenografie JavaScript, tuttavia non avere una guida di riferimento ufficiale. Alcuni sono davvero semplici, mentre altri sono abbastanza intimidatori anche per sviluppatori esperti. In questo articolo, puoi trovare 10 stenografie JavaScript per principianti con cui è possibile iniziare con l'ottimizzazione del codice e scrivere codice più conciso.

1. Numeri decimali

Se tu regolarmente lavorare con grandi decimali questa stenografia può essere una manna dal cielo, perché non devi più digitare tutti gli zeri, basta sostituirli con il e notazione. Per esempio, 1e8 significa l'aggiunta di otto zeri dopo il 1 cifra, è uguale a 100000000.

Il numero dopo la lettera e indica il numero di zeri che viene dopo la (e) cifra (e) precedente e. allo stesso modo, 16e4 è la scorciatoia per 160000, eccetera.

 / * Abbreviazione * / var myVar = 1e8; / * Longhand * / var myVar = 100000000; 

2. Incremento, decremento

Il incrementare la stenografia è composto da due + segni, significa che il valore di una variabile deve essere incrementato di uno. Allo stesso modo, il decremento stenografia consiste di due - segni, e significa che la variabile deve essere decrementato di uno.

Queste due stenografie possono essere utilizzate solo su tipi di dati numerici. Hanno un ruolo indispensabile nei loop, il loro caso d'uso più frequente è il per ciclo continuo.

 / * Stenografia * / i ++; j--; / * Longhand * / i = i + 1; j = j-1; 

3. Aggiungi, distrarre, moltiplicare, dividere

C'è una scorciatoia per ciascuno dei quattro operazioni matematiche di base: addizione, distrazione, moltiplicazione e divisione. Funzionano in modo simile agli operatori di incremento e decremento, proprio qui, puoi cambiare il valore di una variabile da qualsiasi numero (non solo per uno).

Nell'esempio seguente, il io la variabile è incrementata di 5, j è decrementato da 3, K è moltiplicato per 10, e l è diviso da 2.

 / * Stenografia * / i + = 5; j- = 3; k * = 10; l / = 2; / * Longhand * / i = i + 5; j = j-3; k = k * 10; l = l / 2; 

4. Determina la posizione del personaggio

Il charAt () metodo è uno dei metodi di stringa più utilizzati, restituisce il carattere in una posizione specificata (per esempio, il 5^esimo carattere di una stringa). C'è una semplice stenografia che puoi utilizzare: aggiungi il posizione del carattere racchiusa tra parentesi quadre dopo la stringa.

Fai attenzione che il charAt () il metodo è In base zero. Perciò, mystring [4] restituirà il 5^esimo carattere nella stringa ("Y" nell'esempio).

 var myString = "Buon compleanno"; / * Stenografia * / myString [4]; / * Longhand * / myString.charAt (4); 

5. Dichiarare variabili in blocco

Se vuoi creare più di una variabile allo stesso tempo non è necessario digitarli uno per uno. È sufficiente usare il var (o permettere) parola chiave solo una volta, allora puoi semplicemente elencare le variabili che vuoi creare, separati da una virgola.

Con questa stenografia puoi dichiarare entrambi variabili non definite e variabili con un valore.

 / * Stenografia * / var i, j = 5, k = "Buon giorno", l, m = falso; / * Longhand * / var i; var j = 5; var k = "Buon giorno"; var l; var m = falso; 

6. Dichiarare un array associativo

Dichiarare un array in JavaScript è un'operazione relativamente semplice, usando il var myArray = ["mela", "pera", "arancione"] sintassi. però, dichiarando un array associativo è un po 'più complicato, come qui, non devi solo definire i valori ma anche i tasti (in caso di array regolari i tasti sono 0, 1, 2, 3, ecc.).

Un array associativo è un raccolta di coppie chiave-valore. Il modo longhand è di dichiarare la matrice, quindi aggiungere ogni elemento uno per uno. Tuttavia, con la stenografia qui sotto, puoi anche dichiara l'array associativo più tutti i suoi elementi allo stesso tempo.

Nell'esempio seguente, il myArray array associativo assegna il loro luogo di nascita (valori) a personaggi famosi (chiavi).

 / * Stenografia * / var myArray = "Grace Kelly": "Philadelphia", "Clint Eastwood": "San Francisco", "Humphrey Bogart": "New York City", "Sophia Loren": "Roma", "Ingrid Bergman ":" Stockholm " / * Longhand * / var myArray = new Array (); myArray ["Grace Kelly"] = "Philadelphia"; myArray ["Clint Eastwood"] = "San Francisco"; myArray ["Humphrey Bogart"] = "New York City"; myArray ["Sophia Loren"] = "Roma"; myArray ["Ingrid Bergman"] = "Stoccolma"; 

7. Dichiarare un oggetto

La stenografia per dichiarazione dell'oggetto funziona in modo simile a quello degli array associativi. Tuttavia qui non ci sono coppie chiave-valore ma coppie valore-proprietà che devi posizionare tra le parentesi graffe .

L'unica differenza nella sintassi stenografica è quella le proprietà dell'oggetto non sono racchiuse tra virgolette (nome, luogo di nascita, età, wasJamesBond nell'esempio sotto).

 / * Stenografia * / var myObj = nome: "Sean Connery", placeOfBirth: "Edinburgh", età: 86, wasJamesBond: true; / * Longhand * / var myObj = new Object (); myObj.name = "Sean Connery"; myObj.placeOfBirth = "Edinburgh"; myObj.age = 86; myObj.wasJamesBond = true; 

8. Utilizzare l'operatore condizionale

Il operatore condizionale (ternario) è frequentemente usato come il scorciatoia per il se altro dichiarazione. Esso consiste in tre parti:

1. il condizione
2. cosa succede se il condizione è vera (Se)
3. cosa succede se il la condizione è falsa (altro)

Nell'esempio seguente, inviamo un semplice messaggio (all'interno di Messaggio variabile) per le persone che vogliono entrare in un club. Usando la forma abbreviata, è solo una riga di codice per eseguire la valutazione.

 var età = 17; / * Stenografia * / var message = age> = 18? "Consentito": "Negato"; / * Longhand * / if (age> = 18) var message = "Allowed";  else var message = "Negato";  

Se vuoi testarlo solo copia il codice nella console web (F12 nella maggior parte dei browser) e modifica il valore di età variabile alcune volte.

9. Controllare la presenza

Succede spesso che è necessario verificare se una variabile è presente o no. Il “se presenza” abbreviazione ti aiuta a farlo con molto meno codice.

Fai attenzione che la maggior parte degli articoli sulle stenografie JavaScript non fornisce il modulo longhand adatto, come if (myVar) la notazione non controlla semplicemente se la variabile non è falsa ma anche una manciata di altre cose. Vale a dire, la variabile non può essere indefinito, vuoto, nullo e falso.

 var myVar = 99; / * Abbreviazione * / if (myVar) console.log ("La variabile myVar è definita AND non è vuota AND not null AND not false.");  / * Longhand * / if (typeof myVar! == "undefined" && myVar! == "" && myVar! == null && myVar! == 0 && myVar! == false) console.log ("Il myVar la variabile è definita AND non è vuota AND not null AND not false. ");  

Puoi testare come “se presenza” stenografia funziona inserendo il seguente frammento di codice nella console Web e cambiando il valore di myVar alcune volte.

Per capire come funziona questa stenografia, vale la pena testarla con i valori di "" (stringa vuota), falso, 0, vero, una stringa non vuota (ad es. "Ciao"), un numero (ad es. 99), e quando la variabile non è definita (semplicemente var myVar;).

10. Verifica assenza

Il “se presenza” la stenografia può essere usata per controlla l'assenza di una variabile posizionando un punto esclamativo prima di esso. Il punto esclamativo è il logico non operatore in JavaScript (e nella maggior parte dei linguaggi di programmazione).

Pertanto, con il se (! myVar) notazione, è possibile verificare se il myVar variabile non è indefinito, vuoto, nullo o falso.

 var myVar; / * Abbreviazione * / if (! MyVar) console.warn ("La variabile myVar non è definita (OR) vuota (OR) null (OR) false.");  / * Longhand * / if (typeof myVar === "undefined" || myVar === "" || myVar === null || myVar === 0 || myVar === false) console.warn ("La variabile myVar non è definita (OR) empty (OR) null (OR) false.");