Szybka i praktyczna ściągawka JavaScript firmy Toptal: ES6 i nie tylko

Stałe

niech vs var

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

> var średnia = 5
> var średnia = (średnia + 1) / 2
> średnia
> 3
> niech wartość = 'witaj świecie'
> niech wartość = 'co nowego'
// -> rzuca TypeError: Identyfikator 'value' został już zadeklarowany

Ostrzeżenie! W przypadku tablicy lub obiektu odwołanie jest utrzymywane na stałym poziomie . Jeśli stała jest odniesieniem do obiektu, nadal możesz modyfikować zawartość, ale nigdy nie zmieniać zmiennej.

> stała STAŁE = []
> CONSTANTS.push (EULER)
> STAŁE
> [ 2.7182818284 ]
> STAŁE = { 'euler': 2.7182818284 }
> STAŁE
> [ 2.7182818284 ]

Pamiętaj o tymczasowych martwych strefach :

> console.log(val) // -> 'nieokreślony'
> var val = 3
> console.log(val) // -> 3

Ponieważ jest to odpowiednik:

Zapis binarny, ósemkowy i szesnastkowy

> zmienna wartość
> konsola.log(wartość)
> val = 3
> konsola.log(wartość)

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

Zmienne zadeklarowane za pomocą „let/const” nie są przenoszone:

Nowe typy

> konsola.log(wartość)
// -> Zgłasza błąd referencyjny
> niech val = 3
> console.log(val) // -> 3

Symbole, mapy, słabe mapy i zestawy

Funkcja strzałek

Nowe funkcje w zakresie

> setTimeout(() => {
… console.log('opóźnione')
…}, 1000)

> {
… niech wskazówka = „Luke, jestem twoim ojcem”
… console.log(cue)
… }
> „Luke, jestem twoim ojcem”

Odpowiednik funkcji anonimowej

Odpowiednik natychmiast wywołanych wyrażeń funkcji (IIFE)

> setTimeout(funkcja () {
… console.log('opóźnione')
… }.bind(to), 1000)

> (funkcja () {
… var cue = 'Łukasz, jestem twoim ojcem' … console.log(cue) // 'Łukasz, jestem –
…}())
> console.log(cue) // Błąd odniesienia

Nowości w notacji obiektów

Interpolacja ciągów dzięki literałom szablonowym

// Obliczone właściwości
> let klucz = new Date().getTime()
> let obj = { [klucz]: “wartość” }
> obj
> { '1459958882881': 'wartość' }

// Literały obiektowe
balon = { kolor, rozmiar };

// Taki sam jak
balon = {
kolor: kolor,
rozmiar: rozmiar

}

// Lepsze notacje metod
obj = {
foo (a, b) { … },
bar (x, y) { … }
}

> stała nazwa = 'Tygrys'
> stały wiek = 13
> console.log (`Mój kot ma na imię ${imię} i ma ${wiek} lat`)
> Mój kot ma na imię Tygrys i ma 13 lat.

// Możemy zachować nowe linie…
niech tekst = ( `kot
pies
nikielodeon`
)

Parametry domyślne

> function howAreYou (odpowiedź = 'ok') {
console.log(odpowiedź) // prawdopodobnie 'ok'
}

Obietnice

Klasy, dziedziczenie, setery, gettery

nowa obietnica((rozwiąż, odrzuć) => {
request.get(url, (błąd, odpowiedź,
ciało) => {
jeśli (ciało) {
rozwiązać(JSON.parse(ciało));
} w przeciwnym razie {
rozstrzygać({});
}
})
}).then(() => { ... })
.catch((err) => wyrzuć błąd)

// Równolegle zadania
Obietnica.wszystko([
obietnica1, obietnica2, obietnica3
]).następnie(() => {
// wszystkie zadania zakończone
})

class Rectangle rozszerza Kształt {
konstruktor (id, x, y, w, h) {
super(id, x, y)
this.szerokość = w
this.height = h
}
// Getter i setter
ustaw szerokość (w) { this._width = w }
pobierz szerokość () { zwróć to._width }
}

klasa Okrąg rozszerza Kształt {
konstruktor (id, x, y, promień) {
super(id, x, y)
this.radius = promień
}
zrobić_a (x) {
niech a = 12;
super.do_a(x + a);
}
statyczny do_b() { ... }
}
Okrąg.do_b()

Tablice destrukturyzujące

Destrukturyzacja obiektów

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

> niech luke = { zawód: 'jedi',
ojciec: 'anakin' }
> niech {zawód, ojciec} = luke
> console.log(zawód, ojciec)
> Jedi Anakina

Operator rozprzestrzeniania się

...Idź niszczyć jak szef

// Zamień tablice na oddzielone przecinkami
// wartości i nie tylko
> funkcja rejestratora (...args) {
console.log('%s argumenty',
args.długość)
args.forEach(console.log)
// arg[0], arg[1], arg[2]
}

> const [ kot, pies, ...ryba ] = [
„schroedinger”, „Łajka”, „Nemo”, „Dori”]
> ryby // -> ['Nemo', 'Dori']

Lub zrób lepsze pchnięcie

...i destrukturyzacja w przyszłości ES7

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

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

Asynchroniczny ES7

Czekaj na ES7

funkcja asynchroniczna schrodinger () {
zwróć nową obietnicę ((rozwiąż, odrzuć)
=> {
wynik const = Math.random > 0.5
setTimeout(() => {
zwrócić wynik ? rozwiązać('żywy')
: odrzuć('martwy')
})
})
}

próbować {
console.log (czekaj na schrodinger())
// -> „żywy”
} złapać (błąd) {
konsola.log(błąd)
// -> 'martwy'
}

Eksportuj ES7

Importowanie ES7

funkcja eksportu sumTwo (a, b) {
zwróć a + b;
}
const eksportu EULER = 2,7182818284
let stuff = { sumTwo, EULER }
eksportuj { rzeczy jako domyślne }

importuj React z „react”
importuj { EULER } z './myexports'
importuj * jako rzeczy z './myexports'
// równoważny
importuj rzeczy z „./myexports”
// { sumDwa, EULER }

Generatory

Zwracają obiekty, które implementują protokół iteracji. tzn. ma metodę next(), która zwraca { value: < jakaś wartość>, done: <prawda lub fałsz> } .

function* incRand (max) { // Gwiazdka definiuje to jako generator
podczas (prawda) {
// Wstrzymaj wykonywanie po zysku, wznów
// kiedy next(<coś>) zostanie wywołane
// i przypisz <coś> do x
niech x = yield Math.floor(Math.random() * max + 1);
max += x;
}
}

> var rng = incRand(2) // Zwraca obiekt generatora
> rng.next() // { wartość: <między 1 a 2>, gotowe: fałsz }
> rng.next(3) // jak wyżej, ale między 1 a 5
> rng.next() // NaN od 5 + niezdefiniowane wyniki w NaN
> rng.next(20) // Nikt nie spodziewał się ponownie NaN?
> rng.throw(new Error('Nieodwracalny stan generatora.'))
// zostanie wyrzucony z plonów