ES6重要特性

阮一峰ES6

一.let：用于声明普通变量

• 重复声明：同一作用域内，不能声明同名变量。

• 块作用域：在块作用域内有效。

• 变量提升：不会预处理，不存在变量提升。

  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);

二.const：用于声明常量

三.变量的解构赋值：快速声明多个变量/形参

  // 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);

四.模板字符串：简化字符串拼接

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

五.对象的简写方式

• 属性简写
• 方法简写

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());

六.箭头函数：定义匿名函数，常用在回调函数的定义

• 匿名函数
• this指向：自身无this，箭头函数内this指向定义所在的宿主对象。
• 书写简洁

    //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();

七…运算符

• rest可变参数

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)

• 扩展运算符

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

八.形参默认值

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

九.Promise：构造函数，常用于异步编程。

• 三种状态：pending（进行中）、fulfilled（已成功，触发then方法）和rejected（已失败，触发catch方法）
• 构造参数：一个可以resolve函数（pending->fulfilled）、reject函数（pending->rejected）为参数的函数

  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');

十.Symbol属性：可用作接口标识

• 是一种原始数据类型，调用Symbol函数得到symbol值。

• 内置symbol，如迭代器接口标识Symbol(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]);
  

十一.iterator接口机制

• 仿 Iterator 构造函数

    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());
    }

十二.Generator函数

十三.async函数

十四.class类

• 实现示例

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());

十五.一些扩展api

十六.深度克隆

十七.for of（增强for循环）遍历

• 可遍历实现Iterator接口（原型有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]);
    }