ES6 一些新特性的总结

Posted 2020-09-01 雪昀

一、箭头函数

     ES6中新增了一个箭头函数   ()=>,箭头函数通俗点讲就是匿名函数。箭头函数还有不同点在于改变函数中this,和js中的.bind  的方法差不多，继承后指向的不是最新的函数，还是之前的那个原型对象。

      

二、类的支持

      ES6中添加了对类的支持，引入了class关键字。JS本身就是面向对象，ES6中提供的类实际上只是JS原型模式包装。现在有了class,对象的创建，继承更直观，父类方法的调用，实例化，静态方法和构造函数更加形象化。

      

   //类的定义
   
   class Animal {
        constructor(name) {
            this.name =name;
      }
    
  //实例方法

   sayName (){
        console.log (‘My name is‘ + this.name);

      }

   }

//类的继承

 class Product  extends Animal{

      constructor(name) {
           //直接调用父类构造器进行初始化
       super(name);
   }

    progrom() {
    console.log (‘I‘m coding....‘);
   }
 }

  //测试我们的类
var animal=new Animal(‘dummy‘),
wayou=new Programmer(‘wayou‘);
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I‘m coding...’

 

 三、增强的对象字面量

    实现继承，可以直接在对象字面量里面定义原型，不用再用function 关键字。

   

//  通过对象字面量创建对象

   var  human = {
          breathe  () {
             console.log (‘breathing...‘);
     }
};


  var worker = {
      __proto__:human, //设置此对象的原型为human，相当于继承human
   
    company：‘freeLancer’，
    work() {
       console.log (‘working...‘);
    
       }
  };

 human.breathe();//输出 ‘breathing...’
 //调用继承来的breathe方法
 worker.breathe();//输出 ‘breathing...’

 

四、利用‘ ‘ 反引号创建字符串，这其中可以包括${vraible}

      

 //产生一个随机数
 
   var num =Math.random();

 // 讲这个数输出到console

   console.log (‘ your num is ${num}‘);

 

五、解构

   自动解析数组或对象中的值，不用以对象的方式返回。

   

1、var [x,y] = getVal(),//利用函数返回值进行解构
    [name,,age]=[‘wayou‘,‘male‘,‘secrect‘];// 利用数组进行解构

   function getVal () {

       return [1,2];
   }


  console.log (‘x:‘ +x+‘ ,y:‘+y);//输出：x:1, y:2
  console.log(‘name:‘+name+‘, age:‘+age);//输出： name:wayou, age:secrect