Nouvelles fonctionnalités de la syntaxe JS ES6, ES7, ES8, ES9, ES10, ES11, ES12

Nouvelles fonctionnalités

ES6 （2015）

1. Classer

class Man { constructeur (nom) { this.name = '小豪'; } console () { console.log (this.name); } } const man = new Man ('小豪'); man.console () ; // Xiaohao

2. Module ES

// Le module A exporte une méthode
export const sub = (a, b) => a + b;
// Le module B est importé en utilisant
import {sub} de './ A';
console.log (sub (1, 2) ); // 3

3. Fonction flèche

const func = (a, b) => a + b;
func (1, 2); // 3

4. Valeur par défaut du paramètre de fonction

function foo (age = 25,) {//…}

5. Chaîne de modèle

nom de const = '小豪';
const str = Your name is ${name};

6. Mission de déstructuration

soit a = 1, b = 2;
[a, b] = [b, a]; // a 2 b 1

7. Opérateur de propagation

let a = [… 'bonjour le monde']; // ["Bonjour le monde"]

8. Raccourci pour les propriétés d'objet

nom const = '小豪',
const obj = {nom};

9. Promesse

Promise.resolve (). Then (() => {console.log (2);});
console.log (1);
// imprimer d'abord 1, puis imprimer 2

10. let et const

soit name = '小豪';
const arr = [];

ES7 （2016）

1. Array.prototype.includes ()

[1] .inclut (1); // vrai

2. Opérateur exposant

2 ** 10; // 1024

ES8 （2017

1. asynchroniser / attendre

Solution ultime asynchrone

async getData () { const res = attendre api.getTableData (); // attendre 异步 任务// faire quelque chose }

2. Object.values ​​()

Object.values ​​({a: 1, b: 2, c: 3}); // [1, 2, 3]

3. Object.entries ()

Object.entries ({a: 1, b: 2, c: 3}); // [[“a”, 1], [“b”, 2], [“c”, 3]]

4. Rembourrage de cordes

// padStart
'bonjour'.padStart (10); // "bonjour"
// padEnd
'bonjour'.padEnd (10) "bonjour"

5. La virgule est autorisée à la fin de la liste des paramètres de fonction

6. Object.getOwnPropertyDescriptors ()

Récupère tous les descripteurs des propres attributs d'un objet, s'il n'y a pas d'attributs propres, renvoie un objet vide.

7. SharedArrayBuffer 对象

L'objet SharedArrayBuffer est utilisé pour représenter un tampon universel de données binaires brutes de longueur fixe,

/ **
*

• @param {*} longueur La taille du tampon de tableau créé, en octets.
• @returns {SharedArrayBuffer} Un nouvel objet SharedArrayBuffer avec une taille spécifiée. Son contenu est initialisé à 0.
  * /
  nouveau SharedArrayBuffer (10)

8. Objet Atomics

L'objet Atomics fournit un ensemble de méthodes statiques pour effectuer des opérations atomiques sur les objets SharedArrayBuffer.

ES9 （2018）

1. Itération asynchrone

Wait peut être utilisé avec des boucles for ... of pour exécuter des opérations asynchrones de manière série

async function process (array) { for await (let i of array) { // doSomething (i); } }

2. Promise.finalement ()

Promise.resolve (). Then (). Catch (e => e) .finally ();

3. Propriétés de repos / propagation

valeurs const = [1, 2, 3, 5, 6];
console.log (Math.max (… valeurs)); // 6

4. Expression régulière nommée groupe de capture

const reg = / (? [0-9] {4}) - (? [0-9] {2}) - (? [0-9] {2}) /;
const match = reg.exec ('2021-02-23');

image

5. Assertion inverse Regex

(? = p), (? <= p) avant p (position), après p (position)
(?! p), (? <! p>) Sauf avant p (position), sauf après p (position)

(? <= w)

image

(? <! w)

image

6. Expression régulière mode dotAll

Milieu de l'expression régulière. Correspond à n'importe quel caractère, à l'exception du retour chariot. La marque s modifie ce comportement et permet l'occurrence de fin de ligne

/hello.world/.test('hello\nworld '); // faux

image

ES10 （2019）

1. Array.flat () 和 Array.flatMap ()

appartement()

[1, 2, [3, 4]]. Plat (Infinity); // [1, 2, 3, 4]

flatMap ()

[1, 2, 3, 4] .flatMap (a => [a ** 2]); // [1, 4, 9, 16]

2. String.trimStart () 和 String.trimEnd ()

Supprimer les caractères vides au début et à la fin de la chaîne

3. String.prototype.matchAll

matchAll () renvoie un itérateur pour tous les objets de correspondance correspondants

const raw_arr = 'test1 test2 test3'.matchAll ((/ t (e) (st (\ d?)) / g));
const arr = [… raw_arr];

4. Symbol.prototype.description

Attribut en lecture seule, qui renvoie la chaîne de description facultative de l'objet Symbol.

Symbole ('description'). Description; // 'la description'

5. Object.fromEntries ()

Renvoie un tableau de paires clé-valeur des propriétés énumérables de l'objet donné lui-même

// Grâce à Object.fromEntries, vous pouvez convertir Map en Object:
const map = new Map ([['foo', 'bar'], ['baz', 42]]);
console.log (Object.fromEntries (map )); // {foo: "bar", baz: 42}

6. Prise facultative

ES11 （2020）

1. Opérateur de fusion nul (traitement des valeurs nulles)

L'opérateur sur le côté gauche de l'expression est évalué comme non défini ou nul et renvoie son côté droit.

let user = { u1: 0, u2: false, u3: null, u4: undefined u5: '', } let u2 = user.u2 ?? 'User 2' // false let u3 = user.u3 ?? 'User 3 '// Utilisateur 3 let u4 = user.u4 ??' Utilisateur 4 '// Utilisateur 4 let u5 = user.u5 ??' Utilisateur 5 '//' '

2. Chaînage facultatif

?. Nœuds intermédiaires avec détection utilisateur incertaine

let user = {}
let u1 = user.childer.name // TypeError: Impossible de lire la propriété 'name' de non défini
let u1 = user.childer? .name // undefined

3. Promise.all

Renvoie une promesse qui est résolue après que toutes les promesses données ont été résolues ou rejetées, avec un tableau d'objets, chacun représentant le résultat de la promesse correspondant

const promise1 = Promise.resolve (3);
const promise2 = 42;
const promise3 = nouvelle promesse ((résoudre, rejeter) => rejeter ('我 是 失败 的 Promise_1'));
const promise4 = nouvelle promesse ((résoudre, rejeter) => rejeter ('我 是 失败 的 Promise_2'));
const promiseList = [promise1, promise2, promise3, promise4]
Promise.allSettled (promiseList)
.then (values ​​=> { console.log (valeurs) });

image

4. importer()

Importer à la demande

5. Nouveau type de données de base BigInt

Entier de précision arbitraire

6. globalThis

Navigateur:
travailleur de fenêtre :
nœud personnel: global

ES12 （2021）

1. remplace tout

Renvoie une toute nouvelle chaîne, tous les caractères qui répondent aux règles de correspondance seront remplacés

const str = 'bonjour le monde';
str.replaceAll ('l', ''); // "bon mot"

2. Promise.any

Promise.any () reçoit un objet itérable Promise, tant que l'une des promesses réussit, il renvoie la promesse qui a réussi. Si aucune des promesses de l'objet itérable ne réussit (c'est-à-dire que toutes les promesses échouent / rejettent), renvoyez une promesse ratée

const promise1 = nouvelle promesse ((résoudre, rejeter) => rejeter ('Je suis une
promesse ratée_1 ')); const promise2 = nouvelle promesse ((résoudre, rejeter) => rejeter ('je suis une promesse ratée_2'));
const promiseList = [promise1, promise2];
Promise.any (promiseList)
.then (values ​​=> { console.log (valeurs); }) .catch (e => { console.log (e); });

image

3. WeakRefs

Utilisez la classe Class de WeakRefs pour créer une référence faible à un objet (une référence faible à un objet signifie que lorsque l'objet doit être collecté par le GC, cela n'empêchera pas le comportement de collecte du GC)

4. Opérateurs logiques et expressions d'affectation

Opérateurs logiques et expressions d'affectation, les nouvelles fonctionnalités combinent des opérateurs logiques (&&, ||, ??) et des expressions d'affectation. Les opérateurs d'affectation composés existants en JavaScript sont:

a || = b
// équivalence
a = a || (a = b)

a && = b
// 等价 于
a = a && (a = b)

a ?? = b
// Relation d'équivalence
a = a ?? (a = b)

5. Séparateur de nombres

Séparateur de nombres, vous pouvez créer un séparateur visuel entre les nombres et utiliser _underscores pour séparer les nombres afin de rendre les nombres plus lisibles

const money = 1_000_000_000;
// équivalent à
const money = 1000000000;

1_000_000_000 === 1000000000; // vrai

Photo de
❤️ 爱心