Inhalt
- Array-Funktionen
- const / let
- Nullish Verschmelzen? und optionale Verkettung? .. Operatoren
- Async / Warten
- Pfeilfunktionen () => {}
- für ... von
- auf warten ... von
- Klassen
- bekommen / setzen
- Standardparameter der Funktion
- function named parameters
- function rest… parameter
- Destructuring
- Shorthand functions aka Methods
- Promise.all
- Template literals
- Proxy
- Module import/export
( , , )
Array functions
Schauen Sie sich all diese neuen nativen Array-Funktionen an. Kein Unterstrich oder Lodash mehr erforderlich.
Array.every ()
Array.filter ()
Array.find ()
Array.findIndex ()
Array.forEach ()
Array.from ()
Array.includes ()
Array.isArray ()
Array.lastIndexOf ()
Array.map ()
Array.reduce ()
Array.reduceRight ()
Array.some ()
Array-Dokumente
const / let
Diese neuen Schlüsselwörter deklarieren Variablen im Blockbereich (im Gegensatz zum globalen oder funktionalen Bereich). Die Verwendung
const
impliziert, dass sich der Wert nicht ändern sollte,
let
bietet jedoch diese Möglichkeit.
Dokumentation lassen
?? und?.
??
prüft, ob ein Wert null oder undefiniert ist. Keine Notwendigkeit mehr zu verwenden
!!
.
?.
prüft, ob ein Wert wahr ist, bevor die nächste Eigenschaft oder Funktion aufgerufen wird. Sehr nützlich beim Umgang mit zusätzlichen Requisiten.
Optionale Verkettungsdokumentation
let a, b=1
let result = a ?? b
print(result)
result = (a !== null && a !== undefined) ? a : b;
print(result)
print({x:1}?.a?.b ?? "not found")
Async / Warten
Die Schlüsselwörter async / await dienen dazu, Sie vor der Hölle des Rückrufs zu bewahren. Verwenden Sie
await
diese Option , um einen asynchronen Anruf wie einen synchronen Anruf aussehen zu lassen, d. H. Die Ausführung
await fetchUserName()
wird erst in der nächsten Zeile fortgesetzt, wenn fetchUserName () abgeschlossen ist. Bitte beachten Sie, dass Sie zur Verwendung
await
eine als asynchron deklarierte Funktion ausführen müssen, d. H.
async function fn () {await fetchUserName ()}.
Async / Await-Dokumente.
function fetchUserName() {
return new Promise(resolve => setTimeout(resolve, 500))
}
async function withAsync() {
print("withAsync: fetching...")
await fetchUserName()
print("withAsync: done")
}
await withAsync()
function withoutAsync() {
print("withoutAsync: fetching...")
fetchUserName().then(()=>print("withoutAsync done"))
}
withoutAsync()
Pfeilfunktionen () => {}
Dies sind Funktionen, die an den aktuellen Kontext gebunden sind. Es gibt drei Haupttypen, die Sie in freier Wildbahn sehen werden:
ein Argument, eine Zeile, viele Zeilen.
Für ein Formular mit einem Argument sind keine Klammern erforderlich, und für ein Formular mit einer Zeile ist kein Operator erforderlich
return
. bedingungslos zurückkehren.
1 const fn = a => a*2
Ein Argument. Eine Linie.
Ein mehrzeiliges Formular erfordert eine Anweisung,
return
wenn die Funktion etwas zurückgeben möchte. Mehrere Argumente erfordern Klammern.
const fn = (a,b) => {
console.log(a,b)
return a*b
}
Mehrere Argumente, mehrere Zeilen.
Pfeilfunktionsdokumente
für ... von
Wird verwendet, um über einen Iterator zu iterieren. Ebenso
for...in
, außer Sie müssen nicht überprüfen
hasOwnProperty
. Sie können diese Schleifensyntax nicht direkt für ein Objekt verwenden, da das Objekt keinen Iterator hat. Verwenden
Object.entries ({})
Sie stattdessen , um die Iteration abzurufen .
für ... von docs
const x = {a: 1, b: 2}
for (const [key, value] of Object.entries(x)) {
print(`${key}=${value}`)
}
auf warten ... von
Die asynchrone Iteration wurde 2018 eingeführt. Außerdem
Promise.all
können damit viele asynchrone Aufgaben synchronisiert werden. Das folgende Beispiel zeigt 3 Aufgaben, die asynchron ausgeführt werden. Die Schleife verarbeitet jeweils ein Ergebnis der Reihe nach. In diesem Fall sind die am schnellsten zu erledigenden Aufgaben erst am Ende der Iteration ersichtlich.
für warten ... von docs
const delay = (n) => {
return new Promise((resolve) => {
setTimeout(()=>{
print("resolve "+n)
resolve(n)
}, n)
})
}
const delays = [
delay(150),
delay(50),
delay(25)
]
for await (const ret of delays) {
print("for loop await "+ret)
}
Klassen
Im Jahr 2015 portierte ES6 Klassen nach Javascript. Javascript-Klassen sind wie Klassen aus anderen Sprachen, die Sie kennen und lieben. Vererbung, Klassenmethoden, Getter und Setter, Eigenschaften usw.
Klassendokumentation
class A {
constructor(name) {
this.name = name
}
myProp = "myProp"
static foo() {
print("Static method says foo")
}
}
class B extends A {
constructor(name, age) {
super(name)
this.age = age
}
toString() {
return `${this.name} ${this.age}`
}
}
A.foo()
const b = new B("Catch", 22)
print(b)
print(b.myProp)
bekommen / setzen
Get und Set sind beispielsweise Funktionen, die als Eigenschaften bezeichnet werden
person.age = 16; person.age> 18
. Dies ist sehr praktisch, wenn Sie eine dynamische oder berechnete Eigenschaft benötigen. Und sie können sowohl mit Klassen als auch mit regulären Objekten verwendet werden.
Dokumentation abrufen / festlegen
Klassen mit Gettern und Setzern
class A {
constructor() {
this._firstName = "Jane"
this._lastName = "Smith"
}
get fullName() {
return `${this._firstName} ${this._lastName}`
}
set firstName(v) {
this._firstName = v
}
}
const a = new A()
print(a.fullName)
a.firstName = "John"
print(a.fullName)
Objekte mit Getter und Setter
const x = {
get now() { return new Date() }
}
print(x.now)
Standardparameter der Funktion
Hurra! Jetzt können Sie Standardparameter in Ihrer Funktionsdefinition angeben. Funktioniert wie erwartet.
Standardparameter docs
function greet(msg="Hello world") {
print(msg)
}
greet()
greet("hi")
Funktion namens Parameter
Durch die Magie der Objektzerstörung können Funktionen nun benannte Parameter haben.
Benannte Parameterdokumente
function greet({name = "Jane", age = 42} = {}){
print(name + " " +age)
}
greet()
greet({name: "John", age: 21})
Funktion Rest ... Parameter
Mit dem Parameter reset kann die Funktion eine beliebige Anzahl von Argumenten als Array akzeptieren. Es wird empfohlen, dies stattdessen zu verwenden
arguments
.
Rest Parameter docs
function greet(msg1, ...msgs) {
print(msg1)
msgs.forEach(s => print(s))
}
greet("hi", "hello", "world")
Object.assign und Spread Operator
Object.assign(target, source)
kombiniert zwei oder mehr Objekte zu einem. Das vorhandene Ziel wird geändert. Wenn Sie also lieber ein neues Objekt erstellen möchten, übergeben Sie als erstes Argument ein leeres Objektliteral.
Alternativ können Sie den Spread-Operator verwenden
...
, um mehrere Objekte zu kombinieren.
{... obj1, ... obj2}
Beachten Sie jedoch, dass
spread
keine Setter für ein Objekt aufgerufen werden
Object.assign
. Der Spread-Operator kann auch mit Arrays verwendet werden, wie im letzten Codebeispiel gezeigt.
Verbreiten Sie Syntaxdokumente
const source = {x: 1, y: 4}
const target = Object.assign({}, source)
print(JSON.stringify(target))
const spread = {a: 1, b: 2, ...source}
print(JSON.stringify(spread))
const ary1 = [1]
const ary = [...ary1, [2,3]]
print(ary)
Destrukturierung
Durch die Destrukturierung können Sie mithilfe von Vorlagen Werte von Objekten und Arrays abrufen. Dies ist ein komplexes Thema mit vielen Anwendungen ... zu viele, als dass ich sie auflisten könnte, aber ich habe einige der häufigsten Anwendungen gezeigt, die mir in den Sinn kommen.
Destrukturieren von Dokumenten und MDN-Dokumenten
function f() {
return [1, 2];
}
let [a, b] = f()
print("a="+a + " b=" + b)
const obj = {state: {id: 1, is_verified: false}}
const {id, is_verified: verified} = obj.state
print("id = " + id)
print("verified = " + verified)
for (const [key, value] of Object.entries({a: 1, b: 2, c: 3})) {
print(key + " is " + value);
}
Kurzfunktionen, auch Methoden genannt
Für Objekte deklarierte Funktionen können den neuen Kurzstil verwenden, dem das Funktionsschlüsselwort fehlt.
Die beiden Funktionen (fn1, fn2) sind im folgenden Beispiel äquivalent.
Methodenanleitung
const x = {
type: "x",
shorthand() {
print("shorthand "+this.type)
},
long: function() {
print("long "+this.type)
}
}
x.shorthand()
x.long()
Promise.all
Ich habe Versprechungen meistens übersprungen, weil Async / Warten bevorzugt wird, aber manchmal müssen Sie mehrere asynchrone Anrufe synchronisieren, und Promise.all ist der einfachste Weg, dies zu tun.
Promise.all Dokumentation
const delay = (n) => {
return new Promise((resolve) => {
setTimeout(()=> resolve(n), n)
})
}
async function main() {
const delays = [100, 200, 300].map(n => delay(n))
print("waiting…")
const res = await Promise.all(delays)
print("done. result is " + res)
}
main()
Vorlagenliterale
Diese neue Syntax, auch als Vorlagenzeichenfolgen bezeichnet, bietet einfache Zeichenfolgeninterpolation und mehrzeilige Zeichenfolgen.
Vorlagenliteral-Dokumente
let x = `multi
line
string`
print(x)
x = `1+1=${1+1}`
print(x)
Proxy
Mit einem Proxy können Sie get / set-Aufrufe für ein anderes Objekt abfangen. Dies kann nützlich sein, um Eigenschaftsänderungen zu verfolgen, das DOM später zu aktualisieren oder innovative APIs wie den folgenden WWW-Proxy zu erstellen . Proxy-Dokumente
let _nums = [1,2,3]
let nums = new Proxy(_nums, {
set(target, key, value) {
target[key] = value
print("set called with " + key + "=" + value)
print("update DOM")
return true
}
})
nums.push(4)
print("nums: " + nums)
print("_nums: " + _nums)
Modul Import / Export
Mit Modulen können Sie einen Namespace für Ihren Code erstellen und die Funktionalität in kleinere Dateien aufteilen. Im folgenden Beispiel haben wir ein Modul namens greet.js, das in index.html enthalten ist. Bitte beachten Sie, dass das Laden von Modulen immer verzögert wird, sodass das HTML-Rendering nicht blockiert wird. Es gibt viele Möglichkeiten, Import / Export - Funktionalität von js Dateien, lesen Sie die für den Export Dokumentation Details .
Dokumente importieren
function greet(msg) {
console.log("greet:", msg)
}
export default greet
Eine Datei mit dem Namen "greet.js" im Verzeichnis "/ js".
<script type="module">
import greet from "/js/greet.js"
greet("hi")
</script>
index.html
Weiterlesen
Ich habe also nicht über alles gesprochen, was sich in den letzten zehn Jahren geändert hat, sondern nur über das, was ich am nützlichsten finde. Schauen Sie sich diese anderen Themen an.
Verweise
Anleitungen