Quoi de neuf dans ECMAScript 2020

JavaScript est l'un des langages de programmation les plus populaires, avec de nouvelles fonctionnalités ajoutées chaque année. Cet article présente les nouvelles fonctionnalités ajoutées dans ECMAScript 2020 (également connu sous le nom d'ES11).

Avant l'introduction d'ECMAScript 2015 (également connu sous le nom d'ES6), JavaScript se développait très lentement. Mais depuis 2015, de nouvelles fonctionnalités sont ajoutées chaque année. Il convient de noter que toutes les fonctionnalités ne sont pas prises en charge par les navigateurs modernes, mais grâce au compilateur JavaScript Babel, nous pouvons déjà utiliser les nouvelles fonctionnalités. Cet article présentera certaines des dernières fonctionnalités d'ECMAScript 2020 (ES11).

Chaînage facultatif Chaînage facultatif

---

La plupart des développeurs ont rencontré ce problème :

TypeError: Cannot read property ‘x’ of undefined

Cette erreur signifie que nous accédons à une propriété qui n’appartient pas à l’objet.

Accès aux propriétés d'un objet

const flower = {
    colors: {
        red: true
    }
}
console.log(flower.colors.red) // 正常运行

console.log(flower.species.lily) // 抛出错误：TypeError: Cannot read property 'lily' of undefined

Dans ce cas, le moteur JavaScript générera une erreur comme celle-ci. Mais dans certains cas, peu importe que la valeur existe ou non, car nous savons qu'elle existera. Ainsi, les appels chaînés facultatifs sont utiles !

Nous pouvons utiliser l'opérateur de chaînage optionnel composé d'un point d'interrogation et d'un point pour indiquer qu'une erreur ne doit pas être générée. S'il n'y a pas de valeur, undefined doit être renvoyé.

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

Des appels chaînés facultatifs peuvent également être utilisés lors de l'accès à des tableaux ou de l'appel de fonctions.

Accès au tableau

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

Fonction d'appel

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

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

plantFlowers = null

console.log(plantFlowers()) // 抛出错误：TypeError: plantFlowers is not a function

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

Coalescence nulle Fusion de valeurs nulles

---

Actuellement, pour fournir une valeur de repli pour une variable, l'opérateur logique || est toujours requis. Il convient à de nombreuses situations, mais ne peut pas être appliqué dans certains scénarios particuliers. Par exemple, la valeur initiale est une valeur booléenne ou un nombre. Par exemple, nous voulons attribuer un nombre à une variable. Lorsque la valeur initiale de la variable n'est pas un nombre, sa valeur par défaut est 7 :

let number = 1
let myNumber = number || 7

La variable monNuméro est égale à 1, car la gauche (numéro) ) est une vraie valeur 1 . Mais que se passe-t-il si le nombre variable n’est pas 1 mais 0 ?

let number = 0
let myNumber = number || 7

0 est une fausse valeur, donc même si 0 est un nombre. La variable myNumber se verra attribuer la valeur 7 à droite. Mais le résultat n’est pas celui que nous souhaitons. Heureusement, l'opérateur union composé de deux points d'interrogation : ?? peut vérifier si le numéro variable est un nombre sans écrire de code supplémentaire. La valeur à droite de l'opérateur

let number = 0
let myNumber = number ?? 7

n'est valide que lorsque la valeur à gauche est égale à null ou indéfinie. Par conséquent, la variable myNumber dans l'exemple a désormais une valeur égale à 0.

Champs privés Champs privés

---

De nombreux langages de programmation avec classes permettent de définir des classes comme propriétés publiques, protégées ou privées. Les propriétés publiques sont accessibles depuis l'extérieur de la classe ou des sous-classes, les propriétés protégées ne sont accessibles que par les sous-classes et les propriétés privées ne sont accessibles qu'au sein de la classe. JavaScript prend en charge la syntaxe de classe depuis ES6, mais les champs privés n'ont pas été introduits jusqu'à présent. Pour définir une propriété privée, elle doit être précédée d'un symbole dièse : #.

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

Si on accède aux propriétés privées de la classe depuis l'extérieur, une erreur sera inévitablement signalée.

Champs statiques Champs statiques

---

Si vous souhaitez utiliser des méthodes de classe, vous devez d'abord instancier une classe, comme suit :

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

Tenter d'accéder à une méthode d'une classe Flower qui n'a pas été instanciée générera une erreur. Mais en raison des champs statiques, les méthodes de classe peuvent être déclarées avec le mot-clé static puis appelées de l'extérieur.

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

---

Actuellement, si vous utilisez wait pour obtenir le résultat d'une fonction de promesse, la fonction utilisant wait doit être définie avec le mot-clé async.

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

Le problème est qu'il est fondamentalement impossible d'attendre certains résultats à l'échelle mondiale. Sauf si vous utilisez une expression de fonction immédiatement invoquée (IIFE).

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

Mais après l'introduction d'Await de niveau supérieur, il n'est pas nécessaire d'envelopper le code dans une fonction asynchrone, comme suit :

const response = await fetch(url)

Cette fonctionnalité est utile pour résoudre les dépendances de module ou lorsque la source initiale ne peut pas être utilisée. Ceci est très utile lorsqu'une source de sauvegarde est nécessaire.

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

Méthode Promise.allSettled

En attendant que plusieurs promesses renvoient des résultats, nous pouvons utiliser Promise.all([promise_1, promise_2]). Mais le problème est que si l’une des requêtes échoue, une erreur sera générée. Cependant, nous espérons parfois qu'après l'échec d'une requête, les résultats des autres requêtes pourront être renvoyés normalement. Pour cette situation, ES11 a introduit Promise.allSettled.

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

Une promesse réussie renverra un objet contenant le statut et la valeur, et une promesse échouée renverra un objet contenant le statut et la raison.

Importation dynamique Importation dynamique

---

Vous avez peut-être utilisé l'importation dynamique dans la liaison de module de Webpack. Mais le support natif de cette fonctionnalité est arrivé :

// 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教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!