Introduction aux nouvelles fonctionnalités d'ECMAScript 6

introduction

ECMAScript 6.0 (ci-après dénommé ES6) est le standard de nouvelle génération du langage JavaScript, officiellement publié en juin 2015. Son objectif est de faire en sorte que le langage JavaScript puisse être utilisé pour écrire des applications complexes à grande échelle et devenir un langage de développement au niveau de l'entreprise.

Aujourd'hui, nous allons expliquer les nouvelles fonctionnalités de syntaxe introduites dans ES6.

La relation entre ECMAScript et JavaScript

En novembre 1996, Netscape, le créateur de JavaScript, a décidé de soumettre JavaScript à l'ECMA, l'Organisation internationale de normalisation.

En 1997, l'ECMA a publié le 262 document standard ECMAScript 1.0.

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

Jetons un coup d'œil à l'historique des versions d'ECMAScript:

Depuis la sortie de ES2015, c'est-à-dire ES6 en 2015, ECMAScript a été publié dans ES2020 à un taux de publication d'une version par an.

Des articles ultérieurs nous expliquerons les nouvelles fonctionnalités de ces nouvelles versions d'ECMAScript.

let et const

ES6 a introduit let et const pour résoudre les divers problèmes de variables var avant.

Avant ES6, la portée des variables dans JS avait deux types: la portée globale et la portée de la fonction.

La portée globale est bien comprise. Lorsque nous commençons à écrire du JavaScript dans la console du navigateur ou le terminal interactif Node.js, nous entrons dans la portée dite globale.

Les variables de la portée globale sont accessibles dans n'importe quelle autre portée.

La portée de la fonction est la variable définie dans la fonction, accessible à l'intérieur de la fonction.

Il y a quelques problèmes avec ces deux portées:

1. Promotion variable

La commande var aura un phénomène de "promotion de variable", c'est-à-dire que la variable peut être utilisée avant la déclaration et que la valeur n'est pas définie.

// var 的情况 
console.log(foo);  // 输出undefined 
var foo = 2; 

2. Couverture variable

Lorsque nous utilisons des variables globales dans la portée de la fonction, si une variable du même nom est définie dans la portée de la fonction, peu importe où elle est définie, la variable globale sera écrasée. Comme suit:

var tmp = new Date(); 
function f() {
    
     
console.log(tmp); 
if (false) {
    
     var tmp = "hello world"; 
} } 
f(); // undefined

3. Divulgation variable

La divulgation des variables signifie que nous ne voulions utiliser les variables que dans une petite portée, mais le résultat a été divulgué en dehors de la portée, comme indiqué ci-dessous:

var s = 'hello'; 
for (var i = 0; i < s.length; i++) {
    
     
console.log(s[i]); 
} 
console.log(i); // 5
~~

为了解决上面两个问题，ES6引入了let和const。

这两个都是块级作用域。不同的是const定义的变量初始化之后就不能变化了。

什么是块级作用域呢？类似于 if、switch 条件选择或者 for、while 这样的循环体即是所谓的块级作用域,或者更简单一点使用大括号括起来的就叫做块级作用域。

块级作用域的最大好处就是不会产生作用域提升，如下所示：

~~~js
{
    
     
let a = 10; 
var b = 1; 
} 
a // ReferenceError: a is not defined. 
b // 1

Mission de destruction

Qu'est-ce que la mission de déstructuration?

ES6 vous permet d'extraire des valeurs de tableaux et d'objets et d'affecter des valeurs à des variables selon un certain modèle, appelé déstructuration.

Comme suit:

let [a, b, c] = [1, 2, 3];
let [ , , third] = ["foo", "bar", "baz"];
let [x, , y] = [1, 2, 3];
let [head, ...tail] = [1, 2, 3, 4];

let [x, y] = [1, 2, 3];

L'affectation de destruction peut également définir des valeurs par défaut. Examinons les exemples suivants:

let [foo = true] = []; 
foo // true

let [x, y = 'b'] = ['a']; 
// x='a', y='b' 

let [x, y = 'b'] = ['a', undefined]; 
// x='a', y='b’

let [x = 1] = [undefined]; 
x // 1
let [x = 1] = [null]; 
x // null

Si la valeur par défaut de la déstructuration est une fonction, l'affectation différée peut être déclenchée:

function f() {
    
     
console.log('aaa'); 
} 

let [x = f()] = [1];

Dans l'exemple ci-dessus, la fonction f ne sera pas exécutée.

En plus des variables de structure, vous pouvez également structurer des objets:

let {
    
     bar, foo } = {
    
     foo: "aaa", bar: "bbb" }; 
foo // "aaa" 
bar // "bbb" 

let {
    
     baz } = {
    
     foo: "aaa", bar: "bbb" }; 
baz // undefined

var {
    
     foo: baz } = {
    
     foo: 'aaa', bar: 'bbb' }; 
baz // "aaa" 

let obj = {
    
     first: 'hello', last: 'world' }; 
let {
    
     first: f, last: l } = obj; 
f // 'hello' 
l // 'world'

La déstructuration prend également en charge les structures imbriquées:

let obj = {
    
     p: [ 'Hello', {
    
     y: 'World' } ] }; 

let {
    
     p: [x, {
    
     y }] } = obj; 

x // "Hello" 
y // "World"

La mission de destruction a deux fonctions très importantes.

La première consiste à échanger des variables:

let x = 1; 
let y = 2; 
[x, y] = [y, x];

On ne peut plus utiliser de variables intermédiaires et interagir directement avec les valeurs des deux variables.

Le deuxième rôle est de renvoyer plusieurs valeurs de la fonction:

// 返回一个数组 
function example() {
    
     return [1, 2, 3]; } 
let [a, b, c] = example(); 

// 返回一个对象 
function example() {
    
     return {
    
     foo: 1, bar: 2 }; } 
let {
    
     foo, bar } = example();

//提取JSON数据
let jsonData = {
    
     id: 42, status: "OK", data: [867, 5309] }; 
let {
    
     id, status, data: number } = jsonData;

Extension de baie

La méthode Array.from dans ES6 est utilisée pour convertir les deux types d'objets suivants en tableaux réels:

• Objet de type tableau
• Objets itérables (y compris les nouveaux ensembles de structures de données et la carte d'ES6).

Qu'est-ce qu'un objet de type tableau?

Les objets dits de type tableau n'ont qu'une seule caractéristique essentielle, c'est-à-dire qu'ils doivent avoir un attribut de longueur. Par conséquent, tout objet avec une propriété length peut être converti en tableau via la méthode Array.from.

Les variables suivantes sont des variables de type tableau:

let arrayLike = {
    
     '0': 'a', '1': 'b', '2': 'c', length: 3 }; 

Comment convertir cet objet de type tableau en un tableau?

// ES5的写法 
var arr1 = [].slice.call(arrayLike); 
// ['a', 'b', 'c']

// ES6的写法 let arr2 = Array.from(arrayLike); 
// ['a', 'b', 'c']

Regardons les scénarios d'utilisation habituels:

// NodeList对象 
let ps = document.querySelectorAll('p'); 
Array.from(ps).forEach(function (p) {
    
     console.log(p); }); 

// arguments对象 
function foo() {
    
     var args = Array.from(arguments); 
// ... 
}

Qu'est-ce qu'un objet traversable?

Tant qu'il s'agit d'une structure de données déployée avec l'interface Iterator, on l'appelle un objet traversable.

Regardons l'exemple suivant:

Array.from('hello') // ['h', 'e', 'l', 'l', 'o'] 
let namesSet = new Set(['a', 'b']) 
Array.from(namesSet) // ['a', 'b']

En même temps, l'opérateur d'étalement (...) est également introduit. Grâce à l'opérateur d'étalement, il peut également être facilement converti en un objet de tableau:

function foo() {
    
     var args = [...arguments]; } // arguments对象 
[...document.querySelectorAll('div')] // NodeList对象 

La méthode Array.from peut également recevoir un deuxième paramètre pour agir sur les éléments du tableau:

Array.from(arrayLike, x => x * x); 
// 等同于 
Array.from(arrayLike).map(x => x * x); 

Array.from([1, 2, 3], (x) => x * x) 
// [1, 4, 9]

La méthode Array.of peut facilement créer un nouveau tableau:

Array.of(3, 11, 8) // [3,11,8] 
Array.of(3) // [3] 
Array.of(3).length // 1

Array() // [] 
Array(3) // [, , ,] 
Array(3, 11, 8) // [3, 11, 8]

Extension de fonction

ES6, peut prendre en charge la valeur par défaut de la fonction:

function log(x, y = 'World') {
    
     console.log(x, y); } 
function Point(x = 0, y = 0) {
    
     this.x = x; this.y = y; }

La valeur par défaut de la fonction peut être combinée avec la valeur par défaut de l'affectation de déstructuration:

function foo({
    
    x, y = 5}) {
    
     console.log(x, y); } 
foo({
    
    }) // undefined, 5 
foo({
    
    x: 1}) // 1, 5 
foo({
    
    x: 1, y: 2}) // 1, 2 
foo() // TypeError: Cannot read property 'x' of undefined

Ensuite, regardons un exemple complexe:

// 写法一 
function m1({
    
    x = 0, y = 0} = {
    
    }) 
{
    
     return [x, y]; } 

// 写法二 
function m2({
    
    x, y} = {
    
     x: 0, y: 0 }) 
{
    
     return [x, y]; }

Jetons un coup d'œil, quelle est la différence entre les deux méthodes d'écriture ci-dessus?

Lorsque la fonction n'a pas de paramètres:

m1() // [0, 0] 
m2() // [0, 0] 

Lorsque x et y ont des valeurs:

m1({
    
    x: 3, y: 8}) // [3, 8] 
m2({
    
    x: 3, y: 8}) // [3, 8] 

Lorsque x a une valeur, y n'a aucune valeur:

m1({
    
    x: 3}) // [3, 0] 
m2({
    
    x: 3}) // [3, undefined] 

Lorsque x et y n'ont aucune valeur:

m1({
    
    }) // [0, 0]; 
m2({
    
    }) // [undefined, undefined] 
m1({
    
    z: 3}) // [0, 0] 
m2({
    
    z: 3}) // [undefined, undefined]

Voyez-vous la différence? L'affectation de déstructuration de m1 a une valeur par défaut de 0 pour x et y. L'affectation de déstructuration de m2 n'a pas de valeur par défaut pour x et y.

Auteur: flydean programme ces choses

Lien vers cet article: http://www.flydean.com/ecmascript-6-startup/

Source de cet article: le blog de flydean

Bienvenue à faire attention à mon compte officiel: l'interprétation la plus populaire des "programmes", les produits secs les plus profonds, les tutoriels les plus concis, et de nombreux conseils que vous ne connaissez pas vous attendent!