Aperçu des dernières fonctionnalités ES8-js tutoriel-php.cn

Aperçu des dernières fonctionnalités ES8

巴扎黑

Libérer： 2017-07-21 09:59:31

original

3689 Les gens l'ont consulté

Un aperçu des fonctionnalités d'ECMAScript 2017 (ES8) compilé à partir d'ES8 a été publié et voici ses principales nouvelles fonctionnalités, résumées dans la série d'articles Développement JavaScript moderne : bases de la syntaxe et compétences pratiques de l'auteur. Vous êtes également invités à prêter attention au premier plan ; -terminez la série de listes de contrôle hebdomadaires pour obtenir des informations de première main.

ECMAScript 2017 ou ES8 a été officiellement publié par TC39 fin juin 2017. Vous pouvez parcourir la version complète ici ; les fonctionnalités représentatives d'ES8 incluent le remplissage de chaîne et la valeur d'objet ; parcours, acquisition de descripteurs d'attributs d'objet, liste de paramètres de fonction et virgules de fin dans les appels, fonctions asynchrones, mémoire partagée et opérations atomiques, etc.

Remplissage de chaîne

ES8 a ajouté des fonctions de remplissage de chaîne intégrées, à savoir padStart et padEnd. Cette fonction peut garantir que la chaîne atteint une taille fixe en remplissant la tête ou la queue de la chaîne. Longueur ; les développeurs peuvent spécifier la chaîne remplie ou utiliser des espaces par défaut. La fonction est déclarée comme suit :

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])

Copier après la connexion

Comme indiqué ci-dessus, le premier paramètre de la fonction est la longueur cible, c'est-à-dire la longueur de la chaîne générée finale ; le deuxième paramètre est la chaîne de remplissage spécifiée :

&#39;es8&#39;.padStart(2);          // &#39;es8&#39;
&#39;es8&#39;.padStart(5);          // &#39;  es8&#39;
&#39;es8&#39;.padStart(6, &#39;woof&#39;);  // &#39;wooes8&#39;
&#39;es8&#39;.padStart(14, &#39;wow&#39;);  // &#39;wowwowwowwoes8&#39;
&#39;es8&#39;.padStart(7, &#39;0&#39;);     // &#39;0000es8&#39;
&#39;es8&#39;.padEnd(2);          // &#39;es8&#39;
&#39;es8&#39;.padEnd(5);          // &#39;es8  &#39;
&#39;es8&#39;.padEnd(6, &#39;woof&#39;);  // &#39;es8woo&#39;
&#39;es8&#39;.padEnd(14, &#39;wow&#39;);  // &#39;es8wowwowwowwo&#39;
&#39;es8&#39;.padEnd(7, &#39;6&#39;);     // &#39;es86666&#39;

Copier après la connexion

Parcours de la valeur de l'objet

La fonction Object.values sera renvoie le tableau spécifié de valeurs d'attributs énumérables de l'objet. L'ordre des valeurs dans le tableau est cohérent avec la boucle for-in. La déclaration de fonction est :

Object.values(obj)

Copier après la connexion

<🎜. >

Le premier paramètre obj est celui qu'il faut parcourir. L'objet cible, qui peut être un objet ou un tableau (un tableau peut être considéré comme un objet dont les clés sont des indices) :

const obj = { x: &#39;xxx&#39;, y: 1 };
Object.values(obj); // [&#39;xxx&#39;, 1]

const obj = [&#39;e&#39;, &#39;s&#39;, &#39;8&#39;]; // same as { 0: &#39;e&#39;, 1: &#39;s&#39;, 2: &#39;8&#39; };
Object.values(obj); // [&#39;e&#39;, &#39;s&#39;, &#39;8&#39;]

// when we use numeric keys, the values returned in a numerical 
// order according to the keys
const obj = { 10: &#39;xxx&#39;, 1: &#39;yyy&#39;, 3: &#39;zzz&#39; };
Object.values(obj); // [&#39;yyy&#39;, &#39;zzz&#39;, &#39;xxx&#39;]
Object.values(&#39;es8&#39;); // [&#39;e&#39;, &#39;s&#39;, &#39;8&#39;]Copier après la connexion

et la méthode Object.entries Ensuite, les propriétés et valeurs énumérables d'un objet seront renvoyées sous la forme d'un tableau à deux dimensions. cohérent avec Object.values. La déclaration et l'utilisation de cette fonction sont :

const obj = { x: &#39;xxx&#39;, y: 1 };
Object.entries(obj); // [[&#39;x&#39;, &#39;xxx&#39;], [&#39;y&#39;, 1]]

const obj = [&#39;e&#39;, &#39;s&#39;, &#39;8&#39;];
Object.entries(obj); // [[&#39;0&#39;, &#39;e&#39;], [&#39;1&#39;, &#39;s&#39;], [&#39;2&#39;, &#39;8&#39;]]

const obj = { 10: &#39;xxx&#39;, 1: &#39;yyy&#39;, 3: &#39;zzz&#39; };
Object.entries(obj); // [[&#39;1&#39;, &#39;yyy&#39;], [&#39;3&#39;, &#39;zzz&#39;], [&#39;10&#39;: &#39;xxx&#39;]]
Object.entries(&#39;es8&#39;); // [[&#39;0&#39;, &#39;e&#39;], [&#39;1&#39;, &#39;s&#39;], [&#39;2&#39;, &#39;8&#39;]]Copier après la connexion

Obtenir les descripteurs de propriété de l'objet

getOwnPropertyDescriptors. la fonction renverra le descripteur d'une propriété spécifiée de l'objet spécifié ; cette propriété doit être définie par l'objet lui-même plutôt que héritée de la chaîne de prototypes, la déclaration de la fonction est :

Object.getOwnPropertyDescriptor(obj, prop)Copier après la connexion

obj est l'objet source et prop est le nom de la propriété qui doit être affiché ; les clés incluses dans le résultat peuvent inclure configurable, énumérable, inscriptible, get, set et value.

const obj = { get es8() { return 888; } };
Object.getOwnPropertyDescriptor(obj, &#39;es8&#39;);
// {
//   configurable: true,
//   enumerable: true,
//   get: function es8(){}, //the getter function
//   set: undefined
// }Copier après la connexion

Guillemets de fin dans les listes de paramètres de fonction et les appels

Cette fonctionnalité nous permet d'ajouter des virgules de fin lors de la définition ou de l'appel de fonctions Non. erreur signalée :

function es8(var1, var2, var3,) {
  // ...
}
es8(10, 20, 30,);Copier après la connexion

Fonction asynchrone

ES8 permet l'utilisation de la syntaxe async/await pour définir et exécuter des fonctions asynchrones, mot-clé async Renvoie un objet AsyncFunction ; dans l'implémentation interne, bien que les principes d'implémentation des fonctions asynchrones et des itérateurs soient similaires, ils ne seront pas convertis en fonctions itérateurs :

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}
async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}
sayHello();

console.log(1);
sayHello();
console.log(2);

// 调用结果
1 // immediately
2 // immediately
Hello, es8 // after 2 seconds

Copier après la connexion

Mémoire partagée et opérations atomiques

La mémoire partagée permet à plusieurs threads de lire et d'écrire des données simultanément, tandis que les opérations atomiques permettent un contrôle de concurrence pour garantir l'exécution séquentielle de plusieurs threads concurrents. Cette section présente le nouveau constructeur SharedArrayBuffer et l'objet d'espace de noms Atomics qui contient des méthodes statiques. L'objet Atomic est similaire à Math. Nous ne pouvons pas créer son instance directement, mais nous pouvons uniquement utiliser les méthodes statiques qu'il fournit :