Toptals schneller und praktischer JavaScript-Spickzettel: ES6 und darüber hinaus

Konstanten

lassen vs var

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

> var Durchschnitt = 5
> var Durchschnitt = (Durchschnitt + 1) / 2
> Durchschnitt
> 3
> let value = 'Hallo Welt'
> let value = 'Was ist neu'
// -> löst TypeError aus: Bezeichner 'value' wurde bereits deklariert

Warnung! Bei Array oder Objekt wird die Referenz konstant gehalten . Wenn die Konstante eine Referenz auf ein Objekt ist, können Sie immer noch den Inhalt ändern, aber niemals die Variable.

> const KONSTANTEN = []
> KONSTANTEN.push(EULER)
> KONSTANTEN
> [ 2.7182818284 ]
> KONSTANTEN = { 'euler': 2.7182818284 }
> KONSTANTEN
> [ 2.7182818284 ]

Seien Sie sich der zeitlichen Todeszonen bewusst :

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

Denn es ist äquivalent zu:

Binär-, Oktal- und Hex-Notation

> var val
> Konsole.log(val)
> wert = 3
> Konsole.log(val)

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

Mit "let/const" deklarierte Variablen werden nicht gehisst:

Neue Typen

> Konsole.log(val)
// -> Löst ReferenceError aus
> lass val = 3
> Konsole.log(val) // -> 3

Symbole, Karten, WeakMaps und Sets

Pfeilfunktion

Neue Bereichsfunktionen

> setTimeout(() => {
… console.log('verzögert')
… }, 1000)

> {
… let cue = 'Luke, ich bin dein Vater'
… console.log (Stichwort)
… }
> 'Luke, ich bin dein Vater'

Entspricht der anonymen Funktion

Äquivalent zu sofort aufgerufenen Funktionsausdrücken (IIFE)

> setTimeout (Funktion () {
… console.log('verzögert')
… }.bind(this), 1000)

> (Funktion () {
… var cue = 'Luke, ich bin dein Vater' … console.log(cue) // 'Luke, ich bin –
… }())
> console.log(cue) // Referenzfehler

Neuheiten in der Objektnotation

String-Interpolation dank Template-Literalen

// Berechnete Eigenschaften
> Taste let = new Date().getTime()
> let obj = { [Schlüssel]: „Wert“ }
> Obj
> { '1459958882881': 'Wert' }

// Objektliterale
Ballon = {Farbe, Größe};

// Gleich wie
Ballon = {
Farbe: Farbe,
Größe: Größe

}

// Bessere Methodennotationen
obj = {
foo (a, b) { … },
Balken (x, y) { … }
}

> konstanter Name = 'Tiger'
> konstantes Alter = 13
> console.log (`Meine Katze heißt ${name} und ist ${age} Jahre alt.`)
> Meine Katze heißt Tiger und ist 13 Jahre alt.

// Wir können Zeilenumbrüche beibehalten…
let text = ( `kat
Hund
Nickelodeon‘
)

Standardparameter

> Funktion wie gehts dir (antwort = 'ok') {
console.log(answer) // wahrscheinlich 'ok'
}

Versprechen

Klassen, Vererbung, Setter, Getter

neues Versprechen ((auflösen, ablehnen) => {
request.get(url, (Fehler, Antwort,
Körper) => {
wenn (Körper) {
lösen (JSON.parse (body));
} anders {
beschließen({});
}
})
}).dann(() => { ... })
.catch((err) => Fehler werfen)

// Tasks parallelisieren
Versprechen.all([
Versprechen1, Versprechen2, Versprechen3
]).then(() => {
// Alle Aufgaben sind erledigt
})

Klasse Rechteck erweitert Form {
Konstruktor (id, x, y, w, h) {
super(id, x, y)
this.width = w
this.height = h
}
// Getter und Setter
setze Breite (w) { this._width = w }
hole width () {return this._width }
}

Klasse Kreis verlängert Form {
Konstruktor (id, x, y, Radius) {
super(id, x, y)
this.radius = Radius
}
do_a (x) {
sei a = 12;
super.do_a(x + a);
}
statisch do_b() { ... }
}
Kreis.do_b()

Destrukturieren von Arrays

Destrukturieren von Objekten

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

> let luke = { Beruf: 'Jedi',
Vater: 'anakin' }
> lass {Beruf, Vater} = luke
> console.log(Beruf, Vater)
> Jedi-Anakin

Spread-Operator

... Destrukturieren Sie wie ein Boss

// Arrays in kommaseparierte umwandeln
// Werte und mehr
> Funktionslogger (...args) {
console.log('%s Argumente',
args.länge)
args.forEach(console.log)
// arg[0], arg[1], arg[2]
}

> const [ Katze, Hund, ... Fisch ] = [
'schrödinger', 'Laika', 'Nemo', 'Dori']
> Fisch // -> ['Nemo', 'Dori']

Oder machen Sie einen besseren Stoß

...und Destrukturierung in der Zukunft ES7

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

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

Asynchron ES7

Warte auf ES7

Async- Funktion Schrödinger () {
neues Versprechen zurückgeben ((auflösen, ablehnen)
=> {
konstantes Ergebnis = Math.random > 0,5
setTimeout(() => {
Ergebnis zurückgeben? lösen ('lebendig')
: ablehnen('tot')
})
})
}

Versuchen {
console.log (warte auf Schrödinger ())
// -> 'lebendig'
} fangen (fehler) {
Konsole.log (err)
// -> 'tot'
}

ES7 exportieren

ES7 importieren

Exportfunktion summeZwei (a, b) {
gib a + b zurück;
}
Exportkonst EULER = 2,7182818284
let stuff = { sumTwo, EULER }
exportiere {Zeug als Standard}

Reagieren von 'reagieren' importieren
importiere { EULER } aus './myexports'
import * as stuff from './myexports'
// gleichwertig
Sachen aus './myexports' importieren
// { summeZwei, EULER }

Generatoren

Sie geben ein Objekt zurück, das ein Iterationsprotokoll implementiert. dh es hat eine next()-Methode, die { value: <some value>, done: <true or false> } zurückgibt .

function* incRand (max) { // Asterisk definiert dies als Generator
während (wahr) {
// Ausführung nach dem Yield anhalten, fortsetzen
// wenn next(<something>) aufgerufen wird
// und weise x <etwas> zu
let x = yield Math.floor(Math.random() * max + 1);
maximal += x;
}
}

> var rng = incRand(2) // Gibt ein Generatorobjekt zurück
> rng.next() // { Wert: <zwischen 1 und 2>, fertig: falsch }
> rng.next(3) // wie oben, aber zwischen 1 und 5
> rng.next() // NaN seit 5 + undefiniert ergibt NaN
> rng.next(20) // Niemand hat wieder NaN erwartet?
> rng.throw (neuer Fehler ('Nicht behebbarer Generatorstatus.'))
// Wird aus yield geworfen