js

es6特性整理

Posted by Mia Yu on February 27, 2017

es6相较之前es5,增加了许多新的特性,提高了javascript体验,我在es6学习和使用的过程中进行了纪录。

  1. 箭头函数 箭头函数简化了函数的书写方法,变的非常简洁,还能解决this指向问题。示例如下:
    //es5写法:
    var item = data.map( function ( item, i ){
       return item;
     })
    //使用箭头函数
    var item = data.map( (item,i) => {
       return item
     })
    
  2. let 和 const 用于量的定义,let定义的量限定块级作用域,超出该作用域就无法读取到,并且同作用域内let声明的变量不能重复;而const用于定义常量,无法改变它的值,示例如下:
    for( let i=0;i<5;i++) {} console.log(i)  //i is not defined 
    const DURATION = 3*1000; 
    DURATION = 6*1000;  //Assignment to constant variable.
    
  3. 类 es6引入了class关键字,它其实说js原型模式的包装,有了类的概念后,js的对象创建、继承、实例化、构造函数等就变得更加直观易懂。示例如下:
    //首先定义一个类
    class Fruit {
     constructor( name ){
         this.name = name;
    }
    getName(){
        console.log(this.name)
    }
    }
    //创建子类继承上面的类
    class Banana extends Fruit{
    constructor(name){
       super(name);
    }
    testFunc(){
       console.log('who is my father');
    }
    }
    //测试
    var fruit =  new Fruit('fruit');
    var banana = new Banana('banana');
    fruit.getName();  //fruit
    banana.getName(); // banana
    banana.testFunc();  // who is my father
    
  4. 模板字符串 模板字符串相比起传统字符串与变量混合写法要简洁易懂的多,它使用反引号`来创建字符串,而里面的变量可以用${变量}来表示,示例如下:
    //es5写法
    var dom = '<div>hello,'+username+'</div>';
    //es6语法
    var dom = `<div>hello, ${username}</div>`;
    
  5. for…of 循环 for…of循环是es6新引进的循环功能,它每次循环提供的是不同索引的值,示例如下:
    var arr = [12,13,14,15,23];
    for (i of arr){
    console.log(i);  //依次输出:12, 13, 14, 15, 23
    }
    
  6. 默认参数 es6中定义函数时可以给参数设置默认值,示例如下:
    //es5写法
    function getName(name){
      var myName = name || 'rose';
      console.log('my name is'+myName);
    }
    //es6
    function getName(name='rose'){
      console.log(`my name is ${name}`);
    }
    
  7. 拓展运算符 扩展运算符是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。示例如下:
    // es5的写法
    function count(x, y, z) {
      console.log(x,y,z);
    }
    var arr = [0, 1, 2];
    f.apply(null, arr);
    // es6的写法
    function count(x, y, z) {
      console.log(x,y,z);
    }
    var arr = [0, 1, 2];
    count(...arr);
    
  8. 对象字面量 es6可以在对象字面量里定义原型,可以不用function关键字来定义方法,也可以直接调用父类方法,示例如下:
    var meat = {
      cook(){
     console.log('cook meat');
      }
    };
    var human = {
      _proto_:meat,  //指定该对象原型为meat,继承了meat
      fruit(){
     console.log('I like fruit');
      }
    };
    meat.cook(); // cook meat
    human.cook(); // cook meat
    
  9. Promise对象 Promise是异步编程的一种解决方案,创建了Promise对象就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易,示例如下:
    var promise = new Promise((resolve, reject)=>{
      if(/*if success*/){
     resolve('it completed');
      }else{
     reject(Error('it failed));
      }
    });
    //绑定处理程序
    promise.then(function(result){
      console.log(result); // 程序成功后会运行此处:it completed
    },function(err){
      console.log(err);  //程序失败会运行此处:it failed
    }
    

    es6 的新特性/语法远不止上述总结的这些,具体中文文档请参考:http://es6.ruanyifeng.com/