Was ist neu in ECMAScript 2020?

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) // 正常运行

console.log(flower.species.lily) // 抛出错误：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]) // 抛出错误：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()) // 抛出错误：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) // 报错：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() // 抛出错误：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"); // 正常运行

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()
    })

考虑到许多应用程序使用诸如 webpack 之类的模块打包器来进行代码的转译和优化，这个特性现在还没什么大作用。

MatchAll 匹配所有项

如果你想要查找字符串中所有正则表达式的匹配项和它们的位置，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 返回更多的信息，包括找到匹配项的索引。

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 可以在不同环境中运行，比如浏览器或者 Node.js。浏览器中可用的全局对象是变量 window，但在 Node.js 中是一个叫做 global 的对象。为了在不同环境中都使用统一的全局对象，引入了 globalThis 。

// 浏览器
window == globalThis // true

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

BigInt

JavaScript 中能够精确表达的最大数字是 2^53 - 1。而 BigInt 可以用来创建更大的数字

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

结论

我希望这篇文章对您有用，并像我一样期待 JavaScript 即将到来的新特性。如果想了解更多，可以看看 tc39 委员会的官方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!