Résumé de toutes les nouvelles fonctionnalités de JavaScript ECMAScript 6

Cela fait huit ans qu'ECMAScript a officiellement publié ES6 en 2015. Depuis 2015, une nouvelle version sera publiée chaque année en juin, avec l'année à cette époque comme numéro de version.

De nombreuses nouveautés sont apparues dans ces nombreuses versions Afin de faciliter la mémoire, j'ai organisé toutes les nouveautés dans cet article.

ps : Certaines informations indiquent que toutes les versions après ES2015 sont collectivement appelées ES6, et certaines disent que ES6 signifie ES2015, ES7 signifie ES2016, et ainsi de suite, ce qui ne sera pas discuté ici.

ES2015 (ES6)

ES2015 est la version avec les changements les plus importants. Fondamentalement, tout le contenu avant ES2015 a été étendu, comme le montre la figure suivante :

Mots-clés let, const et portée au niveau du bloc.

Avant ES6, il n'y avait qu'une seule façon de déclarer des variables, qui consistait à utiliser le mot-clé var . Dans ES2015, let et const ont été ajoutés pour déclarer les variables et les constantes

. suit :

// Variable de déclaration soit v = 100
v = 200
// Déclare la constante const V = 200
// Modifier les constantes // V = ​​​​300 // Signaler les erreurs

Les variables ou constantes déclarées à l'aide let et const ont une portée au niveau du bloc.

L'exemple de code est le suivant :

{
  var v = 100
}
{
  soit val = 200
}
console.log(v)
console.log(val) // La valeur d'erreur n'est pas définie

Il convient de noter que les variables déclarées à l'aide let ou const n'ont pas les caractéristiques de promotion de variable et il existe une zone morte temporaire.

L'extension de la fonction

permet aux fonctions d'utiliser les valeurs par défaut dans ES2015. L'exemple de code est le suivant :

// Avant es2015, fonction foo(v) {.
  v = vv : 100
  revenir v
}
//es2015
barre de fonctions (v = 100) {
  revenir v
}

Il convient de noter que s'il existe plusieurs paramètres, les paramètres par défaut doivent être utilisés de l'arrière vers l'avant .

Les fonctions fléchées sont ajoutées dans ES2015, qui sont une forme abrégée de fonctions . L'exemple de code est le suivant :

function foo(v) {.
  retourner v``
}
// La fonction flèche s'écrit const foo = (v) => {
  revenir v
}
// abréviation 1
const foo = v => { // Un seul paramètre peut omettre les parenthèses return v
}
// abréviation 2
const foo = v => v // Vous pouvez omettre le retour et les accolades lorsqu'il n'y a que le retour dans l'instruction.

Il convient de noter que this de la fonction fléchée est déterminé en fonction du contexte d'exécution et this n'est pas lié en interne. .

Lors de l'utilisation de fonctions fléchées, il n'y a pas d'objet arguments internes, mais les paramètres restants sont utilisés à la place.

L'exemple de code est le suivant :

const foo = (...args) => {.
  // console.log(arguments) // ReferenceError : les arguments ne sont pas définis
  console.log(args) // args est un tableau}
foo(1, 2, 3, 4) // [1, 2, 3, 4]

L'attribut name ajouté à la fonction dans ES2015 pointe vers le nom de la fonction.

L'exemple de code est le suivant :

function foo(v) {
  revenir v
}
barre const = v => v
console.log(foo.name) // foo
console.log(bar.name) //Extension de

la valeur

. L'expansion de la valeur dans ES2015 ajoute principalement certaines méthodes Math et Number , ainsi que des méthodes de représentation binaire et octale.

Dans ES2015, 0b ou 0B est utilisé pour représenter le binaire, et 0o ou 0O est utilisé pour représenter l'octal.

L'exemple de code est le suivant :

console.log(0b111111111 === 511) // true
console.log(0o777 === 511) //

Les attributs et méthodes étendus par true pour Number sont les suivants :

La méthode pour l'extension Math est la suivante :

extension de chaîne

ES2015 introduit des chaînes de modèle, définies à l'aide de marques de guillemets (`). La chaîne du modèle conservera le format et les variables peuvent être utilisées.

L'exemple de code est le suivant :

// Utilisez ` pour définir la chaîne du modèle let str = `un bol de semaines`.
// La chaîne du modèle peut conserver le format let str2 = `Un bol de semaines`
// La chaîne du modèle peut utiliser la variable const monNom = 'Un bol de semaines'
let str3 = `author: ${myName}` // Utiliser ${} pour envelopper

ES2015 étend également certaines méthodes pour les instances String et String, comme suit :

L'extension du

tableau fournit un opérateur d'expansion dans ES2015, c'est-à-dire..., utilisé dans un tableau pour développer le tableau. et séparez-le par des virgules,

exemple de code comme suit :

const arr = [1, 2, 3, 4, 5, 6]
const newArr = [...arr] // Copiez le tableau console.log(Math.max.call(null, ...arr)) // Utilisez chaque élément du tableau comme paramètre

De plus, Tableau et tableaux

fournit une série de méthodes, qui seront présentées une par une :

Array.from() : Créer un objet de type tableau ou un objet itérable en tant que nouveau tableau . L'exemple de code est le suivant :

function foo() {.
  return Array.from(arguments) // Convertir les arguments en tableau}

console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

Array.of() : Crée un nouveau tableau avec un nombre variable d'arguments Exemple , l'exemple de code est le suivant :

Array.of(1) // [1]
Array.of(true, 1, 'Un bol de semaines') // [true, 1, 'Un bol de semaines']

Array.prototype.copyWithin(), copie superficiellement une partie du tableau vers un autre emplacement du même tableau , et le renvoyer ne modifie pas la longueur du tableau d'origine.

L'exemple de code est le suivant :

const arr = [1, 2, 3, 4]

// Commencez à l'index 2 et copiez le contenu à l'index 0 à la fin arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]

Array.prototype.find() , selon la fonction de rappel donnée, trouver le premier élément correspondant et renvoyer undefined s'il n'est pas trouvé . L'exemple de code est le suivant :

const arr = [1, 2, 3, 4]
arr.find(item => item === 2) // 2 (élément indicateur),

Array.prototype.findIndex() , selon la fonction de rappel donnée, recherche l'index du premier élément correspondant, renvoie s'il n'est pas trouvé - 1 , l'exemple de code est le suivant :

const arr = [1, 2, 3, 4]
arr.findIndex(item => item === 2) // 1 (indique l'index)

Array.prototype.fill() , remplit le tableau avec la valeur donnée L'exemple de code est le suivant :

const arr = [1, 2. , 3, 4 ]
// Remplit l'index 1-3 avec la valeur donnée
arr.fill('un bol de semaines', 1, 3) // [ 1, 'un bol de semaines', 'un bol de semaines', 4 ]

Array.prototype.keys() , renvoie un objet itérable dont le contenu est la clé du tableau , l'exemple de code est le suivant :

const arr = [1, true, 'Un bol de semaines']
clés const = arr.keys()
pour (const i de clés) {
  console.log(i) // Résultats du parcours 0 1 2
}

Array.prototype.values() , renvoie un objet itérable dont le contenu est la valeur du tableau .

L'exemple de code est le suivant :

const arr = [1, true, 'A bowl of Zhou']
valeurs const = arr.values()
pour (const i de valeurs) {
  console.log(i) // Résultat du parcours 1 true Un bol de semaines}

Array.prototype.entries() , renvoie un objet itérable dont le contenu est un tableau. L'index 0 est l'élément du tableau d'origine et 1 est l'élément. du tableau d'origine. La valeur de la position,

l'exemple de code est le suivant :

const arr = [1, true, 'Un bol de semaines']

itérateur const = arr.entries()
console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, 'Un bol de semaines' ] ]

L'extension de l'objet

dans ES2015 permet le nom d'attribut de l'objet et valeur d'attribut pour être cohérente Vous pouvez simplement écrire le nom de l'attribut.

L'exemple de code est le suivant :

const myName = 'Un bol de semaines'.
âge constant = 18
const personne = { monNom, âge }
console.log(person) // { myName : 'A bowl of Zhou', age: 18 }

De plus, lors de la définition d'un objet, vous êtes autorisé à utiliser des expressions enveloppées par [] comme noms d'attribut. L'exemple de code est le suivant :

const myName = 'Une semaine de bowl'
âge constant = 18
const personne = {
  mon nom,
  ['a' + 'g' + 'e'] : âge,
}
console.log(person) // { myName: 'One Bowl Zhou', age: 18 }

Object.is() : utilisé pour comparer si deux valeurs​​sont égales, utilisé pour résoudre NaN ≠= NaN, +0 === - 0 problème,

l'exemple de code est le suivant :

console.log(NaN === NaN) // false
console.log(+0 === -0) // vrai

console.log(Object.is(NaN, NaN)) // vrai
console.log(Object.is(+0, -0)) // false

Object.assign() : Copie les valeurs de toutes les propriétés énumérables d'un ou plusieurs objets source vers l'objet cible et renvoie l'objet cible,

exemple Le code est le suivant :

const person = Object.assign({}, { name : 'One Bowl Zhou' }, { age: 18 })
console.log(person) // { name: 'One Bowl Zhou', age: 18 }

• Object.getPrototypeOf() : Obtenir l'objet prototype
• Object.setPrototypeOf() : Définir l'objet prototype .

Les classes

mettent en avant le concept de classes dans ES2015, et les classes sont disponibles au niveau de la syntaxe. L'exemple de code est le suivant :

class Person {.
  constructeur (âge) {
    //Attribut this.myName = 'Un bol de semaines'
    this.age = âge
  }
  // Méthode statique static print() {
    console.log()
  }
  //L'accesseur récupère monNom() {
    console.log('getter')
    retourner 'un bol de semaines'
  }
  définir monNom(v) {
    console.log('setter' + v)
  }
  setName(v) {
    ceci.monNom = v
  }
}
const personne = nouvelle personne (18)
person.setName('ywanzhou') // Déclenchez l'accesseur setter console.log(person.myName) // Déclenchez l'accesseur getter

Modularity

a proposé la spécification de modularisation ESModel dans ES2015, qui est la première spécification de modularisation de niveau officielle, dans ce document. spécification, nous sommes autorisés à utiliser export pour exporter des modules et import pour introduire des modules.

L'exemple de code est le suivant :

import a from 'm' // Importez l'export par défaut dans le module m et nommez-le a.
import a, { b } from 'm' // Importe l'exportation par défaut dans le module m et importe séparément le membre b
import * as A from 'm' // Importer tous les membres du module import 'm' // Exécuter m module export const b = 1 // Exporter séparément export default b // Export par défaut export { b } // Exporter à la demande export { b as bb } // Renommer et exporter export { b } from 'm' // Importer le membre b dans le module m et exporter

l'affectation de déstructuration

ES2015 a ajouté une nouvelle syntaxe pour l'affectation de déstructuration, qui nous permet d'utiliser certains modèles dans. tableaux. Ou extrayez la valeur spécifiée de l'objet.

L'exemple de code est le suivant :

// Affectation de déstructuration du tableau let [nom, âge, passe-temps = 'coding' /* Valeur par défaut de l'affectation de structure */] = ['A Bowl de Zhou', 18]
// Echangez les valeurs​​des deux variables soit a = 1
soit b = 2
;[une, ​​b] = [b, une]
console.log(a, b) // 2 1

// Affectation de la structure de l'objet let { nom : ObjName /* Affectation de déstructuration renommer*/, sexe } = { nom : 'Un bol de semaines', sexe : 1 }

// Affectation déstructurante des paramètres de fonction function bar({ name, age }) {
  retourner le nom + l'âge
}
bar({ nom : 'Un bol de semaines', âge : 18 }) // Un bol de semaines 18

Symbol

Symbol est un nouveau type de données dans ES2015. Il est créé via Symbol() et peut transmettre une chaîne sous forme de chaîne. Paramètre Utilisé pour décrire le symbole ;

les valeurs de symbole créées via la méthode Symbol() sont toutes uniques. L'exemple de code est le suivant :

/**.
 * Syntaxe * Symbole([description])
 * * description -> est une information de description facultative */
//Créer une valeur de type Symbol const mySymbol = Symbol()
console.log(monSymbole) // Symbole()

const monNom = Symbole('Un bol de semaines')
console.log(typeof myName) // symbol

Symbol possède également une série de propriétés et de méthodes qui ne seront pas présentées ici.

Promise

Promise est une solution asynchrone fournie dans ES2015, qui résout le problème de l'enfer des rappels.

Un objet promise peut être créé via Promise() . Chaque objet Promise a les états suivants :

• en attente : état initial, ni état de réussite ni d'échec.
• résolu : signifie que l'opération s'est terminée avec succès.
• rejeté : signifie que l'opération a échoué.

Il n'y a que deux types de changement d'état, à savoir :

• ending→resolved
• ending→resolved

. Une fois l'état modifié, il ne changera plus.

Il existe une méthode then dans l'instance Promise , nous permettant d'enchaîner les appels dans l'instance Promise . then la méthode a également une instance Promise qui sera renvoyée,

comme le montre la figure ci-dessous :

L'exemple de code est le suivant :

new Promise((resolve, rejet) => {
    console.log('Je suis le journal de la première promesse')
    résoudre()
})
    .puis(() => {
        console.log('Je suis le journal en premier alors')
    })
    .puis(() => {
        console.log('Je suis le log dans la seconde alors, mais j'ai une exception')
        lancer une nouvelle erreur('Erreur')
    })
    .puis(() => {
        console.log('Je suis le journal du premier rappel dans le troisième donc, mais je ne l'exécuterai pas car une exception s'est produite au-dessus de moi')
    }, () => {
        console.log('Je suis le journal du deuxième rappel du troisième puis je l'ai exécuté')
    })
    .puis(() => {
        console.log('Je suis le log du quatrième alors, je peux exécuter normalement')
    })

/* Le résultat de l'exécution est le suivant : Je suis le log de la première Promesse
Je suis le journal en premier alors
Je suis le journal du deuxième alors, mais j'ai eu une exception. Je suis le journal du deuxième rappel dans le troisième puis je l'ai exécuté. Je suis le journal du quatrième alors je peux l'exécuter normalement*/

Related Some. Les méthodes de Promise sont les suivantes :

• Promise.prototype.then() : Elle nécessite au plus deux paramètres : la fonction de rappel du succès et de l'échec de Promise.prototype.catch
• Promise.prototype.catch() : égale au deuxième paramètre de la méthode then
• Promise.all() : regroupe plusieurs instances dans une nouvelle instance, renvoie le tableau de résultats après tous les changements d'état de l'instance (modifie toutes les modifications, puis renvoie)
• Promise.race() : regroupe plusieurs instances dans une nouvelle instance, renvoie l'état de tous les instances. résultat modifié (changer d'abord et revenir en premier)
• Promise.resolve() : Convertir l'objet en un objet Promise (équivalent à new Promise(resolve => resolve()) )
• Promise.reject() : Convertir l'objet en un état rejected Objet Promise (équivalent à new Promise((resolve, reject) => reject()) )

Iterator

Iterator est un itérateur C'est une interface qui fournit un mécanisme d'accès unifié à diverses structures de données, en d'autres termes, tant que n'importe quelle donnée. La structure déploie l'interface d'itération, elle peut être parcourue de manière unifiée.

La structure de données qui implémente l'interface itérable s'implémente généralement elle-même ou hérite de l'attribut Symbol.iterator , et c'est un objet itérable. La propriété Symbol.iterator elle-même est une fonction, qui est la fonction de génération d'itérateur par défaut de la structure de données actuelle.

Un objet qui contient la méthode next() peut être appelé un objet itérable. L'objet next() renverra un objet contenant deux valeurs,

comme indiqué ci-dessous :

• value : toute valeur JavaScript renvoyée par l'itérateur. Peut être omis lorsque done est true .
• done : Une valeur booléenne Lorsqu'elle est false , cela signifie que l'itération ne s'est pas arrêtée. Lorsqu'elle est true , elle arrête immédiatement l'itérateur et la valeur de value peut être omise.

L'interface itérateur fournie nativement par JavaScript est présentée dans la figure ci-dessous :

Maintenant nous implémentons un itérateur pour obj, le code est le suivant :

const obj = {
    [Symbole.iterator] () {
        retour {
            suivant () {
                console.log('Itérateur exécuté');
                retour {
                    valeur: '',
                    done: true // Indique si c'est fini, true signifie que c'est fini}
            }
        }
    }
}

Nous avons ajouté une impression dans la méthode next() . Afin de vérifier que l'itérateur a été exécuté, le résultat final de l'exécution est que

l'

Generator

est une solution de programmation asynchrone fournie dans ES2015. le mot-clé function Utilisez un astérisque * entre le nom de la fonction et le nom de la fonction, et utilisez le mot-clé yield à l'intérieur de la fonction pour définir différents états.

L'exemple de code est le suivant :

function* testGenerator() {
  // le rendement définit un rendement d'état 'un bol de semaines'
  produire de « nouvelles fonctionnalités »
  return 'generator' // Terminer le générateur, même s'il y a un mot-clé rendement plus tard, il ne sera pas valide}
const g = testGenerator() // Renvoie l'objet Generator et déplace l'état via la méthode next() g.next()
/* { valeur : 'Un bol de Zhou', done : false } */

g.suivant()
/* { valeur : 'es nouvelles fonctionnalités', done : false } */

g.suivant()
/* { value: 'generator', done: true } */

Proxy et Reffect

Proxy sont utilisés pour créer un objet proxy pour implémenter l'interception et la personnalisation des opérations de base. Il existe 13 opérations de base, comme indiqué dans le tableau suivant :

Vue3 est écrit sur la base de Proxy . Le code suivant montre l'utilisation des objets Proxy :

<!DOCTYPE html>.
<html lang="fr">
<tête>
  <meta charset="UTF-8" />
  <méta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="nofollow externe" rel="stylesheet" />
  <title>Mettre à jour automatiquement dom via set</title>
</tête>

<corps>
  <p class="card" style="width : 300px; margin : 100px auto">
    <p class="card-body">
      <h1 id="nom"></h1>
      <button id="btn" class="btn btn-primary">Modifier</button>
    </p>
  </p>
  <script>
    // Récupère le nom const du nœud DOM = document.getElementById('name')
    const btn = document.getElementById('btn')
    //Définir une fonction qui modifie la valeur const updateDOM = (el, value) => {
      el.innerHTML = valeur
    }
    const personne = nouveau proxy ({
      nom : 'Un bol de porridge',
    }, {
      set (cible, propKey, valeur) {
        //Si la valeur à l'intérieur change, appelez notre updateDOM
        updateDOM(nom, valeur)
        cible[propKey] = valeur
        retourner vrai
      },
    })
    nom.innerHTML = personne.nom
    // Cliquez sur le bouton pour déclencher l'opération de modification btn.addEventListener('click', () => {
      person.name === 'Un bol de Zhou' ?
        (person.name = 'Un bol de porridge') :
        (person.name = 'Un bol Zhou')
    })
  </script>
</corps>
</html>

Le code ci-dessus utilise la méthode set pour la liaison des données. Si l'objet change, notre DOM sera automatiquement mis à jour.

Reflect est un objet fourni par ECMAScript2015. Il fournit des méthodes statiques pour intercepter les opérations JavaScript. Ces méthodes sont cohérentes avec les méthodes des handlers de Proxy.

Reflect n'est pas un constructeur, ce qui signifie qu'il ne peut pas être instancié.

Chaque opération d'interception dans l'objet Proxy (par exemple : get , delete , etc.) appelle en interne la méthode Reflect en conséquence. Les méthodes statiques qu'il fournit sont cohérentes avec les noms de méthodes dans handlers de Proxy,

comme suit :

Set, Map, WeakSet, WeakMap

Set , Map , WeakSet et WeakMap sont plusieurs nouveaux objets dans ES2015 :

• Set et WeakSet sont similaires aux tableaux. Pour être précis, ce sont des ensembles. La différence entre les deux est que Set peut stocker n'importe quel type de données, tandis que WeakSet ne peut stocker que des références à des objets, et ce sont des références faibles

; Définir des objets dans le développement réel consiste à implémenter la déduplication des données. L'exemple de code est le suivant :

const arr = [1, 2, 2, 3, 4 , 3, 5]
const ensemble = nouvel ensemble (arr)
// L'objet set peut être utilisé... pour développer tous les éléments console.log([...set]) // [ 1, 2, 3, 4, 5 ]

• Map et WeakMap sont similaires aux objets et sont stockés dans la forme de paires clé-valeur Oui, la différence entre les deux est que les paires clé-valeur de Map peuvent être arbitraires, tandis que les clés de WeakMap doivent être des références à des objets et les valeurs peuvent être de n'importe quel type.

ES2016 (ES7)

ES2016 propose relativement peu de nouvelles fonctionnalités, principalement deux nouvelles fonctionnalités, comme le montre la figure ci-dessous :

L'opérateur exposant

ES2016 a un nouvel exposant ** , également appelé opérateur puissance, qui a la même fonction que Math.pow().

L'exemple de code est le suivant :

console.log(2 ** 10 === Math.pow). (2, 10 )) // true

La méthode Array.prototype.includes()

ajoute la méthode includes() au prototype de tableau dans ES2016. Cette méthode est utilisée pour déterminer si un tableau contient une valeur spécifiée et renvoie une valeur booléenne

. l'exemple de code est le suivant :

const arr = [1, 2, 3, 4, 5, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true

Il convient de noter que NaN et NaN , +0 et -0 sont égaux lors de l'utilisation includes() .

ES2017(ES8)

sucre de syntaxe asynchrone/attente

Promise résout le problème de l'enfer des rappels, s'il y a trop d'appels en chaîne, la lisibilité deviendra encore pire. Le nouveau sucre de syntaxe asynchrone/attente dans ES2017 résout ce problème.

La promesse s'écrit comme suit :

;(function () {
  fonction promesse(v) {
    renvoyer une nouvelle promesse ((résoudre, rejeter) => {
      résoudre (v)
    })
  }
  const p = promesse (1)
  p.then(res => {
    promesse de retour (res)
  }).then(res => {
    console.log(res)
  })
})()

Si la prochaine promesse dépend de la précédente, cette chaîne d'appels sera très longue. Maintenant, réécrivons-la en utilisant le sucre syntaxique async/await :

;(async function () {.
  fonction promesse(v) {
    renvoyer une nouvelle promesse ((résoudre, rejeter) => {
      résoudre (v)
    })
  }
  const r1 = attendre la promesse (1)
  const r2 = attendre la promesse (r1)
  const res = attendre la promesse (r2)
  console.log(res)
})()

Comme vous pouvez le voir, nous pouvons utiliser le sucre syntaxique async/wait pour réécrire Promise dans une méthode d'écriture plate.

Objet Atomics

ES2017 ajoute un nouvel objet Atomics. Cet objet fournit une série de méthodes statiques pour faire fonctionner les objets SharedArrayBuffer et ArrayBuffer. Cet objet ne peut pas être instancié à l'aide du mot-clé new . Il fournit uniquement certaines propriétés statiques et

extensions d'objet

. étendu pour Object dans ES2017, comme suit :

• Object.values() : renvoie un tableau de toutes les valeurs de propriété énumérables d'un objet donné lui-même ;
• Object.entries() : renvoie un tableau de toutes les valeurs de propriété énumérables d'un objet donné ; objet lui-même. Un tableau de paires clé-valeur pour les propriétés énumérées ;
• Object.getOwnPropertyDescriptors() : renvoie les descripteurs de propriétés de toutes les propriétés propres d'un objet donné.

L'expansion des fonctions

dans ES2017 nous permet d'ajouter une virgule à la fin de la liste des paramètres de fonction. Cette petite fonctionnalité est très utile, car une seule ligne de code doit être modifiée lors de la mise à jour de la virgule de fin. Si la virgule de fin n'est pas applicable, deux lignes de code doivent être modifiées.

L'exemple de code est le suivant :

function fun(
  aaaa,
  bbbbb,
  ccccc,
) {}

S'il y a une virgule à la fin, il vous suffit d'ajouter une ligne à la fin ; si elle n'existe pas, vous devez ajouter la virgule à la fin, puis ajouter une ligne. Cela change deux lignes dans la gestion des versions, pas une.

L'expansion des chaînes

ajoute deux nouvelles méthodes d'instance pour les chaînes dans ES2017, à savoir :

• padStart() : remplit les espaces au début de la chaîne ;
• padEnd() : remplit les espaces à la fin de la chaîne ;

l'exemple de code est le suivant :

const str ; = 'Un bol de Zhou'
console.log(str.padStart(10)) /* Un bol de Zhou*/
console.log(str.padEnd(10)) /* Yiwan Zhou*/

ES2018(ES9)

L'itération asynchrone

a une nouvelle instruction for await...of dans ES2018, qui peut être utilisée pour parcourir des objets itérables asynchrones.

L'exemple de code est le suivant :

var asyncIterable = {.
  [Symbol.asyncIterator]() {
    retour {
      je: 0,
      suivant() {
        si (this.i < 3) {
          return Promise.resolve({ valeur : this.i++, done : false })
        }

        return Promise.resolve({ done: true })
      },
    }
  },
}
;(fonction asynchrone () {
  pour wait (nombre d'asyncIterable) {
    console.log(num)
  }
})()

// 0
// 1
// 2

Extensions d'expressions régulières

Dans ES2018, les extensions suivantes sont apportées aux expressions régulières :

Dénomination des groupes d'expressions régulières :

Avant ES2018, nous ne pouvions pas nommer les groupes dans les expressions régulières. Cette fonctionnalité a été introduite dans ES2018. Elle facilite non seulement la lecture régulière et. référence,

l'exemple de code est le suivant :

const RE_DATE = /(?<year>d{4})-(?<month>d{2})-(?<day>d {2})/

const matchObj = RE_DATE.exec('2022-02-22')
année const = matchObj.groups.year // 2022
const mois = matchObj.groups.month // 02
const day = matchObj.groups.day // 22

s modificateur/dotALl mode : le nouveau modificateur s permet d'utiliser . Correspond à n'importe quel caractère unique, et l'attribut **** indique s'il faut utiliser la modification " s " ensemble dans le symbole d'expression régulière. .

Assertions inversées : seules les assertions directes existaient avant ES2018, tandis que les assertions inverses et les assertions négatives inverses ont été ajoutées dans ES2018.

Opérateur de propagation d'objet

Un nouvel opérateur de propagation de tableau a été ajouté dans ES2015. Dans ES2018, cette fonctionnalité a été ajoutée à l'objet. L'exemple de code est le suivant :

const n = { name : 'One Bowl of Zhou' }.
const a = { âge : 18 }
const personne = { ...n, ...a }
// Fusionner l'objet console.log(person) // { nom : 'Un bol de Zhou', âge : 18 }

Promise.prototype.finally()

finally() renverra un objet Promise lorsque l'état de la promesse. change, que ce soit s'il est rejected ou fulfilled , finally() sera exécuté.

L'exemple de code est le suivant :

fetch(url)
  .then(res => {
    console.log(res)
  })
  .catch(erreur => {
    console.log (erreur)
  })
  .finalement(() => {
    console.log('fin')
  })

ES2019(ES10)

L'optimisation

a optimisé les deux contenus suivants dans ES2019 :

• Function.prototype.toString() : le corps de la fonction renvoyé contient des commentaires et des espaces ;
• try...catch : catch dans l'instruction n'autorise aucun paramètre. L'exemple de code est le suivant :

try. {
  console.log('Un bol de semaines')
} attraper {
  console.error('Un bol de semaines')
}

trimStart()/trimLeft() et trimEnd()/trimRight()

• String.prototype.trimStart : utilisé pour supprimer les espaces sur le côté gauche de la chaîne ;
• String.prototype.trimLeft : c'est un alias de trimStart
• String.prototype.trimEnd : utilisé Supprimez les espaces sur le côté droit de la chaîne ;
• String.prototype.trimRight : trimEnd

une extension du tableau d'alias

. Deux méthodes de tableau sont étendues dans ES2019, à savoir :

• Array.prototype.flat() : Ceci. La méthode suivra une traversée profondément récursive spécifiable du tableau et fusionnera tous les éléments avec les éléments du sous-tableau traversé dans un nouveau tableau et le renverra en termes simples, il s'agit d'obtenir l'aplatissement du tableau.

constarr = [0, 1, 2, [3, 4]]
console.log(arr.flat()) // [ 0, 1, 2, 3, 4 ]

• Array.prototype.flatMap() : Cette méthode mappe et aplatit le tableau et renvoie un nouveau tableau (un seul niveau de tableau peut être élargi).

Object.fromEntries()

La nouvelle méthode Object.fromEntries() dans ES2019 convertit une liste de paires clé-valeur en un objet. Il s'agit de l'opération inverse de Object.entries() .

L'exemple de code est le suivant :

const person. = {
  nom : 'Un bol de Zhou',
  âge : '18',
}
const e = Objet.entrées (personne)

const p = Objet.fromEntries(e)
console.log(p) // { nom : 'Un bol de semaines', âge : '18' }

Symbol.prototype.descrption

description une propriété en lecture seule qui renvoie la chaîne de description facultative lors de la création de l'objet Symbol .

ES2020(ES11)

La modularisation

ajoute une importation dynamique dans ES2020, ce qui signifie que le module sera chargé lorsque nous en aurons besoin. Cela peut réduire la surcharge et le temps de chargement des pages. L'exemple de code est le suivant :

import('/modules/my-module.js'). alors(module => {
  // Faire quelque chose avec le module.
})

L'importation dynamique utilise import() , qui renvoie une promesse.

Dans ES2020, un meta objet est également ajouté à import , qui expose un objet d'attributs de métadonnées spécifiques au contexte au module JavaScript.

du type de données BigInt

BigInt résout le problème selon lequel le nombre maximum autorisé en JavaScript est 2**53-1 . BigInt peut représenter n'importe quel grand entier.

const theBiggestInt = 9007199254740991n;
const aussiHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n
const hugeString = BigInt("9007199254740991");
// ↪ 9007199254740991n
const hugeHex = BigInt("0x1fffffffffffff");
// ↪ 9007199254740991n
const hugeBin = BigInt("0b1111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

globalThis objet

globalThis a été introduit dans ES2020, qui est l'introduction des objets globaux dans Global et l'environnement du navigateur est Window . Le code suivant montre la différence entre GlobalThis :

// avant

var getGlobal = fonction () { 
  if (typeof self !== 'indéfini') { return self } 
  if (typeof window !== 'indéfini') { fenêtre de retour } 
  if (typeof global !== 'indéfini') { return global } 
  throw new Error('impossible de localiser l'objet global'); 
} ; 

var globals = getGlobal(); 

if (typeof globals.setTimeout !== 'function') { 
  // pas de setTimeout dans cet environnement ! 
}

// après if (typeof globalThis.setTimeout !== 'function') {
  // pas de setTimeout dans cet environnement !
}

Opérateur de fusion de valeurs nulles

L'opérateur de fusion de valeurs nulles est représenté par deux points d'interrogation. Cet opérateur est également un opérateur logique, similaire à l'opérateur logique OU. La règle de calcul est que tant que l'opérande de gauche est null ou undefined , l'opérande de droite est renvoyé, sinon l'opérande de gauche est renvoyé. L'opérateur logique OU renvoie l'opérande de droite uniquement si l'opérande de gauche est converti en type boolean et est false .

L'exemple de code est le suivant :

console.log(null ?? 10) // 10
console.log(indéfini ?? 10) // 10
console.log (false ?? 10) // FAUX

utile

pour attribuer des valeurs aux variables sans valeurs.

Le code est le suivant:

valeur var

// Si la valeur de la valeur n'est pas nulle ou non définie, attribuez-lui une valeur de 10
valeur = valeur ??
Console.log (valeur) // 10it

vaut la peine de noter () l'opérateur de fusion de valeur nulle et logique et logique ou ne peut pas être utilisé en même temps, sinon une exception sera lancée.

Opérateur de chaîne facultatif

L'opérateur de chaîne en option est utilisé pour lire la valeur d'un attribut dans la chaîne d'un objet. Attribut Aab , nous devons d'abord Aab assurer Aa A existe.

L'utilisation undefind l'opérateur de chaîne en option ne provoquera pas un tel problème.

var a = {}

// Console.log (AAB) // Error Console.log (aa? .B) // L'opérateur de chaîne facultatif indéfini

peut

également être utilisé pour appeler des méthodes sous des objets.

// Si la méthode obj.fun () existe, elle sera appelée directement ci-dessous.
obj.fun?.a ()

promesse.allsetTled ()

Promise.allSettled() renvoie une promesse après toutes les promesses données ont été résolues ou rejetées, avec un tableau d'objets, chaque objet représentant la promesse correspondante.

ES2021 (ES12)

String.prototype.replaceAll ()

(

replaceAll() renvoie une nouvelle chaîne.

const newrtr = str.replaceALL («Porridge», «semaine»)

(

NewsTr) // Un bol de

_

.

WeakRef

1000000

la

facilité de lecture

.

La référence à un autre objet.

Promesse.any ()

la nouvelle Promise.any() dans ES2021 accepte les mêmes paramètres que Promise.any() promise.all() (c'est-à-dire que toutes les promesses échouent / rejeter), une promesse ratée et une instance de type d'agrégaterror sont renvoyées.

Opérateurs d'attribution logique

Certains opérateurs d'affectation ont été ajoutés dans ES2021, comme suit:

• &&=
• ||=
• ??=

en

fait, il est cohérent avec les opérateurs d'attribution ordinaires.

] = [true, false]
f1 && = 'un bol de semaines' // équivalent à str = str && «Un bol de semaines»
f2 || = «Un bol de semaines» // équivalent à Str = Str || «Un bol de semaines»
f3 ?? = 'un bol de semaines' // équivalent à str = str

?

L'extension de la classe

définir

les membres de la classe sans les définir dans constructor dans ES2022.

  myname = 'un bol de zhou'
}
/ * Les deux sont cohérents * /
classe C {
  constructeur() {
    myname = 'un bol de zhou'
  }
}

Si un membre est déclaré sans initialisation, sa valeur par défaut n'est pas définie.

utiliser

nommées

en commençant par # comme membres privés de la classe.

  #myname = 'One Bowl Week'
}
const c = new C ()
Console.log (#MyName) // Field privé '#myName' doit être déclaré dans une classe entourée,

l'attente est utilisée au niveau supérieur

await

niveau

supérieur sans utiliser la fonction async .

Awaitasyncfun ()
console.log (123)

objet.hasown ()

méthode

Object.hasOwn() est utilisée pour déterminer si un objet a un certain attribut.

  Nom: «Un bol de Zhou»,
  âge : 18 ans,
}
console.log (object.hasown (personne, 'name')) // true
console.log (object.hasown (personne, «sexe»)) // false

array.prototype.at ()

La nouvelle méthode at() dans ES2022, sa fonction est d'obtenir un membre du tableau et ses paramètres est l'index du tableau

. 6]
console.log (arr.at (-1)) // 6
// Équivalent à arr [Arr.Length - 1]

D

Expression régulière du exec() Ajoute un modificateur A /d /d Attribut utilisé pour indiquer la valeur d'index de démarrage du résultat correspondant dans la chaîne d'origine.

L'exemple de code est le suivant:

const str = 'javascript'
const r = / a / d

const m = r.exec (str)
Console.log (M.Indices [0]) // [1, 2]

est écrit à la fin

.

La carte mentale est la suivante: