Fișa de cheat JavaScript rapidă și practică Toptal: ES6 și mai departe

constante

let vs var

> const EULER = 2,7182818284
> EULER = 13
> EULER
> 2,7182818284

> var medie = 5
> var medie = (medie + 1) / 2
> medie
> 3
> lasă valoare = „bună lume”
> let value = „ce este nou”
// -> aruncă TypeError: identificatorul „valoare” a fost deja declarat

Avertizare! Dacă matrice sau obiect, referința este menținută constantă . Dacă constanta este o referință la un obiect, puteți modifica conținutul, dar nu modificați niciodată variabila.

> const CONSTANTES = []
> CONSTANTS.push(EULER)
> CONSTANTE
> [ 2,7182818284 ]
> CONSTANTES = { 'euler': 2,7182818284 }
> CONSTANTE
> [ 2,7182818284 ]

Fiți conștienți de zonele moarte temporale :

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

Pentru că este echivalent cu:

Notație binară, octală și hexagonală

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

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

Variabilele declarate cu „let/const” nu se ridică:

Tipuri noi

> console.log(val)
// -> Aruncă ReferenceError
> fie val = 3
> console.log(val) // -> 3

Simboluri, hărți, hărți slabe și seturi

Funcția săgeată

Noi funcții cu scop

> setTimeout(() => {
… console.log(„întârziat”)
… }, 1000)

> {
… let cue = „Luke, eu sunt tatăl tău”
… console.log(cue)
…}
> „Luke, eu sunt tatăl tău”

Echivalent cu funcția anonimă

Echivalent cu expresii de funcție invocate imediat (IIFE)

> setTimeout(funcție () {
… console.log(„întârziat”)
… }.bind(this), 1000)

> (funcția () {
… var cue = „Luke, eu sunt tatăl tău” … console.log(cue) // „Luke, eu sunt –
… }())
> console.log(cue) // Eroare de referință

Noutăți de notație de obiect

Interpolarea șirurilor, mulțumită modelelor literale

// Proprietăți calculate
> let key = new Date().getTime()
> let obj = { [cheie]: „valoare” }
> obj
> { '1459958882881': 'valoare' }

// Literale obiect
balon = { culoare, dimensiune };

// La fel ca
balon = {
culoare: culoare,
dimensiune: dimensiune

}

// Notații de metodă mai bune
obj = {
foo (a, b) { … },
bară (x, y) { … }
}

> nume const = „Tigru”
> vârsta const = 13
> console.log (`Pisica mea se numește ${name} și are ${age} ani.`)
> Pisica mea se numește Tigru și are 13 ani.

// Putem păstra liniile noi...
lasă text = ( `cat
câine
nickelodeon`
)

Param. implicite

> funcția cum ești (răspuns = 'ok') {
console.log(răspuns) // probabil „ok”
}

Promisiuni

Clase, Moștenire, Setters, Getters

promisiune nouă((rezolvare, respingere) => {
request.get(url, (eroare, răspuns,
corp) => {
dacă (corp) {
rezolvare(JSON.parse(corp));
} altfel {
rezolva({});
}
})
}).then(() => { ... })
.catch((err) => aruncare err)

// Paraleliză sarcini
Promise.toate([
promisiunea1, promisiunea2, promisiunea3
]).then(() => {
// toate sarcinile sunt terminate
})

clasa Dreptunghi se extinde Forma {
constructor (id, x, y, w, h) {
super(id, x, y)
aceasta.latime = w
aceasta.înălțime = h
}
// Getter și setter
setați lățime (w) { this._width = w }
obține lățimea () { return this._width }
}

clasa Cercul se extinde Forma {
constructor (id, x, y, radius) {
super(id, x, y)
aceasta.raza = raza
}
do_a (x) {
fie a = 12;
super.do_a(x + a);
}
static do_b() { ... }
}
Circle.do_b()

Destructurarea tablourilor

Destructurarea obiectelor

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

> let luke = { ocupatie: 'jedi',
tată: 'anakin'}
> let {ocupație, tată} = luke
> console.log(ocupație, tată)
> jedi anakin

Operator Spread

...Dezstructurează-te ca un șef

// Transformă matricele separate prin virgulă
// valori și multe altele
> function logger (...args) {
console.log('%s argumente',
args.length)
args.forEach(console.log)
// arg[0], arg[1], arg[2]
}

> const [ pisica, caine, ... peste ] = [
„schroedinger”, „Laika”, „Nemo”, „Dori”]
> peste // -> ['Nemo', 'Dori']

Sau faceți o împingere mai bună

...Și destructurarea în viitor ES7

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

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

Async ES7

Așteptați ES7

funcția asincronă schrodinger () {
returnează o nouă promisiune ((rezolvare, respingere)
=> {
rezultat const = Math.random > 0,5
setTimeout(() => {
returnează rezultatul? rezolvă („în viață”)
: respinge('mort')
})
})
}

încerca {
console.log(așteaptă schrodinger())
// -> „în viață”
} prinde (eră) {
console.log(err)
// -> „mort”
}

Export ES7

Se importă ES7

funcția de export sumTwo (a, b) {
returnează a + b;
}
export const EULER = 2,7182818284
let stuff = { sumTwo, EULER }
export { chestii implicite }

import React de la „react”
import { EULER } din './myexports'
import * ca lucruri din „./myexports”
// echivalentă cu
importați lucruri din „./myexports”
// { sumTwo, EULER }

Generatoare

Ei returnează un obiect care implementează un protocol de iterație. adică are o metodă next() care returnează { value: < some value>, done: <true or false> } .

function* incRand (max) { // Asterisc definește acest lucru ca un generator
în timp ce (adevărat) {
// Întrerupeți execuția după randament, reluați
// când se apelează următorul(<ceva>).
// și atribuiți <ceva> lui x
fie x = randament Math.floor(Math.random() * max + 1);
max += x;
}
}

> var rng = incRand(2) // Returnează un obiect generator
> rng.next() // { valoare: <între 1 și 2>, terminat: fals }
> rng.next(3) // ca mai sus, dar între 1 și 5
> rng.next() // NaN deoarece 5 + rezultate nedefinite în NaN
> rng.next(20) // Nimeni nu se aștepta din nou la NaN?
> rng.throw(new Error('Starea generatorului irecuperabilă.'))
// Va fi aruncat din randament