JavaScript ist eine der beliebtesten Programmiersprachen, jedes Jahr kommen neue Funktionen hinzu. In diesem Artikel werden die neuen Funktionen vorgestellt, die in ECMAScript 2020 (auch bekannt als ES11) hinzugefügt wurden.

Vor der Einführung von ECMAScript 2015 (auch bekannt als ES6) entwickelte sich JavaScript sehr langsam. Doch seit 2015 kommen jedes Jahr neue Funktionen hinzu. Zu beachten ist, dass nicht alle Features von modernen Browsern unterstützt werden, wir aber dank des JavaScript-Compilers Babel die neuen Features bereits nutzen k?nnen. In diesem Artikel werden einige der neuesten Funktionen von ECMAScript 2020 (ES11) vorgestellt.

Optionale Verkettung Optionale Verkettung

Die meisten Entwickler sind auf dieses Problem gesto?en:

TypeError: Cannot read property ‘x’ of undefined

Dieser Fehler bedeutet dass wir auf eine Eigenschaft zugreifen, die nicht zum Objekt geh?rt.

Zugriff auf die Eigenschaften des Objekts

const flower = {
    colors: {
        red: true
    }
}
console.log(flower.colors.red) // 正常運(yùn)行

console.log(flower.species.lily) // 拋出錯(cuò)誤：TypeError: Cannot read property 'lily' of undefined

In diesem Fall gibt die JavaScript-Engine einen Fehler wie diesen aus. Aber in manchen F?llen spielt es keine Rolle, ob der Wert existiert, weil wir wissen, dass er existiert. Daher sind optionale Kettenanrufe praktisch!

Wir k?nnen den optionalen Verkettungsoperator bestehend aus einem Fragezeichen und einem Punkt verwenden, um anzugeben, dass kein Fehler ausgel?st werden soll. Wenn kein Wert vorhanden ist, sollte undefined zurückgegeben werden.

console.log(flower.species?.lily) // 輸出 undefined

Optionale verkettete Aufrufe k?nnen auch beim Zugriff auf Arrays oder beim Aufrufen von Funktionen verwendet werden.

Auf Array zugreifen

let flowers =  ['lily', 'daisy', 'rose']

console.log(flowers[1]) // 輸出：daisy

flowers = null

console.log(flowers[1]) // 拋出錯(cuò)誤：TypeError: Cannot read property '1' of null
console.log(flowers?.[1]) // 輸出：undefined

Funktion aufrufen

let plantFlowers = () => {
  return 'orchids'
}

console.log(plantFlowers()) // 輸出：orchids

plantFlowers = null

console.log(plantFlowers()) // 拋出錯(cuò)誤：TypeError: plantFlowers is not a function

console.log(plantFlowers?.()) // 輸出：undefined

Nullish Coalescing Nullwertzusammenführung

Um einen Fallback-Wert für eine Variable bereitzustellen, ist derzeit noch der logische Operator || erforderlich. Es ist für viele Situationen geeignet, kann jedoch in einigen speziellen Szenarien nicht angewendet werden. Der Anfangswert ist beispielsweise ein boolescher Wert oder eine Zahl. Zum Beispiel m?chten wir einer Variablen eine Zahl zuweisen. Wenn der Anfangswert der Variablen keine Zahl ist, ist sie standardm??ig 7:

let number = 1
let myNumber = number || 7

Die Variable myNumber ist gleich 1, weil die linke (Zahl ) ist ein wahrer Wert 1 . Was aber, wenn die Variablenzahl nicht 1, sondern 0 ist?

let number = 0
let myNumber = number || 7

0 ist ein falscher Wert, obwohl 0 eine Zahl ist. Der Variablen myNumber wird rechts der Wert 7 zugewiesen. Aber das Ergebnis ist nicht das, was wir wollen. Glücklicherweise kann der Union-Operator, bestehend aus zwei Fragezeichen: ??, prüfen, ob die Variable number eine Zahl ist, ohne zus?tzlichen Code schreiben zu müssen. Der Wert auf der rechten Seite des Operators

let number = 0
let myNumber = number ?? 7

ist nur gültig, wenn der Wert auf der linken Seite gleich null oder undefiniert ist. Daher hat die Variable myNumber im Beispiel jetzt einen Wert gleich 0.

Private Felder Private Felder

Viele Programmiersprachen mit Klassen erm?glichen die Definition von Klassen als ?ffentliche, geschützte oder private Eigenschaften. Auf ?ffentliche Eigenschaften kann von au?erhalb der Klasse oder Unterklassen zugegriffen werden, auf geschützte Eigenschaften kann nur von Unterklassen zugegriffen werden und auf private Eigenschaften kann nur innerhalb der Klasse zugegriffen werden. JavaScript unterstützt seit ES6 die Klassensyntax, private Felder wurden jedoch bisher nicht eingeführt. Um eine private Eigenschaft zu definieren, muss ihr ein Rautesymbol vorangestellt werden: #.

class Flower {
  #leaf_color = "green";
  constructor(name) {
    this.name = name;
  }

  get_color() {
    return this.#leaf_color;
  }
}

const orchid = new Flower("orchid");

console.log(orchid.get_color()); // 輸出：green
console.log(orchid.#leaf_color) // 報(bào)錯(cuò)：SyntaxError: Private field '#leaf_color' must be declared in an enclosing class

Wenn wir von au?en auf die privaten Eigenschaften der Klasse zugreifen, wird unweigerlich ein Fehler gemeldet.

Statische Felder Statische Felder

Wenn Sie Klassenmethoden verwenden m?chten, müssen Sie zun?chst eine Klasse wie folgt instanziieren:

class Flower {
  add_leaves() {
    console.log("Adding leaves");
  }
}

const rose = new Flower();
rose.add_leaves();

Flower.add_leaves() // 拋出錯(cuò)誤：TypeError: Flower.add_leaves is not a function

Der Versuch, auf eine Methode einer Flower-Klasse zuzugreifen, die nicht instanziiert wurde, führt zu einem Fehler. Aufgrund statischer Felder k?nnen Klassenmethoden jedoch mit dem Schlüsselwort static deklariert und dann von au?en aufgerufen werden.

class Flower {
  constructor(type) {
    this.type = type;
  }
  static create_flower(type) {
    return new Flower(type);
  }
}

const rose = Flower.create_flower("rose"); // 正常運(yùn)行

Top Level Await Top Level Await

Wenn Sie derzeit ?await“ verwenden, um das Ergebnis einer Versprechensfunktion zu erhalten, muss die Funktion, die ?await“ verwendet, definiert werden mit dem Schlüsselwort async.

const func = async () => {
    const response = await fetch(url)
}

Das Problem ist, dass es grunds?tzlich unm?glich ist, im globalen Ma?stab auf bestimmte Ergebnisse zu warten. Es sei denn, es wird ein sofort aufgerufener Funktionsausdruck (IIFE) verwendet.

(async () => {
    const response = await fetch(url)
})()

Aber nach der Einführung von Await der obersten Ebene besteht keine Notwendigkeit, den Code wie folgt in eine asynchrone Funktion zu packen:

const response = await fetch(url)

Diese Funktion ist nützlich, um Modulabh?ngigkeiten zu l?sen oder wenn Die ursprüngliche Quelle kann nicht verwendet werden. Dies ist sehr nützlich, wenn eine Backup-Quelle ben?tigt wird.

let Vue
try {
    Vue = await import('url_1_to_vue')
} catch {
    Vue = await import('url_2_to_vue)
}

Promise.allSettled-Methode

Wenn wir darauf warten, dass mehrere Versprechen Ergebnisse zurückgeben, k?nnen wir Promise.all([promise_1, Promise_2]) verwenden. Das Problem besteht jedoch darin, dass ein Fehler ausgegeben wird, wenn eine der Anforderungen fehlschl?gt. Manchmal hoffen wir jedoch, dass die Ergebnisse anderer Anfragen normal zurückgegeben werden k?nnen, nachdem eine Anfrage fehlgeschlagen ist. Für diese Situation hat ES11 Promise.allSettled eingeführt.

promise_1 = Promise.resolve('hello')
promise_2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'problem'))

Promise.allSettled([promise_1, promise_2])
    .then(([promise_1_result, promise_2_result]) => {
        console.log(promise_1_result) // 輸出：{status: 'fulfilled', value: 'hello'}
        console.log(promise_2_result) // 輸出：{status: 'rejected', reason: 'problem'}
    })

Ein erfolgreiches Versprechen gibt ein Objekt zurück, das Status und Wert enth?lt, und ein fehlgeschlagenes Versprechen gibt ein Objekt zurück, das Status und Grund enth?lt.

Dynamischer Import Dynamischer Import

M?glicherweise haben Sie den dynamischen Import in der Modulbindung des Webpacks verwendet. Es gibt jedoch native Unterstützung für diese Funktion:

// Alert.js
export default {
    show() {
        // 代碼
    }
}


// 使用 Alert.js 的文件
import('/components/Alert.js')
    .then(Alert => {
        Alert.show()
    })

考慮到許多應(yīng)用程序使用諸如 webpack 之類的模塊打包器來進(jìn)行代碼的轉(zhuǎn)譯和優(yōu)化，這個(gè)特性現(xiàn)在還沒什么大作用。

MatchAll 匹配所有項(xiàng)

如果你想要查找字符串中所有正則表達(dá)式的匹配項(xiàng)和它們的位置，MatchAll 非常有用。

const regex = /\b(apple)+\b/;
const fruits = "pear, apple, banana, apple, orange, apple";


for (const match of fruits.match(regex)) {
  console.log(match); 
}
// 輸出 
// 
// 'apple' 
// 'apple'

相比之下，matchAll 返回更多的信息，包括找到匹配項(xiàng)的索引。

for (const match of fruits.matchAll(regex)) {
  console.log(match);
}

// 輸出
// 
// [
//   'apple',
//   'apple',
//   index: 6,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ],
// [
//   'apple',
//   'apple',
//   index: 21,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ],
// [
//   'apple',
//   'apple',
//   index: 36,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ]

globalThis 全局對象

JavaScript 可以在不同環(huán)境中運(yùn)行，比如瀏覽器或者 Node.js。瀏覽器中可用的全局對象是變量 window，但在 Node.js 中是一個(gè)叫做 global 的對象。為了在不同環(huán)境中都使用統(tǒng)一的全局對象，引入了 globalThis 。

// 瀏覽器
window == globalThis // true

// node.js
global == globalThis // true

BigInt

JavaScript 中能夠精確表達(dá)的最大數(shù)字是 2^53 - 1。而 BigInt 可以用來創(chuàng)建更大的數(shù)字

const theBiggerNumber = 9007199254740991n
const evenBiggerNumber = BigInt(9007199254740991)

結(jié)論

我希望這篇文章對您有用，并像我一樣期待 JavaScript 即將到來的新特性。如果想了解更多，可以看看 tc39 委員會(huì)的官方Github倉庫。

推薦教程：《JS教程》

Das obige ist der detaillierte Inhalt vonWas ist neu in ECMAScript 2020?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!