Quelles sont les fonctionnalités d'ecmascript ?

Les fonctionnalités d'ecmascript sont : 1. classe ; 2. Modularité ; 3. Fonction de flèche ; 5. Affectation de déstructuration ; 7. Promesse ; "**" ; 10. "async/wait" et ainsi de suite.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Qu'est-ce qu'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.

Ecma International est une organisation internationale de normalisation de l'information et des télécommunications composée de membres. Avant 1994, elle s’appelait l’Association européenne des fabricants d’ordinateurs. En raison de l'internationalisation des ordinateurs, les normes de l'organisation impliquent de nombreux autres pays. L'organisation a donc décidé de changer de nom pour montrer son caractère international. Le nom n'est plus un acronyme.

Différent des agences gouvernementales nationales de normalisation, Ecma International est une organisation composée de sociétés. Le processus de normalisation de l'organisation est plus commercial, prétendant que ce mode de fonctionnement réduit la recherche bureaucratique des résultats.

En effet, Ecma International est responsable de la formulation de nombreuses normes, comme les spécifications suivantes. Vous pouvez voir qu'il y a nos protagonistes aujourd'hui, la spécification ECMAScript, la spécification du langage C#, la spécification du langage C++/CLI, etc.

ECMAScript Relation avec JavaScript

En novembre 1996, Netscape, le créateur de JavaScript, décide de soumettre JavaScript à l'organisme de normalisation ECMA, dans l'espoir que ce langage puisse devenir un standard international. L'année suivante, l'ECMA a publié la première version du document standard 262 (ECMA-262), qui stipulait la norme pour le langage de script de navigateur et appelait ce langage ECMAScript. Cette version est la version 1.0.

Ce standard a été développé pour le langage JavaScript depuis le début, mais il y a deux raisons pour lesquelles il ne s'appelle pas JavaScript. L'une d'entre elles est la marque Java. Selon l'accord de licence, seul Netscape peut légalement utiliser le nom JavaScript, et JavaScript lui-même a été enregistré en tant que marque par Netscape. Deuxièmement, je veux montrer que le développeur de ce langage est ECMA, et non Netscape, ce qui contribuera à garantir l'ouverture et la neutralité de ce langage.

Par conséquent, la relation entre ECMAScript et JavaScript est que le premier est une spécification du second et que le second est une implémentation du premier.

La relation entre ES6 et ECMAScript 2015

Le terme ECMAScript 2015 (ES2015 en abrégé) est également souvent vu. Quel est le rapport avec ES6 ?

En 2011, après la sortie d'ECMAScript version 5.1, le développement de la version 6.0 a commencé. Par conséquent, la signification originale du mot ES6 fait référence à la prochaine version du langage JavaScript.

Cependant, parce que cette version introduit trop de fonctionnalités grammaticales et pendant le processus de développement, de nombreuses organisations et individus continuent de soumettre de nouvelles fonctionnalités. Il est rapidement devenu évident qu'il ne serait pas possible d'inclure toutes les fonctionnalités qui seraient introduites dans une seule version. L'approche conventionnelle consiste à publier d'abord la version 6.0, puis la version 6.1 après un certain temps, puis la version 6.2, la version 6.3, et ainsi de suite.

Le Comité des normes a finalement décidé que la norme serait officiellement publiée en juin de chaque année en tant que version officielle de cette année-là. Dans les temps suivants, des modifications seront apportées sur la base de cette version. Jusqu'en juin de l'année prochaine, le projet deviendra naturellement la version de la nouvelle année. De cette façon, le numéro de version précédente n’est pas nécessaire, juste le cachet de l’année.

Par conséquent, ES6 est à la fois un terme historique et un terme général. Il désigne le standard de nouvelle génération de JavaScript après la version 5.1, couvrant ES2015, ES2016, ES2017, etc., et ES2015 est le nom officiel, faisant spécifiquement référence à la version publiée. cette année-là. La version officielle de la norme linguistique.

ECMAScript Histoire de

En novembre 1996, Netscape a soumis Js à l'organisation internationale de normalisation ECMA, et le langage pourrait devenir une norme internationale.
En 1997, ECMAScript version 1.0 a été lancée. (Cette année, l'ECMA a publié la première version du document standard n° 262 (ECMA-262), qui stipulait la norme pour le langage de script de navigateur et appelait ce langage ECMAScript, qui est la version ES1.0.)
Juin 1998 En mars , ES version 2.0 est sortie.
En décembre 1999, la version 3.0 d'ES est sortie et est devenue la norme commune pour JS et a reçu un large soutien.
En octobre 2007, la version préliminaire 4.0 d'ES a été publiée.
En juillet 2008, en raison de trop de divergences entre les parties, ECMA décide de mettre fin au développement d'ES 4.0. Au lieu de cela, un petit ensemble d’améliorations des fonctionnalités existantes sera publié dans ES 3.1. Mais peu de temps après son retour, il a été renommé ES version 5.0
En décembre 2009, la version ES 5.0 a été officiellement publiée.

En juin 2011, la version 5.1 d'ES a été publiée et est devenue une norme internationale ISO (ISO/IEC 16262:2011).
En mars 2013, la version ES 6 a pris fin et aucune nouvelle fonctionnalité ne sera ajoutée.
En décembre 2013, la version ES 6 a été publiée.
En juin 2015, la version officielle d'ES 6 est sortie.

Désormais, une version officielle sortira en juin de chaque année, la dernière version est donc actuellement ES12 sortie en juin 2021.

Nouvelles fonctionnalités dans chaque version d'ECMAScript

Nouvelles fonctionnalités dans ES6

1, classe

ES6 introduit des classes, rendant la programmation orientée objet en JavaScript plus simple et plus facile à comprendre.

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

2. Modularisation

ES5 prend en charge la modularisation native et les modules sont ajoutés en tant que composant important dans ES6. Les fonctions du module consistent principalement en l'exportation et l'importation. Chaque module a sa propre portée distincte.La relation d'appel mutuel entre les modules consiste à spécifier l'interface exposée par le module via l'exportation et à référencer les interfaces fournies par d'autres modules via l'importation. Dans le même temps, un espace de noms est créé pour le module afin d'éviter les conflits de noms de fonctions.

export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

3. Fonction flèche

=> n'est pas seulement une abréviation de la fonction mot-clé, elle apporte également d'autres avantages. La fonction flèche partage la même chose avec le code qui l'entoure, ce qui peut vous aider à résoudre le problème de ce pointage. Par exemple, var self = this; ou var that = this est un modèle qui fait référence à ce qui l'entoure. Mais avec =>, ce modèle n'est plus nécessaire.

() => 1

v => v+1

(a,b) => a+b

() => {
  alert("foo");
}

e => {
  if (e == 0){
    return 0;
  }
  return 1000/e;
}

4. Chaîne de modèle

ES6 prend en charge les chaînes de modèle, ce qui rend l'épissage de chaînes plus concis et intuitif.

//不使用模板字符串
var name = 'Your name is ' + first + ' ' + last + '.'
//使用模板字符串
var name = `Your name is ${first} ${last}.`

Dans ES6, la concaténation de chaînes peut être effectuée via ${}, il suffit de mettre les variables entre accolades. ${}就可以完成字符串的拼接，只需要将变量放在大括号之中。

5、解构赋值

解构赋值语法是 JavaScript 的一种表达式，可以方便的从数组或者对象中快速提取值赋给定义的变量。

// 对象
const student = {
    name: 'Sam',
    age: 22,
    sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];

// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);

// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);

6、延展操作符

延展操作符…可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造对象时, 将对象表达式按 key-value 的方式展开。

//在函数调用时使用延展操作符
function sum(x, y, z) {
  return x + y + z
}
const numbers = [1, 2, 3]
console.log(sum(...numbers))

//数组
const stuendts = ['Jine', 'Tom']
const persons = ['Tony', ...stuendts, 'Aaron', 'Anna']
conslog.log(persions)

7、Promise

Promise 是异步编程的一种解决方案，比传统的解决方案 callback 更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

8、let 与 const

在之前 JS 是没有块级作用域的，const与 let 填补了这方便的空白，const与 let 都是块级作用域。

function f() {
  {
    let x;
    {
      // 正确
      const x = "sneaky";
      // 错误，常量const
      x = "foo";
    }
    // 错误，已经声明过的变量
    let x = "inner";
  }
}

ES7新增特性

1、Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。

[1, 2, 3].includes(-1)                   // false
[1, 2, 3].includes(1)                    // true
[1, 2, 3].includes(3, 4)                 // false
[1, 2, 3].includes(3, 3)                 // false
[1, 2, NaN].includes(NaN)                // true
['foo', 'bar', 'quux'].includes('foo')   // true
['foo', 'bar', 'quux'].includes('norf')  // false

2、指数操作符

在 ES7 中引入了指数运算符 **， **具有与 Math.pow(…)等效的计算结果。使用指数运算符 **，就像 +、- 等操作符一样。

//之前的版本
Math.pow(5, 2)

// ES7
5 ** 2
// 5 ** 2 === 5 * 5

ES8新增特性

1、async/await

异步函数返回一个AsyncFunction对象并通过事件循环异步操作。

const resolveAfter3Seconds = function() {
  console.log('starting 3 second promsise')
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(3)
      console.log('done in 3 seconds')  
    }, 3000)  
  })  
}

const resolveAfter1Second = function() {
  console.log('starting 1 second promise')
  return new Promise(resolve => {
      setTimeout(function() {
        resolve(1) 
        console.log('done, in 1 second') 
      }, 1000)
  })  
}

const sequentialStart = async function() {
  console.log('***SEQUENTIAL START***')
  const one = await resolveAfter1Second()
  const three = await resolveAfter3Seconds()

  console.log(one)
  console.log(three)
}

sequentialStart();

2、Object.values()

Object.values()是一个与 Object.keys()类似的新函数，但返回的是 Object 自身属性的所有值，不包括继承的值。

const obj = { a: 1, b: 2, c: 3 }
//不使用 Object.values()
const vals = Object.keys(obj).map((key) => obj[key])
console.log(vals)
//使用 Object.values()
const values = Object.values(obj1)
console.log(values)

从上述代码中可以看出 Object.values()

5. Affectation de déstructuration

La syntaxe d'affectation de déstructuration est une expression JavaScript qui peut facilement extraire des valeurs de tableaux ou d'objets et les affecter à des variables définies.

//不使用 Object.entries()
Object.keys(obj).forEach((key) => {
  console.log('key:' + key + ' value:' + obj[key])
})
//key:b value:2

//使用 Object.entries()
for (let [key, value] of Object.entries(obj1)) {
  console.log(`key: ${key} value:${value}`)
}
//key:b value:2

6. Opérateur d'extension

L'opérateur d'extension... peut développer des expressions de tableau ou des chaînes au niveau de la syntaxe lors des appels de fonction/de la construction de tableaux ; vous pouvez également développer des expressions d'objet par clé lors de la construction d'objets. forme de valeur.

console.log('0.0'.padStart(4, '10'))
console.log('0.0'.padStart(20))

console.log('0.0'.padEnd(4, '0'))
console.log('0.0'.padEnd(10, '0'))

7. Promise

Promise est une solution de programmation asynchrone, plus élégante que le rappel de solution traditionnel. Il a d'abord été proposé et implémenté par la communauté ES6 l'a écrit dans le standard de langage, a unifié son utilisation et a fourni les objets Promise de manière native.

let myObj = {
  property1: 'foo',
  property2: 'bar',
  property3: 42,
  property4: () => console.log('prop4')  
}

Object.getOwnPropertyDescriptors(myObj)

/*
{ property1: {…}, property2: {…}, property3: {…}, property4: {…} }
  property1: {value: "foo", writable: true, enumerable: true, configurable: true}
  property2: {value: "bar", writable: true, enumerable: true, configurable: true}
  property3: {value: 42, writable: true, enumerable: true, configurable: true}
  property4: {value: ƒ, writable: true, enumerable: true, configurable: true}
  __proto__: Object
*/

8. let et const
Avant, JS n'avait pas de portée au niveau du bloc et let comblait cette lacune pratique.

//如果在 async/await中使用循环中去调用异步函数，则不会正常执行
async function demo(arr) {
  for (let i of arr) {
    await handleDo(i);
  }
}

//ES9
async function demo(arr) {
  for await (let i of arr) {
    handleDo(i);
  }
}

Nouvelles fonctionnalités ES7

1. La fonction Array.prototype.includes()

includes() est utilisée pour déterminer si un tableau contient une valeur spécifiée. Si c'est le cas, elle renvoie true, sinon elle renvoie. FAUX.

function doSomething() {
  doSomething1()
    .then(doSomething2)
    .then(doSomething3)
    .catch((err) => {
      console.log(err)
    })
    .finally(() => {})
}

2. Opérateur exponentiel

Introduit dans ES7, l'opérateur exponentiel ** a des résultats de calcul équivalents à Math.pow(…). Utilisez l'opérateur d'exponentiation **, tout comme les opérateurs +, -, etc.

//Rest
let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"
rest; // {location: "Earth", type: "Human"}

//Spread
let info = {fname, lname, ...rest};
info; // { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" }

Nouvelles fonctionnalités ES8

1. async/await

La fonction asynchrone renvoie un objet AsyncFunction et fonctionne de manière asynchrone via la boucle d'événements.

let arr = ['a', 'b', ['c', 'd']];
let flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

arr = ['a', , , 'b', ['c', 'd']];
flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

arr = [10, [20, [30]]];

console.log(arr.flat());     // => [10, 20, [30]]
console.log(arr.flat(1));    // => [10, 20, [30]]
console.log(arr.flat(2));    // => [10, 20, 30]
console.log(arr.flat(Infinity));    // => [10, 20, 30]

2. Object.values()

Object.values() est une nouvelle fonction similaire à Object.keys(), mais renvoie toutes les valeurs des propres propriétés de l'objet, à l'exclusion des valeurs héritées.

const str = "   string   ";

console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

Comme le montre le code ci-dessus, Object.values() nous évite l'étape de parcourir les clés et d'obtenir une valeur basée sur ces clés.

3. Object.entries()

🎜🎜La fonction Object.entries() renvoie un tableau de paires clé-valeur des propriétés énumérables de l'objet donné lui-même. 🎜

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

🎜🎜4. String padding🎜🎜🎜Dans ES8, String a ajouté deux nouvelles fonctions d'instance, String.prototype.padStart et String.prototype.padEnd, permettant d'ajouter des chaînes vides ou d'autres chaînes au début de la chaîne d'origine. .ou la fin. 🎜

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"

🎜🎜5. Object.getOwnPropertyDescriptors()🎜🎜🎜La fonction Object.getOwnPropertyDescriptors() est utilisée pour obtenir les descripteurs de toutes ses propres propriétés d'un objet. S'il n'y a pas d'auto-propriétés, un objet vide est renvoyé. 🎜

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

🎜🎜Nouvelles fonctionnalités d'ES9🎜🎜🎜🎜🎜1. Itérateurs asynchrones🎜🎜🎜ES9 introduit des itérateurs asynchrones (itérateurs asynchrones), wait peut être utilisé avec des boucles for...of pour exécuter des opérations asynchrones de manière série. 🎜

const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
  console.log(values);
})
.catch(e=>{
  console.log(e);
});

🎜🎜2. Promise.finally()🎜🎜🎜Une chaîne d'appel Promise atteint avec succès le dernier .then() ou ne parvient pas à déclencher .catch(). Dans certains cas, vous souhaitez exécuter le même code, que la promesse s'exécute avec succès ou échoue, comme l'effacement, la suppression de la conversation, la fermeture de la connexion à la base de données, etc. 🎜🎜.finally() vous permet de spécifier la logique finale. 🎜

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

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

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

🎜🎜3. Attributs Rest/Spread🎜🎜🎜Rest : Les attributs restants de l'affectation de déstructuration d'objet. 🎜🎜Spread : attribut Spread de l'affectation de déstructuration d'objet. 🎜

const str = 'hello world';
str.replaceAll('l', ''); // "heo word"

🎜🎜Nouvelles fonctionnalités ES10🎜🎜🎜🎜1. La méthode flat() et la méthode flatMap()🎜🎜🎜flat() du tableau parcourront de manière récursive le tableau selon une profondeur spécifiable et parcourront tous les éléments jusqu'aux éléments du les sous-tableaux sont combinés dans un nouveau tableau et renvoyés. La méthode 🎜🎜flatMap() mappe d'abord chaque élément à l'aide d'une fonction de mappage, puis compresse le résultat dans un nouveau tableau. C'est presque identique à map et 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. 🎜

const money = 1_000_000_000;
//等价于
const money = 1000000000;

1_000_000_000 === 1000000000; // true

🎜🎜2. Méthode trimStart() et méthode trimEnd() de String🎜🎜

分别去除字符串首尾空白字符

const str = "   string   ";

console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

3、Object.fromEntries()

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

而 Object.fromEntries() 则是 Object.entries() 的反转，Object.fromEntries() 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

ES11新增特性

1、Promise.allSettled

Promise.all最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise 直接进入 reject 状态。

Promise.allSettled在并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务 value 或者 拒因 reason），在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"

2、String.prototype.matchAll

matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll出现之前，通过在循环中调用 regexp.exec来获取所有匹配项信息（regexp需使用 /g 标志)。如果使用 matchAll，就可以不必使用 while 循环加 exec 方式（且正则表达式需使用／g标志）。使用 matchAll会得到一个迭代器的返回值，配合 for…of, array spread, or Array.from() 可以更方便实现功能。

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

ES12新增特性

1、Promise.any

Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise。

const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
  console.log(values);
})
.catch(e=>{
  console.log(e);
});

2、逻辑运算符和赋值表达式

逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&=，||=，??=）。

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

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

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

3、replaceAll

返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉。

const str = 'hello world';
str.replaceAll('l', ''); // "heo word"

4、数字分隔符

数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性。

const money = 1_000_000_000;
//等价于
const money = 1000000000;

1_000_000_000 === 1000000000; // true

【相关推荐：javascript学习教程】

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