* Syntaxe ES6

Concepts liés à ES6 (★★)

Qu'est-ce que ES6

Le nom complet d'ES est ECMAScript, qui est une spécification de normalisation pour le langage de script développé par l'Organisation internationale de normalisation ECMA.

Pourquoi utiliser ES6?

Chaque fois que le standard est né, cela signifie la perfection du langage et le renforcement des fonctions. Il existe également des aspects insatisfaisants du langage JavaScript lui-même.

• La fonction de promotion variable augmente l'imprévisibilité de l'exécution du programme
• La grammaire est trop lâche, pour atteindre la même fonction, différentes personnes peuvent écrire des codes différents

Nouvelle syntaxe ES6

laissez （★★★）

Un nouveau mot-clé pour déclarer les variables a été ajouté à ES6

Les variables déclarées par let ne sont valides qu'au niveau du bloc

 if (true) {
    
     
     let a = 10;
 }
console.log(a) // a is not defined

** Remarque: ** Les variables déclarées avec le mot clé let ont une portée au niveau du bloc, et les variables déclarées avec var n'ont pas la fonctionnalité de portée au niveau du bloc.

Aucune promotion variable

console.log(a); // a is not defined 
let a = 20;

Zone morte temporaire

Les variables déclarées avec let seront liées à cette portée au niveau du bloc et ne seront pas affectées par le monde extérieur

 var tmp = 123;
 if (true) {
    
     
     tmp = 'abc';
     let tmp; 
 } 

Questions d'entrevue classiques

 var arr = [];
 for (var i = 0; i < 2; i++) {
    
    
     arr[i] = function () {
    
    
         console.log(i); 
     }
 }
 arr[0]();
 arr[1]();

** Illustration de la question d'entrevue classique: ** Le point clé de cette question est que la variable i est globale et que la sortie de la fonction est la valeur de i dans la portée globale lorsque la fonction est exécutée.

 let arr = [];
 for (let i = 0; i < 2; i++) {
    
    
     arr[i] = function () {
    
    
         console.log(i); 
     }
 }
 arr[0]();
 arr[1]();

** Illustration de la question d'entrevue classique: ** Le point clé de cette question est que chaque boucle générera une portée au niveau du bloc, les variables de chaque portée au niveau du bloc sont différentes et la sortie de la fonction est le niveau précédent lorsque le est exécutée. (Portée au niveau du bloc générée par la boucle) La valeur de i sous la portée.

résumé

• Le mot clé let est utilisé pour déclarer des variables
• Les variables déclarées avec le mot-clé let ont une portée au niveau du bloc
• La variable déclarée avec le mot-clé let entre accolades a une portée au niveau du bloc. Le mot-clé var ne possède pas cette fonctionnalité.
• Empêcher les variables de boucle de devenir des variables globales
• Les variables déclarées avec le mot clé let n'ont pas de promotion de variable
• Les variables déclarées avec le mot-clé let ont des caractéristiques de zone morte temporaire

const （★★★）

Déclarez une constante, une constante est la quantité que la valeur (adresse mémoire) ne peut pas changer

Portée au niveau du bloc

 if (true) {
    
     
     const a = 10;
 }
console.log(a) // a is not defined

Doit être affecté lors de la déclaration d'une constante

const PI; // Missing initializer in const declaration

Une fois la constante affectée, la valeur ne peut pas être modifiée

const PI = 3.14;
PI = 100; // Assignment to constant variable.

const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 
ary = ['a', 'b']; // Assignment to constant variable.

résumé

• La variable déclarée par const est une constante
• Puisqu'il s'agit d'une constante, elle ne peut pas être réaffectée. S'il s'agit d'un type de données de base, la valeur ne peut pas être modifiée. S'il s'agit d'un type de données complexe, la valeur d'adresse ne peut pas être modifiée.
• La valeur doit être donnée lors de la déclaration de const

La différence entre let, const et var

• La portée de la variable déclarée avec var est dans la fonction où se trouve l'instruction, et il y a un phénomène de promotion de variable
• La portée de la variable déclarée à l'aide de let est dans le bloc de code où se trouve l'instruction et il n'y a pas de promotion de variable
• Utilisez const pour déclarer une constante, et la valeur de la constante ne peut pas être modifiée dans le code qui apparaît plus tard

Mission de déconstruction (★★★)

ES6 permet d'extraire des valeurs de tableaux, d'attribuer des valeurs aux variables en fonction des positions correspondantes, et les objets peuvent également être déconstruits

Déstructuration du tableau

 let [a, b, c] = [1, 2, 3];
 console.log(a)//1
 console.log(b)//2
 console.log(c)//3
//如果解构不成功，变量的值为undefined

Déconstruction d'objets

 let person = {
    
     name: 'zhangsan', age: 20 }; 
 let {
    
     name, age } = person;
 console.log(name); // 'zhangsan' 
 console.log(age); // 20

 let {
    
    name: myName, age: myAge} = person; // myName myAge 属于别名
 console.log(myName); // 'zhangsan' 
 console.log(myAge); // 20

résumé

• L'affectation de destruction consiste à décomposer la structure de données, puis à attribuer une valeur à la variable
• Si la structure échoue et que la variable ne correspond pas au nombre de valeurs, la valeur de la variable n'est pas définie
• La déconstruction de tableau est encadrée par des crochets, plusieurs variables sont séparées par des virgules, la déconstruction d'objet est encadrée par des accolades et plusieurs variables sont séparées par des virgules.
• L'utilisation de l'affectation de déstructuration nous permet d'obtenir facilement les attributs et les méthodes de l'objet

Fonction flèche (★★★)

La nouvelle façon de définir les fonctions dans ES6.

() => {
    
    } //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体
const fn = () => {
    
    }//代表把一个函数赋值给fn

Il n'y a qu'une seule ligne de code dans le corps de la fonction, et le résultat de l'exécution du code est la valeur de retour, les accolades peuvent être omises

 function sum(num1, num2) {
    
     
     return num1 + num2; 
 }
 //es6写法
 const sum = (num1, num2) => num1 + num2; 

S'il n'y a qu'un seul paramètre formel, les parenthèses peuvent être omises

 function fn (v) {
    
    
     return v;
 } 
//es6写法
 const fn = v => v;

La fonction flèche n'est pas liée au mot-clé this, la fonction this dans la flèche pointe vers le contexte this de l'emplacement de la définition de la fonction

const obj = {
    
     name: '张三'} 
 function fn () {
    
     
     console.log(this);//this 指向 是obj对象
     return () => {
    
     
         console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
     } 
 } 
 const resFn = fn.call(obj); 
 resFn();

résumé

• Ce point n'est pas lié à la fonction de flèche. Le point de la fonction de flèche est la position définie par celle-ci. Il peut être simplement compris comme la définition de la portée de la fonction de flèche. Cela pointe vers qui il pointe.
• L'avantage de la fonction flèche est qu'elle résout certains des problèmes causés par cet environnement d'exécution. Par exemple: résoudre le problème de la fonction anonyme ce pointage (l'environnement d'exécution de la fonction anonyme est global), y compris les problèmes causés par son utilisation dans setTimeout et setInterval

Questions d'entrevue

var age = 100;

var obj = {
    
    
	age: 20,
	say: () => {
    
    
		alert(this.age)
	}
}

obj.say();//箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域

Paramètres restants (★★)

La syntaxe des paramètres restants nous permet de représenter un nombre indéfini de paramètres sous forme de tableau, méthode de définition de paramètre indéfini, cette méthode est très pratique pour déclarer une fonction sans connaître les paramètres

function sum (first, ...args) {
    
    
     console.log(first); // 10
     console.log(args); // [20, 30] 
 }
 sum(10, 20, 30)

Utilisez les paramètres restants et la déconstruction ensemble

let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students; 
console.log(s1);  // 'wangwu' 
console.log(s2);  // ['zhangsan', 'lisi']

Extension d'objet intégrée à ES6

Méthode d'extension de tableau (★★)

Opérateur d'expansion (syntaxe d'expansion)

L'opérateur d'étalement peut convertir un tableau ou un objet en une séquence de paramètres séparés par des virgules

 let ary = [1, 2, 3];
 ...ary  // 1, 2, 3
 console.log(...ary);    // 1 2 3,相当于下面的代码
 console.log(1,2,3);

L'opérateur de diffusion peut être appliqué aux tableaux fusionnés

// 方法一 
 let ary1 = [1, 2, 3];
 let ary2 = [3, 4, 5];
 let ary3 = [...ary1, ...ary2];
 // 方法二 
 ary1.push(...ary2);

Convertir un objet de type tableau ou traversable en un véritable tableau

let oDivs = document.getElementsByTagName('div'); 
oDivs = [...oDivs];

Méthode constructeur: Array.from ()

Convertir des pseudo tableaux ou des objets traversables en tableaux réels

//定义一个集合
let arrayLike = {
    
    
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}; 
//转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

La méthode peut également accepter un deuxième paramètre, qui est similaire à la méthode map d'un tableau, qui est utilisé pour traiter chaque élément et mettre la valeur traitée dans le tableau retourné

 let arrayLike = {
    
     
     "0": 1,
     "1": 2,
     "length": 2
 }
 let newAry = Array.from(arrayLike, item => item *2)//[2,4]

Remarque: s'il s'agit d'un objet, l'attribut doit écrire l'index correspondant

Exemple de méthode: find ()

Utilisé pour trouver le premier membre qualifié du tableau, s'il n'est pas trouvé, retourne undefined

let ary = [{
    
    
     id: 1,
     name: '张三'
 }, {
    
     
     id: 2,
     name: '李四'
 }]; 
 let target = ary.find((item, index) => item.id == 2);//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个

Méthode d'instance: findIndex ()

Utilisé pour trouver la position du premier membre qualifié du tableau, s'il n'est pas trouvé, renvoie -1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2

Exemple de méthode: includes ()

Déterminez si un tableau contient une valeur donnée et renvoie une valeur booléenne.

[1, 2, 3].includes(2) // true 
[1, 2, 3].includes(4) // false

Méthodes d'extension de String

Chaîne de modèle (★★★)

La nouvelle façon d'ES6 de créer des chaînes, en utilisant des backticks pour définir

let name = `zhangsan`;

Les variables peuvent être analysées dans la chaîne de modèle

let name = '张三'; 
let sayHello = `hello,my name is ${
      
      name}`; // hello, my name is zhangsan

Sauts de ligne dans la chaîne de modèle

 let result = {
    
     
     name: 'zhangsan', 
     age: 20,
     sex: '男' 
 } 
 let html = ` <div>
     <span>${
      
      result.name}</span>
     <span>${
      
      result.age}</span>
     <span>${
      
      result.sex}</span>
 </div> `;

Les fonctions peuvent être appelées dans la chaîne de modèle

const sayHello = function () {
    
     
    return '哈哈哈哈 追不到我吧 我就是这么强大';
 }; 
 let greet = `${
      
      sayHello()} 哈哈哈哈`;
 console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

Exemples de méthodes: startsWith () et endsWith ()

• startsWith (): indique si la chaîne de paramètres est en tête de la chaîne d'origine, et renvoie une valeur booléenne
• endsWith (): indique si la chaîne de paramètres est à la fin de la chaîne d'origine et renvoie une valeur booléenne

let str = 'Hello world!';
str.startsWith('Hello') // true 
str.endsWith('!')       // true

Exemple de méthode: repeat ()

La méthode de répétition signifie répéter la chaîne d'origine n fois et renvoyer une nouvelle chaîne

'x'.repeat(3)      // "xxx" 
'hello'.repeat(2)  // "hellohello"

Définir la structure des données (★★)

ES6 fournit un nouvel ensemble de structures de données. Il est similaire à un tableau, mais les valeurs des membres sont uniques et il n'y a pas de valeurs en double.

Set lui-même est un constructeur, utilisé pour générer la structure de données Set

const s = new Set();

La fonction Set peut accepter un tableau comme paramètre d'initialisation.

const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}

Méthode d'instance

• add (value): ajoute une valeur et renvoie la structure Set elle-même
• delete (valeur): supprime une valeur, renvoie une valeur booléenne, indiquant si la suppression est réussie
• has (value): renvoie une valeur booléenne indiquant si la valeur est membre de Set
• clear (): efface tous les membres, aucune valeur de retour

 const s = new Set();
 s.add(1).add(2).add(3); // 向 set 结构中添加值 
 s.delete(2)             // 删除 set 结构中的2值   
 s.has(1)                // 表示 set 结构中是否有1这个值 返回布尔值 
 s.clear()               // 清除 set 结构中的所有值
 //注意：删除的是元素的值，不是代表的索引

traverser

L'instance de la structure Set, comme un tableau, a également une méthode forEach, qui est utilisée pour effectuer certaines opérations sur chaque membre sans valeur de retour.

s.forEach(value => console.log(value))