1. Introduction à ECMAScript

1. Qu'est-ce que l'ECMA

Le nom chinois de l'ECMA (European Computer Manufacturers Association) est l'
Association européenne des fabricants d'ordinateurs Cette organisation a pour but d'évaluer, de développer et d'approuver les normes de télécommunications et d'informatique. Après 1994, l'
organisation a changé son nom pour Ecma International

2. Qu'est-ce qu'ECMAScript

ECMAScript est un langage de programmation de script normalisé par Ecma International via ECMA-262.

3. Qu'est-ce que l'ECMA-262

Ecma International a développé de nombreuses normes, et ECMA-262 n'est que l'une d'entre elles. Pour une liste de toutes les normes, voir
http://www.ecma-international.org/publications/standards/Standard.htm

4. Pourquoi apprendre ES6

La version ES6 a le plus de changements et est une étape importante
ES6 ajoute de nombreuses nouvelles fonctionnalités grammaticales, rendant la programmation plus simple et plus efficace
ES6 est la tendance de développement front-end, les compétences nécessaires à l'emploi

2. Nouvelles fonctionnalités d'ECMAScript 6

1. laissez le mot-clé

Le mot-clé let permet de déclarer des variables. Les variables déclarées avec let ont plusieurs caractéristiques :

Déclaration en double non autorisée

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

portée de bloc

       {
    
    
  let a = 0;
  var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1

le levage variable n'existe pas

console.log(song);// ReferenceError: Cannot access 'song' before initialization
let song = '恋爱达人';

n'affecte pas la chaîne de portée

 {
    
    
            let school = 'baicaotang';
            function fn(){
    
    
                console.log(school);
            }
            fn();//baicaotang
        }

Scénario d'application : Il est correct d'utiliser let pour déclarer des variables dans le futur

2. Le mot clé const

Le mot clé const est utilisé pour déclarer des constantes, les déclarations const ont les caractéristiques suivantes

déclaration doit affecter une valeur initiale

const a;// SyntaxError: Missing initializer in const declaration

Les identifiants sont généralement en majuscules

const PI = "3.1415926";

Déclaration en double non autorisée

const a=1;
const a=2;
//SyntaxError: Identifier 'a' has already been declared

La valeur n'autorise pas la modification

const SCHOOL = 'baicaotang';
SCHOOL = 'ATGUIGU';
//TypeError: Assignment to constant variable.

portée de bloc

{
    
    
            const PLAYER = 'UZI';
        }
        console.log(PLAYER);
        //ReferenceError: PLAYER is not defined

Remarque : La modification des propriétés de l'objet et le changement des éléments du tableau ne déclencheront pas les scénarios d'application d'erreur const : déclarez les types d'objet à l'aide de const et sélectionnez let pour les déclarations de type non objet

3. Mission de déconstruction variable

ES6 permet d'extraire des valeurs de tableaux et d'objets et d'attribuer des valeurs à des variables selon un certain modèle, appelé
affectation déstructurante.

1. Affectation de déstructuration de tableau

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

2. Affectation de la structure d'objet

let {
    
    a = 10, b = 5} = {
    
    a: 3};
// a = 3; b = 5;
let {
    
    a: aa = 10, b: bb = 5} = {
    
    a: 3};
// aa = 3; bb = 5;

Remarque : Si vous utilisez fréquemment des méthodes objet et des éléments de tableau, vous pouvez utiliser le formulaire d'affectation de déstructuration

4. Chaîne

1. Identification des chaînes de méthode étendues

ES6 a utilisé la méthode indexOf pour déterminer si une chaîne contient des sous-chaînes. ES6 a ajouté une méthode d'identification des sous-chaînes.

includes() : renvoie une valeur booléenne pour déterminer si la chaîne de paramètres est trouvée.
startsWith() : renvoie une valeur booléenne pour déterminer si la chaîne de paramètres se trouve en tête de la chaîne d'origine.
endsWith() : renvoie une valeur booléenne pour déterminer si la chaîne de paramètres se trouve à la fin de la chaîne d'origine.

Les trois méthodes ci-dessus peuvent accepter deux paramètres, la chaîne à rechercher et un index de position de départ de recherche facultatif.

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true

2. Répétition de cordes

repeat() : renvoie une nouvelle chaîne, indiquant que la chaîne est répétée le nombre de fois spécifié.

console.log("Hello,".repeat(2));  // "Hello,Hello,"

3. Achèvement de chaîne

padStart : renvoie une nouvelle chaîne, indiquant que la chaîne d'origine est complétée à partir de la tête (côté gauche) avec la chaîne de paramètres.
padEnd : renvoie une nouvelle chaîne, indiquant que la chaîne d'origine est complétée à partir de la fin (côté droit) avec la chaîne de paramètres.

Les deux méthodes ci-dessus acceptent deux paramètres, le premier paramètre spécifie la longueur minimale de la chaîne générée et le second paramètre est la chaîne utilisée pour l'achèvement. Si le deuxième paramètre n'est pas spécifié, il sera rempli de blancs par défaut.

console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // "    h"

4. Chaînes de modèles

La chaîne de modèle (chaîne de modèle) est une version améliorée de la chaîne, identifiée par des backticks (`), fonctionnalités :

Les caractères de saut de ligne peuvent apparaître dans la chaîne

let str = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                    <li>魏翔</li>
                    <li>艾伦</li>
                    </ul>`;

Les variables peuvent être sorties sous la forme ${xxx}

 let lovest = '魏翔';
        let out = `${
      
      lovest}是我心目中最搞笑的演员!!`;
        console.log(out);

Remarque : Utilisez des chaînes de modèle lorsque des chaînes et des variables sont concaténées

5. Modèle d'étiquette

Un modèle balisé est un appel de fonction où l'argument de l'appel est une chaîne de modèle.

alert`Hello world!`;
// 等价于
alert('Hello world!');

5.Symbole

ES6 introduit un nouveau type de données primitif Symbol, qui représente une valeur unique. La plus grande utilisation est de définir le nom de propriété unique d'un objet.

En plus de Number, String, Boolean, Object, null et undefined, les types de données ES6 ajoutent également Symbol.
Caractéristiques des symboles

La valeur de Symbol est unique pour résoudre les conflits de nommage
Les valeurs de symbole ne peuvent pas être manipulées avec d'autres données
Les propriétés d'objet définies par Symbol ne peuvent pas être parcourues à l'aide de la boucle for...in, mais vous pouvez utiliser
Reflect.ownKeys pour obtenir tous les noms de clé de l'objet.

//创建 Symbol
let s1 = Symbol();
console.log(s1, typeof s1);
//添加标识的 Symbol
let s2 = Symbol('baicaotang');
let s2_2 = Symbol('baicaotang');
console.log(s2 === s2_2);
//使用 Symbol for 定义
let s3 = Symbol.for('baicaotang');
let s3_2 = Symbol.for('baicaotang');
console.log(s3 === s3_2);
let sy = Symbol("key1");
//作为属性名 
// 写法1
let syObject = {
    
    };
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法2
let syObject = {
    
    
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法3
let syObject = {
    
    };
Object.defineProperty(syObject, sy, {
    
    value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

Remarque : lorsque vous rencontrez un scénario unique, Symbol doit être pris en compte. Lorsque la valeur Symbol est utilisée comme nom de propriété, la propriété est une propriété publique plutôt qu'une propriété privée et est accessible en dehors de la classe. Mais il n'apparaîtra pas dans les boucles for…in, for…of, ni ne sera renvoyé par Object.keys(), Object.getOwnPropertyNames(). Si vous souhaitez lire la propriété Symbol d'un objet, vous pouvez l'obtenir via Object.getOwnPropertySymbols() et Reflect.ownKeys().

Valeur intégrée du symbole

En plus de définir la valeur de symbole utilisée par elle-même, ES6 fournit également 11 valeurs de symbole intégrées, qui pointent vers les méthodes utilisées en interne par le langage. Ces méthodes peuvent être appelées méthodes magiques, car elles seront exécutées automatiquement dans certains scénarios.

documents de référence

6.Carte et ensemble

1 jeu

ES6 fournit une nouvelle structure de données Set (collection). Il est similaire à un tableau, mais les valeurs de ses membres sont toutes uniques
. La collection implémente l'interface de l'itérateur, de sorte qu'elle peut être parcourue à l'aide de "l'opérateur d'extension" et "pour... de...".
propriétés et méthodes de la collection :

size renvoie le nombre d'éléments dans la collection
add ajoute un nouvel élément et renvoie la collection actuelle
delete supprime un élément et renvoie une valeur booléenne
a vérifie si la collection contient un élément et renvoie une valeur booléenne
clear efface la collection et renvoie undefined

//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());

2.Carte

ES6 fournit la structure de données Map. Il est similaire à un objet et est également une collection de paires clé-valeur. Mais la portée de "clé"
n'est pas limitée aux chaînes, et divers types de valeurs (y compris des objets) peuvent être utilisées comme clés. Map implémente également
l'interface de l'itérateur, de sorte qu'il peut être parcouru à l'aide de "spread operator" et "for...of...".
Propriétés et méthodes de Map :

size renvoie le nombre d'éléments dans la Map
set ajoute un nouvel élément et renvoie la carte actuelle
get renvoie la valeur clé de l'objet clé
a détecte si un élément est contenu dans la Map et renvoie une valeur booléenne
clear efface la collection et renvoie undefined

//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
 ['name','baicaotang'],
 ['slogon','不断提高']
]);
//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());

7. Expansion numérique

1. Binaire et octal

ES6 fournit une nouvelle façon d'écrire les valeurs binaires et octales, qui sont représentées respectivement par les préfixes 0b et 0o.

//二进制
console.log(0b11 === 3); // true
console.log(0B11 === 3); // true
//八进制
console.log(0o11 === 9); // true
console.log(0O11 === 9); // true

2. Number.isFinite() 与 Number.isNaN()

Number.isFinite() est utilisé pour vérifier si une valeur est finie

console.log( Number.isFinite(1));   // true
console.log( Number.isFinite(0.1)); // true
// NaN 不是有限的
console.log( Number.isFinite(NaN)); // false
 
console.log( Number.isFinite(Infinity));  // false
console.log( Number.isFinite(-Infinity)); // false
 
// Number.isFinate 没有隐式的 Number() 类型转换，所有非数值都返回 false
console.log( Number.isFinite('foo')); // false
console.log( Number.isFinite('15'));  // false
console.log( Number.isFinite(true));  // false

Number.isNaN() est utilisé pour vérifier si une valeur est NaN

console.log(Number.isNaN(NaN));      // true
console.log(Number.isNaN('true'/0)); // true
 
// 在全局的 isNaN() 中，以下皆返回 true，因为在判断前会将非数值向数值转换
// 而 Number.isNaN() 不存在隐式的 Number() 类型转换，非 NaN 全部返回 false
Number.isNaN("NaN");      // false
Number.isNaN(undefined);  // false
Number.isNaN({
    
    });         // false
Number.isNaN("true");     // false

3. Number.parseInt() et Number.parseFloat()

ES6 transplante les méthodes globales parseInt et parseFloat dans l'objet Number et les utilise telles quelles.

// 不指定进制时默认为 10 进制
Number.parseInt('12.34'); // 12
Number.parseInt(12.34);   // 12
 
// 指定进制
Number.parseInt('0011',2); // 3
 
// 与全局的 parseInt() 函数是同一个函数
Number.parseInt === parseInt; // true
Number.parseFloat()
用于把一个字符串解析成浮点数。
Number.parseFloat('123.45')    // 123.45
Number.parseFloat('123.45abc') // 123.45
 
// 无法被解析成浮点数，则返回 NaN
Number.parseFloat('abc') // NaN
 
// 与全局的 parseFloat() 方法是同一个方法
Number.parseFloat === parseFloat // true

4. Math.trunc

Utilisé pour supprimer la partie fractionnaire d'un nombre et renvoyer la partie entière.

Math.trunc(12.3); // 12
Math.trunc(12);   // 12
 
// 整数部分为 0 时也会判断符号
Math.trunc(-0.5); // -0
Math.trunc(0.5);  // 0
 
// Math.trunc 会将非数值转为数值再进行处理
Math.trunc("12.3"); // 12
 
// 空值或无法转化为数值时时返回 NaN
Math.trunc();           // NaN
Math.trunc(NaN);        // NaN
Math.trunc("hhh");      // NaN
Math.trunc("123.2hhh"); // NaN

5. Number.isInteger

Number.isInteger() est utilisé pour déterminer si une valeur est un entier

Number.isInteger(value)
Number.isInteger(0); // true
// JavaScript 内部，整数和浮点数采用的是同样的储存方法,因此 1 与 1.0 被视为相同的值
Number.isInteger(1);   // true
Number.isInteger(1.0); // true
 
Number.isInteger(1.1);     // false
Number.isInteger(Math.PI); // false
 
// NaN 和正负 Infinity 不是整数
Number.isInteger(NaN);       // false
Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false
 
Number.isInteger("10");  // false
Number.isInteger(true);  // false
Number.isInteger(false); // false
Number.isInteger([1]);   // false
 
// 数值的精度超过 53 个二进制位时，由于第 54 位及后面的位被丢弃，会产生误判
Number.isInteger(1.0000000000000001) // true
 
// 一个数值的绝对值小于 Number.MIN_VALUE（5E-324），即小于 JavaScript 能够分辨
// 的最小值，会被自动转为 0，也会产生误判
Number.isInteger(5E-324); // false
Number.isInteger(5E-325); // true
Number.isSafeInteger()
//用于判断数值是否在安全范围内。
Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1); // false
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1); // false

Documents de référence : Tutoriel Rookie
Ouvrages de référence : Tutoriel Ruan Yifeng

Un bref résumé de ES6