10 abbreviazioni JavaScript per principianti

Le stenografie JavaScript non solo accelerano il processo di codifica, ma rendono anche gli script più brevi, quindi portano a carichi di pagina più veloci . I codici di stenografia sono validi quanto le versioni a mano lunga; essenzialmente stanno per la stessa cosa, solo in un formato più compatto. Sono una delle tecniche di ottimizzazione del codice più semplici.

Esistono diverse combinazioni di JavaScript, tuttavia non hanno 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 puoi iniziare con l'ottimizzazione del codice e scrivere codice più conciso.

1. Numeri decimali

Se lavori regolarmente con grandi decimali questa stenografia può essere una manna dal cielo, dato che non devi più digitare tutti gli zeri, basta sostituirli con la notazione e . Ad esempio, 1e8 significa l'aggiunta di otto zeri dopo l' 1 cifra, equivale a 100000000 .

Il numero dopo la lettera e indica il numero di zeri che vengono dopo le cifre prima di e . Allo stesso modo, 16e4 è la scorciatoia per 160000, ecc.

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

2. Incremento, decremento

La stenografia dell'incremento è composta da due segni +, significa che il valore di una variabile deve essere incrementato di uno . Allo stesso modo, la stenografia del decremento consiste di due segni, e significa che la variabile deve essere decrementata 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 ciclo for .

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

3. Aggiungi, distrarre, moltiplicare, dividere

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

Nell'esempio seguente, la variabile i viene incrementata di 5, j viene decrementata di 3, k viene moltiplicata per 10 e l è diviso per 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 carattere

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

Fai attenzione che il metodo charAt() è a base zero . Pertanto, myString[4] restituirà il 5 ^° carattere nella stringa ( "y" nell'esempio).

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

5. Dichiarare variabili in blocco

Se si desidera creare più di una variabile contemporaneamente non è necessario digitarle una alla volta. È sufficiente utilizzare la parola chiave var (o let ) solo una volta, quindi è sufficiente elencare le variabili che si desidera creare, separate da una virgola .

Con questa stenografia, puoi dichiarare sia variabili non definite che 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

La dichiarazione di un array in JavaScript è un'attività relativamente semplice, utilizzando la sintassi var myArray = ["apple", "pear", "orange"] . Tuttavia, dichiarare un array associativo è un po 'più complicato, poiché qui non si devono solo definire i valori ma anche i tasti (in caso di array regolari i tasti sono 0, 1, 2, 3, etc. .).

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

Nell'esempio seguente, l'array associativo myArray 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 la dichiarazione degli oggetti funziona in modo simile a quella degli array associativi. Tuttavia, qui non ci sono coppie chiave-valore ma coppie valore- proprietà che è necessario inserire tra parentesi graffe {} .

L'unica differenza nella sintassi di stenografia è che le proprietà dell'oggetto non sono racchiuse tra virgolette ( name, placeOfBirth, age, wasJamesBond nell'esempio seguente).

 / * 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

L' operatore condizionale (ternario) viene spesso utilizzato come collegamento per l'istruzione if-else . Consiste di tre parti :

1. la condizione
2. cosa succede se la condizione è vera ( if )
3. cosa succede se la condizione è falsa ( else )

Nell'esempio seguente, inviamo un messaggio semplice (all'interno della variabile del message ) alle 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 basta copiare il codice nella console web (F12 nella maggior parte dei browser) e modificare il valore della variabile age un paio di volte.

9. Controllare la presenza

Succede spesso che sia necessario verificare se una variabile è presente o meno . La stenografia "if presence" ti aiuta a farlo con meno codice.

Fai attenzione che la maggior parte degli articoli sulle abbreviazioni JavaScript non fornisce la forma longhand corretta, poiché la notazione if( myVar ) non controlla semplicemente se la variabile non è falsa ma anche una manciata di altre cose. Vale a dire, la variabile non può essere indefinita, vuota, nulla e falsa .

 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 non è nulla AND non è falsa. "); } 

È possibile verificare come funziona la stenografia "If presence" inserendo il seguente frammento di codice nella console Web e modificando il valore di myVar alcune volte.

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

10. Verifica assenza

La stenografia "if presence" può essere utilizzata per verificare l'assenza di una variabile ponendo un punto esclamativo prima di esso . Il punto esclamativo è l' operatore logico non in JavaScript (e nella maggior parte dei linguaggi di programmazione).

Pertanto, con la notazione if( !myVar ), è possibile verificare se la variabile myVar non è indefinita, vuota, nulla o falsa .

 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."); } 

30 utili espressioni regolari Strumenti e risorse

L'espressione regolare, o spesso nota come espressione regolare, è un modello costituito da regole utilizzate per abbinare un certo insieme di stringhe. Sono estremamente potenti e ne avrai bisogno nella maggior parte dei linguaggi di programmazione che incontri, specialmente quando è necessario scansionare e abbinare il contesto per ulteriori azioni.E

(Consigli tecnici e di design)

20 modelli di packaging per giocattoli che sono assolutamente adorabili

Molti buoni prodotti di alta qualità danno molta importanza alla loro confezione. L'imballaggio non solo offre una qualche forma di protezione per il prodotto, ma consente anche un coinvolgimento interattivo del marchio . Vediamo , sentiamo, tocchiamo, riconosciamo e prestiamo attenzione a imballaggi di buona qualità .

(Consigli tecnici e di design)