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

20 stupefacenti colpi di droni

I droni sono forse le tecnologie più innovative dei nostri tempi e gli strumenti più utili per i fotografi. Con i droni, puoi scattare video aerei o scattare fotografie aeree. Questo tipo di foto sembra totalmente fuori dal mondo, in quanto è difficile immaginare come i luoghi sembrino davvero dal cielo .Al

(Consigli tecnici e di design)

Analizza i codici di qualsiasi sito Web con CSS Dig Chrome Extension

C'è molto che puoi fare con Chrome DevTools dalla modifica di siti Web in tempo reale allo studio di richieste HTTP dettagliate. Tuttavia, la possibilità di analizzare i pattern CSS non viene eseguita nella console.Con CSS Dig, puoi analizzare tutti i selettori CSS, la specificità e le proprietà uniche di qualsiasi pagina web direttamente da Chrome. Qu

(Consigli tecnici e di design)