Caractéristiques importantes de l'ES6

Ruan Yifeng ES6

1. Soit: utilisé pour déclarer des variables ordinaires

• Déclaration en double: les variables portant le même nom ne peuvent pas être déclarées dans la même portée.

• Portée du bloc: valide dans la portée du bloc.

• Promotion variable: pas de prétraitement, pas de promotion variable.

  var type1 = 'var1';
  console.log(type1);
  var type1 = "var2";
  console.log(type1);
let type2 = 'let1';
console.log(type2);
// 下面两行代码注释运行结果为图1，不注释结果为图二。
//  let type2 = "let2";
//  console.log(type2);

Two.const: utilisé pour déclarer des constantes

3. Déconstruction et affectation de variables: déclarez rapidement plusieurs variables / paramètres

  // 1.对象的解构赋值
let user = {
    
    username:"admin",password:"12345",id:"99"};
let {
    
    username,password} = user;
  console.log(username,password);
  // 2.数组的解构赋值
let arr = [0,1,2,3,4,5,6];
let [,ele1,,,ele4] = arr;//注意这里是用中括号不是大括号。
  console.log(ele1,ele4);
  // 3.定义形参的解构赋值
  function fn({
    
    username,password}){
    
    
    console.log(username,password);
  }
  fn(user);

4. Chaînes de modèle: simplifier l'épissage de chaînes

let word = 'admin';
  let pageId = '99';
  let url = `https:www.xxx.com/find?word=${word}&pageId=${pageId}`
  console.log(url);

V. Raccourci pour les objets

• Abrégé sur la propriété
• Sténographie de la méthode

let username = "admin";
let password = '123456';
  let obj = {
    username:username,// 普通属性
    password,// 简写属性
    getUsername: function () {// 普通方法
      return this.username;
    },
    getPassword(){// 简写方法
      return this.password;
    }
  };
  console.log(obj.getUsername(),obj.getPassword());

6. Fonctions fléchées: définissez les fonctions anonymes, couramment utilisées dans la définition des fonctions de rappel

• Fonction anonyme
• ceci indique: il n'y a pas de ceci lui-même, ceci dans la fonction de flèche pointe vers l'objet hôte où se trouve la définition.
• Rédaction concise

    //1.箭头函数的形式
let fn1 =function(param){
    console.log(param);
};
let fn2 = ()=>console.log('no param');// 无参
let fn3 = param => console.log(param);// 单参
let fn4 = (param1,param2)=>console.log(param1+param2);// 多参
let fn5 = (param1,param2)=>{console.log(param1);console.log(param2);return param1+param2;};
fn1("plain fn");
    fn2();
    fn3('one param');
    fn4('param1','param2');
    fn5('param1','param2');
// 2.箭头函数的this指向
   let obj = {
       name:"张三",
       fn1(){
           console.log(this);
       },
       fn2:()=>{
               console.log(this);
           }
   }
    obj.fn1();
    obj.fn2();

Sept ... opérateur

• paramètres de variable de repos

function fn(a,...params){
    
    
  console.log(arguments);
  console.log(params);
    //arguments.forEach(function(item){console.log(item)});// arguments对象的原型为Object，没有forEach方法
    params.forEach(function(item){
    
    console.log(item)});
}
  fn(1,2,3,4,5,6)

• Opérateur de propagation

    let arr = [1,2,3,4,5,6];
    console.log(...arr);
    console.log([0,...arr,7]);

8. Valeurs par défaut des paramètres formels

function fn(name,age,gender ='man'){
  console.log(`${name}年龄为${age}岁，性别为${gender}`);
}
fn('张三',20,'woman');
fn('李四',22);

9. Promesse: constructeur, souvent utilisé dans la programmation asynchrone.

• Trois états: pending(en cours), fulfilled(réussi, déclencher la méthode then) et rejected(échoué, déclencher la méthode catch)
• Paramètres de construction: une fonction qui peut utiliser la fonction de résolution (en attente -> remplie) et la fonction de rejet (en attente -> rejetée) comme paramètres

  function beginTimer1(){
        console.log('begin_timer1');
        let promise = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('success_time1');
            resolve('timer2');
//        reject("timer1");
    },1000)
    });
        return promise;
    }
    function beginTimer2(){
        console.log('begin_timer2');
        let promise = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('success_time2');
            resolve('timer3');
//        reject("timer2");
    },1000)
    });
        return promise;
    }
    function beginTimer3(){
        console.log('begin_timer3');
        let promise = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('success_time3');
            resolve('none');
//        reject("timer3");
    },1000)
    });
        return promise;
    }
    console.log('sync_front');
    beginTimer1().then((data)=>{
  console.log('next_'+data);
    let promise2 = beginTimer2();
    return promise2;
}).catch((error)=>{
  console.log('error_'+error);
}).then((data)=>{
        console.log('next_'+data);
        let promise3 = beginTimer3();
    return promise3;
    }).catch((error)=>{
        console.log('error_'+error);
    }).then((data)=>{
        console.log('next_'+data);
    }).catch((error)=>{
        console.log('error_'+error);
    })
    console.log('sync_end');

10. Attribut de symbole: peut être utilisé comme identification d'interface

• Est un type de données primitif, appelez la fonction Symbol pour obtenir la valeur du symbole.

• Symbole intégré, tel que le symbole d'interface de l'itérateur (Symbol.iterator)

  let symbol1 = Symbol('attr');
  let symbol2 = Symbol();
  let symbol3 = Symbol();
  console.log(symbol2==symbol3);
  let attr = "attr";
  let obj = {
    attr:"value",
      symbol1:'symbol1',
    symbol2:'symbol2'
    };
    console.log(obj);
  console.log(obj[attr]);
  console.log(obj[symbol1]);
    console.log(obj[symbol2]);
  

11. Mécanisme d'interface de l'itérateur

• Imiter le constructeur d'itérateur

    function MyIterator(seq){
    
    // 仿Iterator构造函数
      let pointer = 0;
      return {
    
    
        get done(){
    
    
          return !(pointer < seq.length)
        },
        next(){
    
    
            return pointer < seq.length?seq[pointer++]:undefined
        }
        }
    }
    let arr1 = [0,1,2,3,4,5];
    let ite = new MyIterator(arr1);
    while (!ite.done){
    
    
      console.log(ite.next());
    }

12. Fonction générateur

Treize. Fonction asynchrone

14. classe

• Exemple d'implémentation

class Animal{
  constructor(name){
    this.name = name;
  }
  eat(){
  console.log("animal_eat");
}
  toString(){
    return this.name;
  }
  getName(){
    return this.name;
  }
  setName(name){
    this.name = name;
  }
}
  class Dog extends Animal{
    constructor(name,age){
      super(name);
      this.age = age;
    }
    eat(){
      console.log('dog_eat')
    }
    cry(){
      console.log('dog_cry')
    }
  }
  let animal = new Animal('animal');
  let dog = new Dog('dog',2);
console.log(animal);
console.log(dog);
console.log(animal.toString());
console.log(dog.toString());
  animal.eat();
  dog.eat();
dog.cry();
  dog.setName('dog2');
  console.log(dog.getName());

15. Quelques API d'extension

16. Clone profond

Traversée de dix-sept pour sur (boucle for améliorée)

• Il peut traverser des objets qui implémentent l'interface Iterator (le prototype a la propriété Symbol (Symbol.Iterator)).

  function forOf(seq){
      for(let item of seq){
        console.log(item);
      }
    }


let str = "123abc";
console.log(str);
    forOf(str);
    let arr = [1,2,1,3];
console.log(arr);
    forOf(arr);
    let set = new Set(arr);//单例集合
    console.log(set);
  forOf(set);
let map = new Map([['username','admin'],['password','123456'],['id',99]]);// 双例集合
    console.log(map);
    for(let item of map){
      console.log("key：" + item[0] + ",value："+ item[1]);
    }