Cheat sheet JavaScript rapido e pratico di Toptal: ES6 e oltre

Costanti

lascia vs var

> const EULER = 2.7182818284
> EULER = 13
> EULER
> 2.7182818284

> var media = 5
> var media = (media + 1) / 2
> media
> 3
> let value = 'ciao mondo'
> let value = 'cosa c'è di nuovo'
// -> genera TypeError: l'identificatore 'value' è già stato dichiarato

Avvertimento! Se array o oggetto, il riferimento viene mantenuto costante . Se la costante è un riferimento a un oggetto, puoi comunque modificare il contenuto, ma non cambiare mai la variabile.

> COST COSTANTI = []
> CONSTANTS.push(EULER)
> COSTANTI
> [ 2.7182818284 ]
> COSTANTI = { 'eulero': 2.7182818284 }
> COSTANTI
> [ 2.7182818284 ]

Fai attenzione alle zone morte temporali :

> console.log(val) // -> 'non definito'
> var val = 3
> console.log(val) // -> 3

Perché equivale a:

Notazione binaria, ottale ed esadecimale

> var
> console.log(val)
> val = 3
> console.log(val)

> 0b1001011101 // 605
> 0o6745 // 3557
> 0x2f50a // 193802

Le variabili dichiarate con "let/const" non vengono sollevate:

Nuovi tipi

> console.log(val)
// -> Genera ReferenceError
> lascia val = 3
> console.log(val) // -> 3

Simboli, mappe, mappe deboli e set

Funzione freccia

Nuove funzioni con ambito

> setTimeout(() => {
… console.log('delayed')
… }, 1000)

> {
… let cue = 'Luke, io sono tuo padre'
… console.log(spunto)
… }
> 'Luca, io sono tuo padre'

Equivalente alla funzione anonima

Equivalente alle espressioni di funzione richiamate immediatamente (IIFE)

> setTimeout(funzione () {
… console.log('delayed')
… }.bind(questo), 1000)

> (funzione () {
… var cue = 'Luke, io sono tuo padre' … console.log(cue) // 'Luke, io sono –
… }())
> console.log(cue) // Errore di riferimento

Novità sulla notazione degli oggetti

Interpolazione di stringhe, grazie ai letterali del modello

// Proprietà calcolate
> let key = new Date().getTime()
> let obj = { [chiave]: “valore” }
> ogg
> { '1459958882881': 'valore' }

// Letterali oggetto
palloncino = {colore, dimensione};

// Uguale a
palloncino = {
colore: colore,
taglia: taglia

}

// Migliori notazioni sui metodi
oggetto = {
pippo (a, b) { … },
barra (x, y) { … }
}

> nome const = 'Tigre'
> età costante = 13
> console.log (`Il mio gatto si chiama ${name} e ha ${age} anni.`)
> Il mio gatto si chiama Tiger e ha 13 anni.

// Possiamo preservare le nuove righe...
let text = ( `cat
cane
nickelodeon`
)

Parametri predefiniti

> funzione howAreYou (risposta = 'ok') {
console.log(risposta) // probabilmente 'ok'
}

Promesse

Classi, Ereditarietà, Setter, Getter

new Promise((risolvere, rifiutare) => {
request.get(url, (errore, risposta,
corpo) => {
se (corpo) {
risolvere(JSON.parse(corpo));
} altro {
risolvere({});
}
})
}).then(() => { ... })
.catch((err) => throw err)

// Parallelizza le attività
Promise.all([
promessa1, promessa2, promessa3
]).then(() => {
// tutte le attività sono terminate
})

classe Rettangolo estende Forma {
costruttore (id, x, y, w, h) {
super(id, x, y)
questa.larghezza = w
questa.altezza = h
}
// Getter e setter
imposta larghezza (w) { this._width = w }
ottieni larghezza () {restituisci questo._larghezza}
}

classe Cerchio estende Forma {
costruttore (id, x, y, raggio) {
super(id, x, y)
this.radius = raggio
}
fare_a (x) {
sia a = 12;
super.do_a(x + a);
}
statico do_b() { ... }
}
Cerchio.do_b()

Array di destrutturazione

Destrutturazione di oggetti

> sia [a, b, c, d] = [1, 2, 3, 4];
> console.log(a);
> 1
> b
> 2

> let luke = { occupazione: 'jedi',
padre: 'anakin' }
> lascia {occupazione, padre} = luke
> console.log(occupazione, padre)
> Jedi Anakin

Operatore di diffusione

...Vai a Destrutturare come un Boss

// Trasforma gli array in separati da virgole
// valori e altro
> registro funzioni (...args) {
console.log('%s argomenti',
lunghezza.args)
args.forEach(console.log)
// arg[0], arg[1], arg[2]
}

> const [ gatto, cane, ... pesce ] = [
'schroedinger', 'Laika', 'Nemo', 'Dori']
> pesce // -> ['Nemo', 'Dori']

O fai una spinta migliore

...E la destrutturazione nel futuro ES7

> lascia arr = [1, 2, 3]
> [...arr, 4, 5, 6]
> [1, 2, 3, 4, 5, 6]

{a, b, ... riposo} = {a:1, b:2, c:3, d:4}

Asincrono ES7

Attendi ES7

funzione asincrona schrodinger () {
restituire una nuova promessa((risolvere, rifiutare)
=> {
risultato const = Math.random > 0,5
setTimeout(() => {
risultato di ritorno? risolvere('vivo')
: rifiuta('morto')
})
})
}

Tentativo {
console.log(attendere schrodinger())
// -> 'vivo'
} cattura (err) {
console.log(err)
// -> 'morto'
}

Esporta ES7

Importazione di ES7

funzione di esportazione sommaDue (a, b) {
restituire a + b;
}
export const EULER = 2.7182818284
lascia roba = { sumTwo, EULER }
esporta { roba come predefinita }

import Reagisci da 'reagisci'
importa { EULER } da './myexports'
importa * come roba da './myexports'
// equivalente a
importa materiale da './myexports'
// { somma Due, EULER }

Generatori

Restituiscono oggetti che implementano un protocollo di iterazione. cioè ha un metodo next() che restituisce { value: < some value>, done: <true or false> } .

function* incRand (max) { // L'asterisco lo definisce come un generatore
mentre (vero) {
// Sospendi l'esecuzione dopo la resa, riprendi
// quando viene chiamato next(<qualcosa>).
// e assegna <qualcosa> a x
let x = yield Math.floor(Math.random() * max + 1);
massimo += x;
}
}

> var rng = incRand(2) // Restituisce un oggetto generatore
> rng.next() // { valore: <tra 1 e 2>, fatto: falso }
> rng.next(3) // come sopra, ma tra 1 e 5
> rng.next() // NaN da 5 + risultati non definiti in NaN
> rng.next(20) // Nessuno si aspettava di nuovo NaN?
> rng.throw(new Error('Stato generatore irreversibile.'))
// Verrà espulso dal rendimento