ES6 一些新特性的总结

一、箭头函数

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 Product('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.Product();//输出 ‘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

六、可以定义默认的参数

 function sayHello2(name='dude'){
    console.log(`Hello ${name}`);
}

sayHello2();//输出：Hello dude
sayHello2('Wayou');//输出：Hello Wayou

七、Math 新增了一些API

八、Promises

//创建promise
var promise = new Promise(function(resolve, reject) {
    // 进行一些异步或耗时操作
    if ( /*如果成功 */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//绑定处理程序
promise.then(function(result) {
    //promise成功的话会执行这里
    console.log(result); // "Stuff worked!"
}, function(err) {
    //promise失败会执行这里
    console.log(err); // Error: "It broke"
});

ES6 里面Promise 可以用来避免异步操作函数里的嵌套回调（callback hell）问题，'.then().then()';

适用于 ajax网络请求、读取localstorage等操作。

常规的回调嵌套：

Parse.User.logIn("user","pass", {
 success:function(user) {
  query.find({
   success:function(results) {
    results[0].save({ key: value }, {
     success:function(result) {
      // the object was saved.
     },
     error:function(result, error) {
      // An error occurred.
     }
    });
   },
   error:function(error) {
    // An error occurred.
   }
  });
 },
 error:function(user, error) {
  // An error occurred.
 }
});

Promise 的实现过程：

Parse.User.logIn("user","pass").then(function(user) {
 returnquery.find();
}).then(function(results) {
 returnresults[0].save({ key: value });
}).then(function(result) {
 // the object was saved.
},function(error) {
 // there was some error.
});

直接到错误的地方就不在继续执行.then,而是跳出执行error状态下的function。

posted on 2017-05-11 14:45 zkBlog 阅读(120) 评论(0) 收藏举报

刷新页面返回顶部

zkBlog

ES6 一些新特性的总结

导航

公告