Une explication rapide et détaillée de toutes les fonctionnalités de ES6 ~ ES12 dans un seul article !

Auteur：Eve Cole Date de mise à jour：2022-07-25 13:51:38

Cet article va trier et partager avec vous les fonctionnalités d'ECMAScript. Il vous faudra une heure pour comprendre rapidement toutes les fonctionnalités d'ES6 ~ ES12. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

En tant qu'enfant qui aime taper du code à la main, je pense que le code devrait être tapé par moi-même afin de mieux le mémoriser par cœur, je vais donc aujourd'hui vous présenter les fonctionnalités de ES6 ~ ES12. Si vous avez des angles morts dans l'utilisation d'ES, ou si vous ne connaissez pas grand-chose des nouvelles fonctionnalités , je pense que cet article devrait très bien vous aider ~

Afin de mieux comprendre, nous allons l'expliquer en mode cas , donc afin d'avoir une meilleure compréhension, et en même temps, le boîtier prend également en charge le débogage en mode développeur, j'espère que vous pourrez le prendre en charge ~

ECMAScript

ECMAScript est un langage de programmation de script standardisé par Ecma International (anciennement l'Association européenne des fabricants d'ordinateurs) via ECMA -262 . On peut aussi dire qu'il n'existe que deux versions de JavaScript comme standard

dans le monde des programmeurs : ES5 et ES6 . On dit que ES6 est en fait sorti en 2015, qui est aussi l'époque où la grande ère du front-end est officiellement entrée. a commencé. C'est-à-dire que 2015 est utilisée comme année Boundary, avant 2015, elle s'appelait ES5 et après 2016, elle est collectivement appelée ES6

Pour plus d'informations sur les fonctionnalités ES6 , vous pouvez lire "Introduction aux normes ES6" par. Enseignant Ruan Yifeng.Déclaration

ES6

let & const

La différence entre let, const et var :

Les variables déclarées par var existent Promotion de variable

,

tandis que let et const n'ont pas de problème de promotion de variable. Promotion de variable : indique si une variable peut être appelée avant que
var ne soit déclarée. Il n'y a pas de portée au niveau du bloc, let et const ont une portée au niveau du bloc.
Var peut déclarer des variables à plusieurs reprises, let et const ne sont pas autorisés à être déclarés à plusieurs reprises dans une portée. , et const déclare une variable en lecture seule et doit se voir attribuer une valeur.

De plus, lorsqu'un objet est déclaré avec const , les propriétés de l'objet peuvent être modifiées, car : obj déclaré par const enregistre uniquement l'adresse de référence de son. Objet. Tant que l'adresse reste inchangée, il n'y aura pas d'erreur

de déstructuration.

La déstructuration du

tableau d'affectation

peut
extraire les valeurs du tableau dans l'ordre, et attribuer des valeurs aux variables en fonction des positions correspondantes. La méthode appartient à la correspondance de modèles et
peut être déconstruite en utilisant ... pour représenter tous les autres
Si le tableau original ne l'a pas, la valeur correspondante peut être Définir la valeur par défaut, si elle n'est pas définie, elle sera undefined

let [ une, b, c] = [1, 2, 3]
 console.log(a, b, c) // 1 2 3
 
 soit [a, , c] = [1, 2, 3]
 console.log(a, , c) // 1 3
 
 soit [a, b, ...c] = [1, 2, 3, 4, 5]
 console.log(a, b, c) // 1 2 [3, 4, 5]
 
 soit [a, b, ...c] = [1]
 console.log(a, b, c) // 1 non défini []
 
 soit [a = 1, b = a] = []
 const.log(a, b) // 1 1
 
 soit [a = 1, b = a] = [2]
 const.log(a, b) // 2 2

La structure de l'objet

n'est pas ordonnée. Il suffit que la variable et le nom de l'attribut aient le même nom
si les noms d'attribut de la variable et de l'objet ne sont pas répétés
, la valeur de la variable sera undefined
Remarque : , autres Équivalent à l'alias

let { a, b } = { a: 1, b: 2 };
 console.log(a, b); // 1 2
 
 soit { une } = { b : 2 } ;
 console.log(a); // non défini
 
 soit { une, b = 2 } = { une : 1 } ;
 console.log(a, b); // 1 2
 
 soit { une : b = 2 } = { une : 1 } ;
 console.log(a); // La variable a n'existe pas console.log(b); // 1

Déstructuration des chaînes

Les chaînes peuvent également être déconstruites, ce qui équivaut à les convertir en objets de type tableau
avec un attribut length . , représentant le nombre

let [a, b, c, d, e] = "bonjour"
 console.log(a, b, c, d, e) // bonjour
 
 let { longueur } = "bonjour"
 console.log(length) // 5

Déstructuration des nombres et des valeurs booléennes

Tant que l'objet ou le tableau n'est pas mort, il sera d'abord converti en objet, donc les types numériques et les types booléens sont également convertis en objets

let { toString : s } = 123 ;
 console.log(s === Number.prototype.toString) // vrai
 
 let { toString : s } = true ;
 console.log(s === Boolean.prototype.toString) // véritable

déconstruction des

de
la fonction, ou leur valeur par défaut peut être
déclenchée.
deux méthodes pour spécifier la valeur par défaut. L'une est One consiste à spécifier des variables, l'autre consiste à spécifier des paramètres, et vous obtiendrez des réponses différentes :

let arr = [[1,2], [3, 4]]
 soit res = arr.map([a, b] => a + b)
 console.log(res) // [3, 7]
 
 soit arr = [1, non défini, 2]
 let res = arr.map((a = 'test') => a);
 console.log(res) // [1, 'test', 2]
 
 let func = ({x, y} = {x : 0, y : 0}) => {
    retour[x, y]
 }
 console.log(func(1, 2)) // [non défini, non défini]
 console.log(func()) // [0, 0]
 console.log(func({})) // [non défini, non défini]
 console.log(func({x: 1})) // [1, non défini]
 
 
 soit func = ({x=0, y=0}) => {
    retour[x, y]
 }
 
 console.log(func({x:1,y:2})) // [1, 2]
 console.log(func()) // erreur
 console.log(func({})) // [0, 0]
  console.log(func({x: 1})) // [1, 0]

La régularité

de l'expansion régulière

est en fait un point de connaissance très difficile à comprendre si quelqu'un peut le maîtriser pleinement, c'est vraiment très puissant. ici Tout d'abord,

il est divisé en deux styles : JS分格et perl 分格

: RegExp()

let re = new RegExp('a');
 let re = new RegExp('a', 'i'); //Le premier est l'objet de recherche, le second est l'option

perl style: / règle/option, et peut être suivi de plusieurs, quel que soit l'ordre

let re = /a/; //Trouver s'il y a un dans une chaîne
 let re = /a/i;//Le premier est l'objet à rechercher, le second est l'option.

Nous introduisons ici un test en ligne d'expression régulière (avec des expressions régulières courantes) :

Extension de chaîne

de test en ligne régulière

Unicode :大括号包含les caractères Unicode
codePointAt() : renvoie le point de code correspondant au caractère, correspondant à fromCharCode()
String.fromCharCode() : renvoie le point de code correspondant sous forme de caractère, correspond à codePointAt()
String.raw() : renvoie le caractère Le résultat du remplacement de toutes les variables de la chaîne et de l'échappement des barres obliques
startWith() : renvoie une valeur booléenne indiquant si la chaîne de paramètres est en tête de la chaîne d'origine.
endWith() : renvoie une valeur booléenne indiquant si la chaîne de paramètre est à la fin de la chaîne d'origine.
repeat() : La méthode renvoie une nouvelle chaîne, ce qui signifie répéter la chaîne d'origine n fois
: for-of
include() : renvoie une valeur booléenne, indiquant si la chaîne paramètre est trouvée.
trimStart() : La méthode supprime les espaces au début d’une chaîne. trimLeft() est un alias pour cette méthode.
trimEnd() : La méthode supprime les caractères d’espacement à la fin d’une chaîne. trimRight() est un alias pour cette méthode.

//Unicode
 console.log("a", "u0061"); // aa
 console.log("d", "u{4E25}"); // d strictement let str = 'Domesy'
 
 //codePointAt()
 console.log(str.codePointAt(0)) // 68
 
 //String.fromCharCode()
 console.log(String.fromCharCode(68)) // D
 
 //String.raw()
 console.log(String.raw`Bonjourn${1 + 2}`); // Salutn3
 console.log(`Bonjourn${1 + 2}`); // Salut 3
 
 let str = 'Domesy'
 
 //commenceAvec()
 console.log(str.startsWith("D")) // vrai
 console.log(str.startsWith("s")) // faux

 // se termine par ()
 console.log(str.endsWith("y")) // vrai
 console.log(str.endsWith("s")) // faux
 
 //repeat() : Le paramètre passé sera automatiquement arrondi au chiffre supérieur. S'il s'agit d'une chaîne, il sera converti en nombre console.log(str.repeat(2)) // DomesyDomesy.
 console.log(str.repeat(2.9)) // DomesyDomesy
 
 // Traversée : pour-de
  pour(laissez le code de str){
    console.log(code) // Retourne Domesy une fois
  }
  
  //inclut()
  console.log(str.includes("s")) // vrai
  console.log(str.includes("a")) // faux
  
  // trimDébut()
  const string = " Bonjour tout le monde ! ";
  console.log(string.trimStart()); // "Bonjour tout le monde !"
  console.log(string.trimLeft()); // "Bonjour tout le monde !"
  
  // trimFin()
  const string = " Bonjour tout le monde ! ";
  console.log(string.trimEnd()); // "Bonjour tout le monde !"
  console.log(string.trimRight()); // "Bonjour tout le monde !"

D'autres

modèles de chaînes peuvent être insérés sur une seule ligne ou sur plusieurs lignes, utilisez `

let str = `Dome
    sy'
 console.log(str) //Encapsulera automatiquement les lignes//Dôme
 //

modèle d'étiquette sy :

const str = {
     nom : 'Petit Dudu',
     info : 'Bonjour à tous'
 }

console.log(`${str.info}, je suis `${str.name}`) // Bonjour à tous, je suis Xiao Dudu

Array extension

Array.of() : Convertir un ensemble de valeurs en tableau et renvoie un nouveau tableau, quel que soit le nombre ou le type d'arguments.
copyWithin() : Copie les membres à la position spécifiée vers d'autres positions et renvoie le tableau original
find() : Renvoie la première valeur qualifiée
findIndex() : Renvoie le premier index qualifié
keys() : Traverse les noms de clés, renvoie un objet traverseur , qui peut être utilisé dans une boucle for-of .
clés() : le même usage que keys(), mais il traverse la valeur-clé
.
paires.
Array.from() : Crée une nouvelle instance de tableau à partir d'un objet de type tableau ou itérable.
fill() : remplit le tableau avec les éléments spécifiés et renvoie le tableau d'origine .
include() : détermine si un certain élément est inclus et renvoie une valeur booléenne. Il est également valable pour NaN, mais ne peut pas être positionné

let arr = [

1, 2, 3, 4, 5]

 //Array.of()
 soit arr1 = Array.of(1, 2, 3);
 console.log(arr1) // [1, 2, 3]
 
 //copyWithin() : trois paramètres (target, start = 0, end = this.length)
 // target : la position de la cible // start : la position de départ, qui peut être omise et peut être un nombre négatif.
 // end : position de fin, peut être omise, peut être un nombre négatif, la position réelle est end-1.
 console.log(arr.copyWithin(0, 3, 5)) // [4, 5, 3, 4, 5]
 
 //trouver()
 console.log(arr.find((item) => item > 3 )) // 4
 
 //trouverIndex()
 console.log(arr.findIndex((élément) => élément > 3 )) // 3
 
 //clés()
 for (laisser l'index de arr.keys()) {
     console.log(index); // Renvoie 0 1 2 3 4 à la fois
 }
 
 // valeurs()
 for (laisser l'index de arr.values()) {
     console.log(index); // Renvoie 1 2 3 4 5 à la fois
 }
 
 // entrées()
 for (laisser l'index de arr.entries()) {
     console.log(index); // Renvoie [0, 1] [1, 2] [2, 3] [3, 4] [4, 5] une fois
 }
 
  soit arr = [1, 2, 3, 4, 5]
 
 // Array.from() : Le parcours peut être un pseudo-tableau, tel que String, Set structure, Node node let arr1 = Array.from([1, 3, 5], (item) => {
     retourner l'article * 2 ;
 })
 console.log(arr1) // [2, 6, 10] 
 
 // fill() : trois paramètres (target, start = 0, end = this.length)
 // target : la position de la cible // start : la position de départ, qui peut être omise et peut être un nombre négatif.
 // end : position de fin, peut être omise, peut être un nombre négatif, la position réelle est end-1.
 console.log(arr.fill(7)) // [7, 7, 7, 7, 7]
 console.log(arr.fill(7, 1, 3)) // [1, 7, 7, 4, 5]
 
 soit arr = [1, 2, 3, 4]
 
 //inclut()
 console.log(arr.includes(3)) // vrai
 console.log([1, 2, NaN].includes(NaN)); // true

autres

opérateurs d'expansion :...

// Sa fonction est d'étendre le tableau let arr = [3, 4, 5]
 console.log(...arr) // 3 4 5
 
 soit arr1 = [1, 2, ...arr]
 console.log(...arr1) // 1 2 3 4 5

Extension d'objet

Object.getPrototypeOf() : Renvoie l'objet prototype de l'objet
Object.setPrototypeOf() : Définit l'objet prototype de l'objet
proto : Renvoie ou définit le objet prototype de l'objet
Object .getOwnPropertyNames()
: Renvoie un tableau de clés de propriété non-Symbol de l'objet lui-même . Object.getOwnPropertySymbols() : Renvoie un tableau de clés de propriété non-Symbol de l'objet lui-même
. : Renvoie un tableau de toutes les clés de propriété de l'objet lui-même.
Object.is( ) : Détermine si deux objets sont égaux. Les adresses pointées par les tableaux sont différentes, donc tant qu'il s'agit d'une comparaison de tableau, elle doit être fausse. .
Traversal : for-in
Object.keys() : renvoie le nom de l'attribut
Object.assign() : utilisé pour attribuer tous les énumérables. Copie la valeur de l'attribut d'un ou plusieurs objets source vers l'objet cible et renvoie l'objet cible . cette fois, l'objet cible changera également

//Object.is()
console.log(Object.is('abc', 'abc')) // vrai
console.log(Object.is([], [])) // faux 

//Traverse : pour-in
let obj = { nom : 'Domesy', valeur : 'React' }

pour(laisser la clé dans obj){
    console.log(key); // Renvoie tour à tour la valeur du nom de la valeur de l'attribut.
    console.log(obj[key]); // Renvoie les valeurs d'attribut dans l'ordre Domesy React
}

//Objet.keys()
console.log(Object.keys(obj)) // ['nom', 'valeur']

 //Objet.assign()
 const cible = { a : 1, b : 2 } ;
 source const = { b : 4, c : 5 } ;
 
 résultat const = Objet.assign (cible, source)
 
 console.log(result) // {a : 1, b : 4, c : 5}
 console.log(target) // {a: 1, b: 4, c: 5}

autres

expressions concises

let a = 1;
  soit b = 2;
  soit obj = { une, b }
  console.log(obj) // { a : 1, b : 2 }
  
  laissez la méthode = {
      Bonjour() {
          console.log('bonjour')
      }
  }
  console.log(method.hello()) //

expression d'attribut hello : utiliser directement des variables ou des expressions pour définir la clé de l'objet

let a = "b"
 soit obj = {
     [a] : "c"
 }
 console.log(obj) // {b : "c"}

opérateur d'expansion...

ajoute de nombreuses fonctions supplémentaires dans ES9 , telles que la fusion, l'échappement de chaînes, etc.

// Sa fonction est d'étendre le tableau let { a , b , ...c } = { une : 1, b : 2, c : 3, d : 4} ;
 console.log(c) // {c : 3, d : 4}
 
 soit obj1 = { c : 3 }
 soit obj = { a : 1, b : 2, ...obj1}
 console.log(obj) // { a: 1, b: 2, c: 3}

Binaire

numérique étendu

: commençant par 0b ou 0B , indiquant le binaire
octal : commençant par 00 ou 0O , indiquant le binaire
Number.isFinite() : utilisé pour vérifier si une valeur est limitée, renvoie une valeur booléenne
Number.isNaN() : utilisé pour vérifier si une valeur est NaN, renvoie une valeur booléenne
Number.isInteger() : utilisé pour vérifier si une valeur est un entier, renvoie une valeur booléenne value
Number.isSafeInteger() : Utilisé pour vérifier si une valeur est un "entier sûr", renvoyant une valeur booléenne
Math.cbrt() : Renvoie le cube et
Math.abrt()() : Renvoie le cube et
Math.cbrt( ) : Renvoie le cube et
Math .clz32() : Renvoie la forme entière non signée 32 bits de la valeur.
Math.imul() : Renvoie la multiplication de deux valeurs
Math.fround() : Renvoie la forme simple 32 bits. Forme à virgule flottante de précision de la valeur.
Math.hypot() : Renvoie tout La racine carrée de la somme des carrés des valeurs
Math.expm1() : Renvoie e^n - 1
Math.log1p() : Renvoie le naturel logarithme de 1 + n (Math.log(1 + n))
Math.log10() : Renvoie le logarithme népérien de 1 + n Le logarithme de n en base 2
Math.log2() : Renvoie le logarithme de n en base 2
Math.trunc() : Supprime la partie décimale du nombre, ne laissant que la partie entière
Math.sign() : Renvoie le正数为1 ,负数为-1 ,正零0 ,负零-0 , NaN
Math.abrt() : Renvoie la racine cubique
Math.sinh() : Renvoie le sinus hyperbolique
Math.cosh() : Renvoie le cosinus hyperbolique
Math.tanh() : Renvoie la tangente hyperbolique
Math.asinh() : Renvoie la sinus hyperbolique inverse
Math.acosh() : Renvoie le cosinus hyperbolique inverse
Math.atanh() : Renvoie la tangente hyperbolique inverse
Number.parseInt() : Renvoie l'entier de la valeur Part, cette méthode est équivalente à parseInt
Number.parseFloat() : Renvoie la partie flottante de la valeur, cette méthode est équivalente à parseFloat

//Binary console.log(0b101) // 5
 console.log(0o151) //105
 
 //Nombre.isFinite()
 console.log(Number.isFinite(7)); // vrai
 console.log(Number.isFinite(true)); // faux
 
 //Nombre.isNaN()
 console.log(Number.isNaN(NaN)); // vrai
 console.log(Number.isNaN("true" / 0)); // vrai
 console.log(Number.isNaN(true)); // faux
 
 //Nombre.isInteger()
 console.log(Number.isInteger(17)); // vrai
 console.log(Number.isInteger(17.58)); // faux
 
 //Number.isSafeInteger()
 console.log(Number.isSafeInteger(3)); // vrai
 console.log(Number.isSafeInteger(3.0)); // vrai
 console.log(Number.isSafeInteger("3")); // faux
 console.log(Number.isSafeInteger(3.1)); // faux
 
  //Math.trunc()
 console.log(Math.trunc(13.71)); // 13
 console.log(Math.trunc(0)); // 0
 console.log(Math.trunc(true)); // 1
 console.log(Math.trunc(false)); // 0 
 
 //Math.sign()
 console.log(Math.sign(3)); // 1
 console.log(Math.sign(-3)); // -1
 console.log(Math.sign(0)); // 0
 console.log(Math.sign(-0)); // -0
 console.log(Math.sign(NaN)); // NaN
 console.log(Math.sign(true)); // 1
 console.log(Math.sign(false)); // 0
 
 //Math.abrt()
 console.log(Math.cbrt(8)); // 2
 
  //Nombre.parseInt()
 console.log(Number.parseInt("6.71")); // 6
 console.log(parseInt("6.71")); // 6
 
 //Nombre.parseFloat()
 console.log(Number.parseFloat("6.71@")); // 6.71
 console.log(parseFloat("6.71@")); // 6.71

Virgule de fin du paramètre de fonction : permet au dernier paramètre de la fonction d'avoir
une virgule de fin. Le paramètre se voit attribuer une valeur spécifique

//Le paramètre se voit attribuer une valeur spécifique par défaut, soit x = 1.
 fonction amusante(x, y = x){
    console.log(x, y)
 }
 fonction fun1(c, y = x){
    console.log(c, x, y)
 }
 amusant(2); //2 2
 fun1(1); //1 1 1

autres

paramètres Rest (opérateur d'expansion...)

function fun(...arg){
   console.log(arg) // [1, 2, 3, 4]
 }

La fonction de flèche

fun(1, 2, 3, 4)

est définie comme =>

let arrow = (v) => v + 2
 console.log(arrow(1)) // 3

La différence entre les fonctions fléchées et les fonctions ordinaires

Les styles des fonctions fléchées et des fonctions ordinaires sont différents. La syntaxe des fonctions fléchées est plus concise et claire. , et les fonctions ordinaires sont des fonctions définies par fonction.
Set n'a pas de clés, seulement des valeurs. On peut considérer que les clés et les valeurs sont les mêmes
. En fait, les fonctions fléchées n'ont pas ceci dans la fonction flèche, cela ne dépend que de la première fonction ordinaire qui enveloppe la flèche. fonction.
Les fonctions fléchées n'ont pas leurs propres arguments. L'accès aux arguments dans une fonction fléchée obtient en fait la valeur dans l'environnement d'exécution local (fonction) externe.
appeler, appliquer et lier n’affectera pas la direction de cela.
Le this de la fonction fléchée pointe vers le contexte , mais le this de la fonction ordinaire ne pointe pas vers le contexte. Ajoutez bind(this) si nécessaire.

Set

Set est une nouvelle structure de données dans ES6, qui est similaire à un tableau. mais la valeur du membre est unique et il n'y a pas

de déclarations de valeur répétées. : const set = new Set()

Attributs :

size : Renvoie le nombre de valeurs dans l'objet Set

Méthode :

add() : Ajoute un élément à l'objet Set. fin de l’objet Set. Renvoie l'objet Set
delete() : supprime les éléments du Set qui sont égaux à cette valeur, renvoie true s'il y en a, sinon renvoie false
clear() : efface tous les éléments du Set
has() : si cette valeur existe, si c'est vrai, sinon false
keys() : objet de l'itérateur avec les valeurs d'attributvalues
() : objet de l'itérateur avec les valeurs d'attributentries
() : objet de l'itérateur avec les valeurs d'attribut et
les valeurs
forEach() : parcourir chaque élément

spécifiquement Remarque :

Le traverseur est un objet iterator Dans l'ordre d'insertion,
la valeur ajoutée à l'ensemble sous la forme de [Clé, Valeur] ne subira pas de conversion de type, donc 1 et "1. " sont deux valeurs différentes
. À l'intérieur du Set, elles sont passées === Pour juger, c'est-à-dire que deux objets ne peuvent jamais être identiques car les adresses sont différentes.
La seule différence est NaN

let list = new Set()
 
 //ajouter()
 liste.ajouter("1")
 liste.ajouter(1)
 console (liste) // Ensemble (2) {1, "1"}
 
 //taille
 console (liste.size) // 2
 
 //supprimer()
 liste.delete("1")
 console (liste) // Ensemble (1) {1}
 
 //a()
 list.has(1) // vrai
 list.has(3) // faux
 
 //clair()
 liste.clear()
 console (liste) // Ensemble (0) {}
 
 let arr = [{id : 1}, {id : 2}, {id : 3}]
 let list = nouvel ensemble (arr)
 
 //clés()
 for (laisser la clé de list.keys()) {
    console.log(key); // Imprime ceci : {id : 1} {id : 2} {id : 3}
 }
 
 //valeurs()
 for (laisser la clé de list.values()) {
    console.log(key); // Imprime ceci : {id : 1} {id : 2} {id : 3}
 }
 
 //entrées()
 for (laisser les données de list.entries()) {
    console.log(data); // Imprimer ceci : [{id : 1},{id : 1}] [{id : 2},{id : 2}] [{id : 3},{id : 3 } ]
 }
 
 //pourChacun
 list.forEach((élément) => {
    console.log(item)//Imprimez ceci : {id : 1} {id : 2} {id : 3}
 });

Application :

déduplication de tableau.

Une chose à noter est que new Set ne peut pas supprimer les objets

let arr = [1,1,'true','true',true,true,15,15,false,false, undefined, indéfini, nul, nul, NaN, NaN, 'NaN', 0, 0, 'a', 'a'];
 
 console.log([...new Set(arr)]) 
 //ou console.log(Array.from(new Set(arr)))
 // [1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a']

peut trouver l'union, l'intersection et la différence

soit a = new Set([1, 2 , 3])
 soit b = nouvel ensemble ([2, 3, 4])
 
 //Union console.log(new Set([...a, ...b])) // Set(4) {1, 2, 3, 4}
 
 //Intersection console.log(new Set([...a].filter(v => b.has(v)))) // Set(2) {2, 3}
 
 //Différence définie new Set([...a].filter(v => !b.has(v))) // Set(1) {1}

ensemble de mappage

let set = new Set([1,2, 3])
 console.log(new Set([...set].map(v => v * 2))) // Set(3) {2, 4, 6}

Définition

WeakSet

: la même structure que Set, mais le membre les valeurs sont uniquement Peut

être déclaré pour l'objet : const set = new WeakSet()

Méthode WeakSet() :

add() : Ajoute un élément à la fin de l'objet WeakSet. Renvoie l'instance
delete() : supprime l'élément du WeakSet qui est égal à cette valeur,
has() : si cette valeur existe, si elle existe, elle est vraie, sinon elle est fausse

Remarque :

Les objets des membres WeakSet. sont toutes des références faibles, c'est-à-dire un garbage collection. Le mécanisme ne prend pas en compte l'application de l'objet. En termes simples ,
l'avantage des objets WebSet qui ne peuvent pas être traversés est que lorsque l'instance est supprimée, il n'y aura pas de fuite de mémoire.

Index de recommandation

de carte

: ⭐️⭐️

Map est une nouvelle structure de données dans ES6, qui est un objet similaire. key est une déclaration de valeur de n'importe quel type

: const map = new Map()

attributs :

constructor : constructeur, renvoie Map
size : renvoie le nombre de valeurs dans l'instance Map

Méthode :

set() : ajoute une paire clé-valeur après Map, renvoie l'instance
get() : renvoie la valeur clé Pour
delete() : Supprime les éléments de la Map qui sont égaux à cette valeur, renvoie true s'il y en a, sinon renvoie false
clear() : Efface tous les éléments de la Map
has() : Si cette valeur existe, si elle existe, elle est vraie, sinon elle est fausse.
key() : un objet du traverseur avec des clés d'attribut
valeurs() : un objet du traverseur avec
des entrées de valeurs d'attribut() : un objet du traverseur avec des clés d'attribut et des valeurs d'attribut
forEach() : traverse chaque élément

Note spéciale :

for Les références au même objet sont considérées comme
des clés avec la même clé et seront écrasées

let map = new Map()
 
 //ensemble()
 map.set('a', 1)
 map.set('b', 2)
 console.log(map) // Map(2) {'a' => 1, 'b' => 2}
 
 //obtenir
 map.get("a") // 1
 
 //taille
 console.log(map.size) // 2
 
 //supprimer()
 map.delete("a") // vrai
 console.log(map) // Map(1) {'b' => 2}
 
 //a()
 map.has('b') // vrai
 map.has(1) // faux
 
 //clair()
 map.clear()
 console.log(carte) // Carte(0) {}
 
 soit arr = [["a", 1], ["b", 2], ["c", 3]]
 laissez map = nouvelle carte (arr)
 
 //clés()
 for (laisser la clé de map.keys()) {
    console.log(key); // Imprimer ceci : abc
 }
 
 //valeurs()
 for (laisser la valeur de map.values()) {
    console.log(value); // Imprimer ceci : 1 2 3
 }
 
 //entrées()
 for (laisser les données de map.entries()) {
    console.log(data); // Imprimer ceci : ["a", 1] ["b", 2] ["c", 3]
 }
 
 //pourChacun
 map.forEach((élément) => {
    console.log(item)//Imprimez ceci : 1 2 3
 });

Définition

de WeakMap

: et structure de la carte, mais les valeurs des membres ne peuvent

être déclarées que pour les objets : const set = new WeakMap()

méthode :

set() : ajouter des paires clé-valeur, renvoyer les instances
get() : renvoyer la clé- value pairs
delete() : Supprime la paire clé-valeur Si elle existe, c'est vrai Sinon
, c'est faux.

Symbol (type original)

Symbol est un type de données primitif introduit dans ES6, qui représente独一无二Déclaration

: const sy = Stmbol()

Paramètres : string (facultatif)

Méthode :

Symbol.for() : Crée Symbol值décrite par les paramètres If. ce paramètre existe, renvoie la Symbol值d'origine (recherchez d'abord puis créez, enregistré dans l'environnement global)
Symbol.keyFor() : renvoie une description de la Symbol值enregistrée (seule key de Symbol.for() peut être renvoyée)
Object.getOwnPropertySymbols() : Renvoie un tableau de toutes Symbol值utilisées comme noms de propriétés dans l'objet

// Déclarez let a = Symbol();
 soit b = Symbole();
 console.log(a === b); // faux
 
 //Symbole.pour()
 soit c = Symbol.for("domesy");
 soit d = Symbol.for("domesy");
 console.log(c === d); // vrai
 
 //Symbol.keyFor()
 const e = Symbole.for("1");
 console.log(Symbol.keyFor(e)); // 1
 
 //Symbole.description
 let symbole = Symbole("es");
 console.log(symbole.description); //es
 console.log(Symbol("es") === Symbole("es")); // false
 console.log(symbole === symbole); // vrai
 console.log(symbol.description === "es"); // true

Proxy

Le proxy est utilisé pour modifier le comportement par défaut de certaines opérations, ce qui équivaut à faire des modifications au niveau du langage, c'est donc une sorte de "méta programmation"), c'est-à-dire que la programmation dans un langage de programmation

peut être comprise de cette manière. Le proxy est une couche d'拦截définie avant l'objet cible. Le monde extérieur doit passer par cette couche d'interception s'il veut y accéder. Par conséquent, un mécanisme est fourni pour filtrer et filtrer l'accès du monde extérieur à la réécriture.

Le proxy peut être compris ici comme代理器

déclaration de proxy : const proxy = new Proxy(target, handler)

target : intercepted object
handler : définit

la méthode d'interception :

get() : intercepte la lecture des attributs de l'objet
set() : intercepte le paramétrage de l'objet Propriétés , renvoie une valeur booléenne
has() : intercepte l'opération de propKey dans le proxy, renvoie une valeur booléenne
ownKeys() : intercepte le parcours de propriété d'objet, renvoie un tableau
deleteProperty() : intercepte l'opération de suppression de proxy[propKey], renvoie une valeur booléenne value ()
apply() : Intercepter les appels de fonction, appeler et appliquer les opérations
construct() : Intercepter une nouvelle commande, renvoyer un objet : Intercepter une nouvelle commande, renvoyer un objet

let obj = {
  nom : 'domesy',
  heure : '2022-01-27',
  valeur : 1
 }
 
 laissez données = nouveau proxy (obj, {
     //obtenir()
     obtenir(cible, clé){
         return target[key].replace("2022", '2015')
     },
     
     //ensemble()
     set (cible, clé, valeur) {
        if (clé === "nom") {
           return (cible[clé] = valeur);
        } autre {
           retourner la cible[clé] ;
         }
     },
     
     // a()
    has(cible, clé) {
        if (clé === "nom") {
            retourner la cible[clé] ;
        } autre {
            renvoie faux ;
        }
    },
    //supprimerPropriété()
    deleteProperty (cible, clé) {
        if (key.indexOf("_") > -1) {
            supprimer la cible[clé] ;
            renvoie vrai ;
        } autre {
            retourner la cible[clé] ;
        }
    },
    // propresClés()
    ownKeys (cible) {
        return Object.keys(target).filter((item) => item != "time");
    },
 })
 
 console.log(data.time) // 2015-01-27
 
 data.time = '2020'
 data.name = 'Réagir'
 console.log(data) //Proxy {nom : 'React', heure : '2022-01-27', valeur : 1}
 
 //Intercepter a()
 console.log("nom" dans les données) // vrai
 console.log("heure" dans les données) // faux
 
 // Supprime deleteProperty()
 supprimer data.time; // vrai
 
 // Traverser ownKeys()
 console.log(Object.keys(data)); //['nom', 'valeur']

 //appliquer()
 soit somme = (...args) => {
    soit num = 0;
    args.forEach((élément) => {
        num += élément ;
    });
    retourner num ;
 } ;

 somme = nouveau proxy (somme, {
    appliquer (cible, ctx, args) {
        return target(...args) * 2;
    },
 });
 
 console.log(somme(1, 2)); // 6
 console.log(sum.call(null, 1, 2, 3)); // 12
 console.log(sum.apply(null, [1, 2, 3])); // 12
 
 //constructeur()
 laissez l'utilisateur = classe {
    constructeur (nom) {
        this.name = nom ;
    }
 }
 Utilisateur = nouveau proxy (utilisateur, {
    construction (cible, arguments, nouvelle cible) {
        renvoyer une nouvelle cible(...args);
    },
  });
 console.log(new User("domesy")); // Utilisateur {name: 'domesy'}

Reflect

Reflect est similaire à Proxy, sauf qu'il conserve le comportement par défaut d' Object et

remplace certaines des méthodes de l'objet Object qui sont évidemment interne au langage (tel que Object. DefineProperty) et placez-le sur l'objet Reflect.
A ce stade, certaines méthodes sont déployées à la fois sur les objets Object et Reflect. À l'avenir, de nouvelles méthodes seront déployées uniquement sur les objets Reflect
pour modifier les résultats de retour de certaines méthodes Object afin de les rendre plus raisonnables. Par exemple, Object.defineProperty(obj, name, desc) générera une erreur lorsque la propriété ne peut pas être définie, tandis que Reflect.defineProperty(obj, name, desc) renverra false
pour transformer l'opération Object en un comportement fonctionnel

des méthodes Reflect

et Les méthodes de Proxy correspondent une à une, nous ne les présenterons donc pas ici.

Class

Class : abstraction d'une classe d'objets avec des caractéristiques communes (sucre de syntaxe du constructeur)

constructor() définition de base et

classe d'instance générée Parent {
     constructeur (nom = 'es6'){
         ce.nom = nom
     }
 }
 let data = new Parent('domesy')
 console.log(data) // Parent { nom : 'domesy'}

étend hérite de

la classe Parent {
     constructeur (nom = 'es6'){
         ce.nom = nom
     }
 }
 
 // Classe d'héritage ordinaire Child étend Parent {}
 console.log(new Child()) // Enfant { nom : 'es6'} 
 
 // Passe la classe des paramètres Child étend Parent {
    constructeur (nom = "enfant") {
        super(nom);
        this.type = "enfant" ;
    }
 }
 console.log(new Child('domesy')) // Child { nom : 'domesy', type : 'child'}

Les deux méthodes

getter et setter

sont plus importantes et sont souvent utilisées pour encapsuler l'API
get et set
attributs, pas

classe de méthode Parent {
     constructeur (nom = 'es6'){
         ce.nom = nom
     }
     // getteur
     obtenir getName() {
         retourner 'sy' + this.name
     } 
     // passeur
     définir setName (valeur) {
         this.name = valeur
     }
 }
 
 laissez les données = nouveau Parent()
 console.log(data.getName) // sys6
 
 data.setName = 'domesy'

console.log(data.getName) //

Méthode statique statique

domesy

La méthode statique ne peut pas être appelée sur une instance de la classe, mais doit être appelée via la classe elle-même

class Parent {
     statique getName = (nom) => {
         retourne `Bonjour ! ${nom}`
     }
 }
 
 console.log(Parent.getName('domesy')) // Bonjour !

classe

de propriétés statiques

Domesy

Parent {}
 Parent.type = "test" ;
 
 console.log(Parent.type); //test

Promise

Promise est de résoudre le problème de "l'enfer des rappels". Cela peut rendre le traitement des opérations asynchrones très élégant.

Promise peut prendre en charge plusieurs requêtes simultanées et obtenir des données dans des requêtes simultanées.Cette Promise peut résoudre le problème asynchrone. Promise elle-même ne peut pas être considérée comme

une définition asynchrone : Statut de l'objet contenant les résultats de l'opération asynchrone

en attente : [en attente] Statut initial
rempli : [Mise en œuvre] Opération réussie
rejetée : [Rejeté] L'opération a échoué

Remarque :

La promesse déterminera la méthode à exécuter en fonction de l'état
. Lorsque la promesse est instanciée, l'état est en attente par défaut. Si l'état asynchrone est anormal, il est rejeté.
la transition d'état est à sens unique et irréversible , l'état déterminé (réalisé/rejeté) ne peut pas être transféré à l'état initial (en attente) et ne peut passer que d'en attente à réalisé ou rejeté.

Utilisation de base

//Définition normale let ajax = ( rappel) => {
     console.log('≈')
     setTimeout(() => {
         rappel && callback.call();
     }, 1000)
 } 
 ajax(() => {
     console.log('timeout')
 })
 // Il sera d'abord imprimé pour démarrer l'exécution, puis le délai d'attente sera imprimé après 1 s.
 
 //Promesse
 soit ajax = () => {
    console.log("Démarrer l'exécution");
    renvoyer une nouvelle promesse ((résoudre, rejeter) => {
        setTimeout(() => {
            résoudre();
        }, 1000);
    });
 } ;
 ajax().then(() => {
    console.log("timeout"); 
 });
 // Il sera d'abord imprimé pour démarrer l'exécution, puis le délai d'attente sera imprimé après 1 s.
 
 //alors()
 soit ajax = () => {
    console.log("Démarrer l'exécution");
    renvoyer une nouvelle promesse ((résoudre, rejeter) => {
        setTimeout(() => {
            résoudre();
        }, 1000);
    });
 } ;
 ajax()
 .puis(() => {
     renvoyer une nouvelle promesse ((résoudre, rejeter) => {
        setTimeout(() => {
            résoudre();
        }, 2000);
    });
 })
 .puis(() => {
     console.log("délai d'attente")
 })
 // Il sera d'abord tapé pour démarrer l'exécution, puis le timeout sera tapé après 3s (1+2)
 
 // attraper()
 soit ajax = (num) => {
    console.log("Démarrer l'exécution");
    renvoyer une nouvelle promesse ((résoudre, rejeter) => {
        si (nombre > 5) {
            résoudre();
        } autre {
            throw new Error("Une erreur s'est produite");
        }
    });
 } ;
 
 ajax(6)
 .then(fonction () {
    console.log("timeout"); // Commencera l'exécution en premier, puis le délai d'attente sera imprimé après 1 s
 })
 .catch(fonction (erreur) {
    console.log("catch", err);
 });
 
  ajax(3)
 .then(fonction () {
    console.log("timeout"); 
 })
 .catch(fonction (erreur) {
    console.log("catch"); // Commencera l'exécution en premier, puis attrapera après 1 s.
 });

Promise.all() Opération par lots

L'
instance renvoyée est une promesse ordinaire,
qui reçoit un tableau en tant que paramètre.
il
peut être d'autres valeurs
.
La promesse échoue et la valeur de retour est la première

.
     retourner la nouvelle promesse (résoudre, rejeter) => {
        Soit img = document.CreateElement ("img");
        img.src = src;
        img.onload = function () {
                résoudre (IMG);
        } ;
        img.onerror = fonction (err) {
                rejeter (err);
        } ;
    });
 }
 
 const showImgs = (imgs) => {
     imgs.ForEach ((img) => {
         Document.Body.ApendChild (IMG);
     })
 }
 
 Promesse.all ([[
    LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
    LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
    LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
 ]). Ensuite (showImgs);

race

promesse.race ()

est similaire à tous, sauf qu'il sera exécuté tant que l'on est exécuté

// et chargé à la page après une exécution constant LoadImg = (src) => {
    retourner la nouvelle promesse (résoudre, rejeter) => {
       Soit img = document.CreateElement ("img");
       img.src = src;
       img.onload = function () {
               résoudre (IMG);
       } ;
       img.onerror = fonction (err) {
               rejeter (err);
       } ;
   });
}

const showImgs = (imgs) => {
   Soit P = document.CreateElement ("P");
   P.ApendChild (IMG);
   document.body.ApendChild (P);
}

Promesse.race ([[
   LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
   LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
   LoadImg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,

]). Ensuite

,
(

showImgs

);

, Les fonctions et les erreurs lancées à l'intérieur ne reflètent pas
comment la promesse externe est exécutée en interne.

Générateur

de générateur

sur le point de faire)

: Oui

la fonction qui

peut

être utilisée pour contrôler l'itérateur est également une solution de programmation asynchrone qui résume plusieurs états internes.

done value
un value done
été terminé)
ensuite
est utilisé pour恢复l'exécution du programme

.
     rendement "a";
     rendement "b";
     Retour "C"
 }
 
 Selt Generator = data ();
 console.log (générateur.next ()) // {valeur: 'a', fait: false} 
 console.log (générateur.next ()) // {valeur: 'b', fait: false} 
 console.log (générateur.next ()) // {valeur: 'c', fait: true} 
 console.log (générateur.next ()) // {valeur: undefined, fait: true}

iterator iterator

est une interface qui fournit un mécanisme d'accès unifié pour diverses structures de données. Tant que toute structure de données déploie l'interface d'itérateur, elle peut compléter le fonctionnement de traversée (c'est-à-dire traiter tous les membres de la structure de données en séquence).

Les fonctions de l'itérateur:

pour
diverses structures de données
afin que les membres de la structure de données puissent être organisés dans un certain ordre.
Principalement pour ... de la consommation
pour l'ordre de traversée: différents moteurs se sont mis d'accord sur la façon d'itérer les propriétés, donc standardisant le comportement ES1

Remarque:

Dans ES6, certaines structures de données ont l'interface d'itérateur nativement (comme les tableaux), c'est-à-dire, Sans traitement peut être traversé par un ... de boucle, mais certains ne peuvent pas (comme
Map结构Set数组某些类似数组的对象Map结构.
Un exemple d'ajout d'une interface itérateur à un objet.

// utilise essentiellement let arr = ["Hello", "world"];
 Selt map = arr [symbol.iterator] ();
 console.log (map.next ());
 console.log (map.next ());
 console.log (map.next ());
 
 // pour une boucle, laissez arr = ["Hello", "World"];
 pour (Soit la valeur de arr) {
    console.log (valeur);
 }
 
 // Traitement d'objets Soit Obj = {
     Démarrer: [1, 5, 2],
     fin: [7, 9, 6],
     [Symbol.iterator](){
         Soit index = 0;
         Soit arr = this.start.concat (this.end)
         retour {
             suivant(){
                 if (index <arr.length) {
                     retour {
                         valeur: arr [index ++],
                         fait: faux
                     }
                 }autre{
                     retour {
                         valeur: arr [index ++],
                         fait : vrai
                     }
                 }
             }
         }
     }
 }
 pour (soit clé d'Obj) {
    console.log (clé);
 }

Decorator Decorators

Utilisez

le

symbole @ pour étendre et modifier le comportement de la classe
core-decorators

     Target.name = "Domesy"
 }
 
 @nom
 Test de classe {}
 
 Console.log (test.name) // Domesy

Modularisation

Au début, il était une méthode courante pour utiliser des fonctions d'exécution immédiates pour atteindre la modularisation

. de l'utilisation de la modularisation:

résoudre les conflits de dénomination
offre une réutilisabilité
et améliorer

les solutions de maintenabilité du code:

CommonJS : pour les serveurs (dépendances dynamiques)
AMD : pour les navigateurs (dépendances dynamiques, rarement utilisé)
CMD : pour les navigateurs (dépendances dynamiques, rarement utilisé)
UMD : utilisé pour les navigateurs et serveurs (dépendances dynamiques)
ESM : Utilisé pour les navigateurs et les serveurs (dépendances statiques)

Exportation Les exportations du module d'exportation

par défaut: export default Index
Exports seul: `Export const name = 'Domesy'
Export on Demand (recommandé):` EXPORT {nom, valeur, id} '
renommé Export: export { name as newName }

Importer le module d'importation

par
défaut Importation (recommandée): import Index from './Index'
import * as Index from './Index'
import (recommandé): import { name, value, id } from './Index'
Renommé
important: import { name as newName } from './Index'
auto-dirigée import: import './Index'

): Index d'importation, {nom, valeur, id} à partir de la commande

de mode composé

export命令import命令

import Index, { name, value, id } from './Index'

* de './index'
Importation et exportation à la demande: `Export {nom, valeur, id} de './index'
par défaut à Import and Export:` Export {par défaut en tant que nom} de './index'

es7

Extension du tableau

inclut () : ajouté une basée sur l'indice ES6, représentant où trouver ES7

let arr = [1, 2, 3, 4]
 
 // inclut () es6
 console.log (arr.cluds (3)) // true
 Console.log ([1, 2, Nan].
 
 // inclut () es7
 console.log (arr.cluses (1, 0)) // true
 console.log (arr.cluds (1, 1)) // False

Numeric Extended

Power Operator : Utiliser ** pour représenter Math.pow()

// Opérateur d'alimentation ES7
 console.log (math.pow (2, 3)) // 8
 Console.log (2 ** 8) // 256

ES8

TRANSFERT TRANSFERT

PADSTART () : Utilisé pour l'achèvement de la tête
PADEND () : Utilisé pour l'achèvement de la queue.

Soit str = 'domesy'
 
 // padstart (): sera-t-il rempli sous la forme d'espaces? "0")); // 01
 Console.log ("8-27" .padstart (10, "Yyyy-0m-0d"));

// padend

(

): même utilisation que

padstart
(

) console.log ("1" .padend (2, "0"));

Renvoie un tableau de noms d'attribut et de valeurs d'attribut

Laissez obj = {nom: 'domesy', valeur: 'react'}

//Object.Values ()
console.log (object.values (obj)) // ['react', 'react']

//Object.entries ()
console.log (object.entries (obj)) // [['name', 'value'], ['react', 'react']]

Async Await

Fonction: Changez la fonction asynchrone à la fonction synchrone , (Syntaxe du générateur)

const func = async () => {
    Soit promettre = nouvelle promesse ((résoudre, rejeter) => {
    setTimeout(() => {
          résoudre ("exécuter");
        }, 1000);
    });
     
      console.log (attendre la promesse);
      console.log (attendre 0);
      console.log (attendre promesse.resolve (1));
      console.log(2);
      Retour Promise.Resolve (3);
 }
 
 func (). alors (val => {
      console.log (val);
 });

Remarque spéciale:

forEach()
fonction asynchronisée renvoie un objet Promise , vous pouvez donc utiliser then
commande alors AWIT.

Async

async/await for-of Promise.all()
try catch reject

Il y a deux situations: il s'agit d'un objet de promesse

. Cette chose non projetée comme vous attendez.

S'il attend un objet de promesse, Await suscitera également le code derrière Async, exécutez d'abord le code de synchronisation à l'extérieur de l'Async, attendez que l'objet prometteur soit rempli, puis utilisez les paramètres de résolution comme résultat de l'opération de l'expression attend.

Les avantages et

les inconvénients de l'asynchronesment et de la promesse

il
véritable
écriture synchrone en série, et le code est relativement facile à lire.

processus, la

clarté

code est améliorée.

, provoquant la perte du code.

extension de transfert de caractères

ES9

détend les restrictions sur la chaîne s'échapper dans les modèles de balise : undefined est renvoyé lorsque l'échappement de la chaîne illégale est rencontré, et la chaîne d'origine peut être obtenue à partir de raw .

// RELATIF RESTRICTIONS DE CHAMPS CONS TEST = (valeur) => {
     console.log (valeur)
 }
 Tester `domesy` // ['domesy', brut: [" domesy "]]

promesse

promest.finally ()

une fonction de rappel qui sera exécutée quel que soit le statut final,

laissez Func = Time => {{
     retourner la nouvelle promesse ((res, rej) => {
         setTimeout(() => {
             if (heure <500) {
                 res (temps)
             }autre{
                 Rej (heure)
             }
         }, temps)
     })
 }
 
 Fun (300)
 .Then ((val) => console.log ('res', val))
 .Catch ((erro) => console.log ('rej', erro))
 .Finally (() => console.log ('fini')))
 // Résultat d'exécution: Res 300 Func terminé (700)
 .Then ((val) => console.log ('res', val))
 .Catch ((erro) => console.log ('rej', erro))
 .Finally (() => console.log ('fini')))
 // Résultat de l'exécution: REJ 700

For-Await-of

For-Await-of: Iterator asynchrone, Loop attend que chaque Promise对象devienne resolved状态avant d'entrer dans l'étape suivante

Let Gettime = (secondes) => {
     retourner la nouvelle promesse (res => {
         setTimeout(() => {
             res (secondes)
         }, secondes)
     })
 }
 
Test de fonction asynchrone () {
    Soit Arr = [GetTime (2000), GetTime (500), GetTime (1000)]
    pour attendre (laisser x de arr) {
        console.log (x); 
    }
}

Test () // Exécuter 2000 500 1000

ES10 ES10

TRANSFERT EXTENSION

JSON.STRINFIFY () : Peut retourner les chaînes qui ne sont pas conformes aux normes UTF-8 (U + 2028 et U + 2029 peuvent être entrées directement)

//json.stringify ( ) Mettre à niveau console.log (json.stringify (" ud83d  ude0e"));

console.log

(

json.stringify (" u {d800}"))

;

(Remarque: il est presque le même que la carte suivie de Flat avec une valeur de profondeur de 1, mais FlatMap est généralement légèrement plus efficace lorsqu'il est combiné en une seule méthode.)
Flat : La méthode traverse récursivement le tableau à une profondeur spécifiable et combine tout Les éléments le combinent avec les éléments du sous-tableau traversé pour former un nouveau tableau et le retourner. La valeur par défaut est 1. (Application: aplatissement du tableau (résoudre automatiquement en bas lorsque Infinity est entré))

Soit arr = [1, 2, 3, 4]
 
 // FlatMap ()
 console.log (arr.map ((x) => [x * 2]);
 console.log (arr.flatmap ((x) => [x * 2]);
 console.log (arr.flatmap ((x) => [[x * 2]]));
 
 const Ar1 = [0, 1, 2, [3, 4]];
 const arr2 = [0, 1, 2, [[[3, 4]]]];

 console.log (arr1.flat ());
 console.log (arr2.flat (2));

console.log

(

arr2.flat (infinité)

)

; de Object.entries()
Vous pouvez effectuer une conversion de type de données

de MAP à objet

let map = new Map ([[
    ["a", 1],
    ["b", 2],
 ]);
 
 Soit obj = object.fromentries (map);
 console.log (obj

)

;
    ["a", 1],
    ["b", 2],
 ]
 Soit obj = object.fromentries (arr);

console.log

(obj)

;
    A: 1,
    B: 2,
    c: 3
 }
 
 Soit res = object.fromentries (
     Object.entries (obj) .filter (([clé, val]) => valeur! == 3)
 )
 
 console.log (res) // {a: 1, b: 2}

Extension numérique

TOSTRING () Transformation : renvoie le code d'origine de la fonction (cohérent avec le codage)

// toString ()
 fonction test () {
     consople.log («domesy»)
 }
 console.log (test.toString ());
 // fonction test () {
 //consople.log('domesy)
 //}

Paramètres de capture facultatifs

dans ES10, Try Catch peut ignorer les paramètres de capture

Laissez Func = (Name) => {
      essayer {
         return JSON.Parse (nom)
      } attraper {
         retourner faux
      }
  }
  
  console.log (func (1)) // 1
  console.log (func ({a: '1'})) // false

es11

bigInt (type d'origine)

Nouveau type de données primitives: BigInt, qui représente un entier de précision arbitraire et peut représenter des données très longues, qui peuvent dépasser 2 de

53 Le type

nombre en JS ne peut représenter que des valeurs en toute

sécurité

dans
la plage de - (2 ^ 53-1) à 2 ^ 53-1.

ne peut être que 53 chiffres binaires (équivalent à 16 chiffres décimaux, plus ou moins 9007199254740992).
BigInt n'a aucune limite au nombre de chiffres, et tout entier peut être représenté avec précision. Cependant, il ne peut être utilisé que pour représenter les entiers, et afin de le distinguer du nombre, des données de type BigInt doivent être ajoutées avec le suffixe n.

BigInt peut

utiliser

des signes négatifs, mais ne peut pas utiliser de signes positifs
.

 console.log (2 ** 53) // 9007199254740992
 console.log (numéro.max_safe_integer) // 9007199254740991
 
 // Bigint
 const bigint = 9007199254740993n
 Console.log (BigInt) // 9007199254740993N
 console.log (typeof bigInt) // bigInt
 console.log (1n == 1) // vrai
 console.log (1n === 1) // faux
 const bigintnum = bigInt (9007199254740993n)
 console.log (bigIntnum) // 9007199254740993n

Il y a un total de 7

types de données de base

dans ES6, à savoir: srting , number , boolean , object null undefined symbol

non

Function Date RegExp object Array

8. Ils sont: srting , number , boolean , object , null , undefined , symbol BigInt

promesse

de promesse

BigInt.AllSetTled

():

Emballez plusieurs instances dans une nouvelle instance et renvoyez le tableau d'état après les modifications d'état de toutes les instances (modifier tous les modifications puis retourne)
que le résultat soit rempli ou rejeté, aucune prise
n'est équivalente à Promise.all()

promesse.allsetTled ([[
    Promesse.reject ({
      Code: 500,
      MSG: "Exception de service",
    }),
    Promesse.resolve ({
      Code: 200,
      Données: ["1", "2", "3"],
    }),
    Promesse.resolve ({
      Code: 200,
      Données: ["4", "5", "6"],
    }),
  ]). alors ((res) => {
      console.log (res) // [{raison: {code: 500, msg: 'service exception'}, status: "rejeté"},
                      // {Raison: {code: 200, données: ["1", "2", "3"]}, statut: "rejeté"},
                      // {Raison: {code: 200, données: ["4", "5", "6"]}, statut: "rejeté"}]
      const data = res.filter ((item) => item.status === "épanoui");
      console.log (données);
                          // {Raison: {code: 200, données: ["4", "5", "6"]}, statut: "rejeté"}]
  })

import ():

l' import() require() d' require
obtenue à la demande.
Chargement

// alors ()
 Soit modulepage = "index.js";
 import (modulepage) .then ((module) => {
    module.init ();
 });
 
 // combiné avec Async attend
 (asynchrone () => {
  const modulepage = 'index.js'
  const Module = attendre l'importation (modulepage);
  console.log (module)
 })

Global This

Global This, quel que soit l'environnement (navigateur, nœud, etc.), pointe toujours vers l'objet global

// Browser Environment Console.log (GlobalThis) // Window

//nœud
Console.log (GlobalThis) //

Symbole

de chaîne optionnel

global? Représente

si

TypeScript
existe.

 // Avant ES11, laissez A = utilisateur && user.name
 
 // Laissez maintenant B = utilisateur? .Name

Valeur null Operator

de l'opérateur de fusion pour la gestion des valeurs par défaut
par rapport à ||, l'opérateur de coalescence nul .

"" || "Valeur par défaut";
  "" ??
  
 const b = 0;
 const a = b || 5;
 console.log (a);
 
 const b = null // non défini
 const a = b ?? 123;

Console.log

(

a

;
La chaîne d'origine qui correspond à un motif avec un remplacement.
Le motif peut être une chaîne ou une expression régulière, et le remplacement peut être une chaîne ou une fonction appliquée à chaque correspondance.
RempacEALL () équivaut à améliorer les caractéristiques de Remplace (), en remplacement de tous

STR = "HI!, Ceci est une nouvelle fonctionnalité d'ES6 ~ ES12, actuellement ES12"
 
 console.log (str.replace ("es", "sy")); , c'est une nouvelle fonctionnalité de SY6 ~ ES12, actuellement ES12
 console.log (str.replace (/ es / g, "sy")); , c'est une nouvelle fonctionnalité de SY6 ~ SY12, actuellement c'est SY12
 
 console.log (str.replaceAll ("es", "sy")); , c'est une nouvelle fonctionnalité de SY6 ~ SY12, actuellement c'est SY12
 console.log (str.replaceAll (/ es / g, "sy")); , il s'agit d'une nouvelle fonctionnalité de SY6 ~ SY12, actuellement SY12

Promise

Promise.Any ()

est différente de Promise.race (). Renvoyez la promesse qui résout d'abord.

Promesse.y ([[
    Promesse.reject ("troisième"),
    Promesse.resolve ("second"),
    Promesse.resolve ("premier"),
 ])
 .Then ((res) => console.log (res)) // seconde
 .Catch ((err) => Console.Error (err)); 
 
 Promesse.y ([[
    Promesse.reject ("Error 1"),
    Promesse.reject ("Error 2"),
    Promesse.reject ("Error 3"),
 ])
 .Then ((res) => console.log (res))
 .Catch ((err) => Console.Error (err));
 // globaleurror: toutes les promesses ont été rejetées
 
 Promesse.y ([[
    Promesse.resolve ("troisième"),
    Promesse.resolve ("second"),
    Promesse.resolve ("premier"),
 ])
 .Then ((res) => console.log (res)) // troisième

.Catch ((

err

) =>

Console.Error

(ERR));

Cela permet de suivre les objets existants sans les empêcher d'être collectés à la poubelle.
en
la
cartographie des objets
. possible. Il est également important d'éviter de compter sur tout comportement spécifique qui n'est pas garanti par la spécification. Quand, comment et si la collecte des ordures se produit dépend de la mise en œuvre d'un moteur JavaScript donné.

Laissez faibles = new faible ({nom: «domesy», année: 24})
 
 webref.deref () // {nom: 'domesy', année: 24}
 faibleref.deref (). Année // 24

opérateurs logiques et expressions d'affectation

&& =

let num1 = 5;
Soit num2 = 10;
num1 && = num2;
console.log (num1);

// équivalent à num1 && (num1 = num2);
if (num1) {
    num1 = num2;
 }

|| =

Soit num1;
Soit num2 = 10;
num1 || = num2;
console.log (num1);

// équivalent à num1 || (num1 = num2);
if (! num1) {
   num1 = num2;
}

?? =

l'opérateur de coalesure de valeur nulle

??
Soit num2 = 10;
Soit num3 = null;

num1 ?? = num2;
console.log (num1);

num1 = false;
num1 ?? = num2;
console.log (num1);

num3 ?? = 123;
console.log (num3);

// équivalent à // num1 ??

num1 = num2)

;

Soit num2 = 100_000;

console.log (num1);
console.log (num2);

Cons num3 = 10.12_34_56
console.log (num3);