Aide-mémoire JavaScript rapide et pratique de Toptal : ES6 et au-delà

Constantes

laissez vs var

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

> var moyenne = 5
> var moyenne = (moyenne + 1) / 2
> moyenne
> 3
> let value = 'hello world'
> let value = 'quoi de neuf'
// -> lance TypeError : l'identifiant 'value' a déjà été déclaré

Avertissement! S'il s'agit d'un tableau ou d'un objet, la référence est maintenue constante . Si la constante est une référence à un objet, vous pouvez toujours modifier le contenu, mais jamais changer la variable.

> constante CONSTANTES = []
> CONSTANTES.pousser(EULER)
> CONSTANTES
> [ 2.7182818284 ]
> CONSTANTES = { 'euler' : 2.7182818284 }
> CONSTANTES
> [ 2.7182818284 ]

Soyez conscient des zones mortes temporelles :

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

Parce que c'est équivalent à :

Notation binaire, octale et hexadécimale

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

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

Les variables déclarées avec "let/const" ne sont pas hissées :

Nouveaux types

> console.log(val)
// -> Lance une erreur de référence
> soit val = 3
> console.log(val) // -> 3

Symboles, cartes, cartes faibles et ensembles

Fonction flèche

Nouvelles fonctions délimitées

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

> {
… let cue = 'Luke, je suis ton père'
… console.log(cue)
… }
> 'Luc, je suis ton père'

Équivalent à la fonction anonyme

Équivalent aux expressions de fonction appelées immédiatement (IIFE)

> setTimeout(fonction () {
… console.log('retardé')
… }.lier(ceci), 1000)

> (fonction () {
… var cue = 'Luke, je suis ton père' … console.log(cue) // 'Luke, je suis -
… }())
> console.log(cue) // Erreur de référence

Nouveautés de notation d'objet

Interpolation de chaîne, grâce aux littéraux de modèle

// Propriétés calculées
> let key = new Date().getTime()
> laissez obj = { [clé] : "valeur" }
> obj
> { '1459958882881' : 'valeur' ​​}

// Littéraux d'objet
ballon = {couleur, taille} ;

// Pareil que
ballon = {
couleur: couleur,
taille : taille

}

// Meilleures notations de méthode
obj = {
foo (a, b) { … },
barre (x, y) { … }
}

> nom constant = 'Tigre'
> âge constant = 13
> console.log (`Mon chat s'appelle ${name} et a ${age} ans.`)
> Mon chat s'appelle Tiger et a 13 ans.

// Nous pouvons conserver les retours à la ligne…
let text = ( `chat
chien
nickelodéon`
)

Paramètres par défaut

> fonction comment vas-tu (réponse = 'ok') {
console.log(answer) // probablement 'ok'
}

Promesses

Classes, Héritage, Setters, Getters

nouvelle promesse((résoudre, rejeter) => {
request.get(url, (erreur, réponse,
corps) => {
si (corps) {
résoudre (JSON.parse (corps));
} autre {
résoudre({});
}
})
}).then(() => { ... })
.catch((err) => jeter err)

// Paralléliser les tâches
Promis.tout([
promesse1, promesse2, promesse3
]).then(() => {
// toutes les tâches sont terminées
})

class Rectangle étend la forme {
constructeur (id, x, y, w, h) {
super(identifiant, x, y)
this.width = w
this.height = h
}
// Getter et setter
définir la largeur (w) { this._width = w }
get width() { return this._width }
}

la classe Cercle étend la forme {
constructeur (id, x, y, rayon) {
super(identifiant, x, y)
this.radius = rayon
}
faire_un (x) {
soit a = 12 ;
super.do_a(x + a);
}
statique do_b() { ... }
}
Cercle.do_b()

Déstructuration des tableaux

Déstructuration d'objets

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

> let luke = { profession : 'jedi',
père : 'anakin'}
> laissez {profession, père} = luc
> console.log(profession, père)
> jedi anakin

Opérateur de propagation

...Allez déstructurer comme un patron

// Transforme les tableaux en virgules séparées
// valeurs et plus
> fonction enregistreur (...args) {
console.log('arguments %s',
args.longueur)
args.forEach(console.log)
// arg[0], arg[1], arg[2]
}

> const [ chat, chien, ...poisson ] = [
'schroedinger', 'Laïka', 'Nemo', 'Dori']
> poisson // -> ['Nemo', 'Dori']

Ou faire une meilleure poussée

...et déstructuration dans le futur ES7

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

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

ES7 asynchrone

Attendez ES7

fonction asynchrone schrödinger () {
retourner une nouvelle promesse((résoudre, rejeter)
=> {
résultat const = Math.random > 0.5
setTimeout(() => {
retour résultat ? résoudre ('vivant')
: rejeter('mort')
})
})
}

essayer {
console.log (attendre schrödinger())
// -> 'vivant'
} attraper (erreur) {
console.log(err)
// -> 'mort'
}

Exporter ES7

Importation ES7

fonction d'exportation sumTwo (a, b) {
retourner a + b ;
}
export const EULER = 2.7182818284
let stuff = { sumDeux, EULER }
exporter { trucs par défaut }

importer React depuis 'react'
importer { EULER } de './myexports'
importer * en tant que contenu de './myexports'
// équivalent à
importer des éléments depuis './myexports'
// { sumDeux, EULER }

Générateurs

Ils retournent des objets qui implémentent un protocole d'itération. c'est-à-dire qu'il a une méthode next() qui renvoie { value: < some value>, done: <true or false> } .

function* incRand (max) { // Astérisque définit ceci comme un générateur
tandis que (vrai) {
// Suspendre l'exécution après le rendement, reprendre
// quand next(<quelquechose>) est appelé
// et assigne <quelque chose> à x
soit x = rendement Math.floor(Math.random() * max + 1);
max += x ;
}
}

> var rng = incRand(2) // Retourne un objet générateur
> rng.next() // { valeur : <entre 1 et 2>, fait : faux }
> rng.next(3) // comme ci-dessus, mais entre 1 et 5
> rng.next() // NaN depuis 5 + résultats indéfinis dans NaN
> rng.next(20) // Personne ne s'attendait à nouveau à NaN ?
> rng.throw(new Error('Etat générateur irrécupérable.'))
// Sera levé du rendement