最近更新
阅读排行
读过本文章的之后读了
关注本站

ES6新增常用特性总汇

阅读:1869 次   编辑日期:2016-12-26

目录:

概述:

话说最近一年ES6很火,面试时你要说你没看过ES6你都不好意思,react里面也支持ES6的写法,ES6与ES5的变化是翻天覆地的,那么ES6常用的新增特性有哪些呢,今天我们说说。

ES6常用的新增特性

JavaScript发展的时间轴:

1、1995:JavaScript诞生,它的初始名叫LiveScript。
2、1997:ECMAScript标准确立。
3、1999:ES3出现,与此同时IE5风靡一时。
4、2000–2005: XMLHttpRequest又名AJAX。
5、2009: ES5出现,也就是我们现在用的,例如foreach,Object.keys,Object.create和JSON标准。
6、2015:ES6/ECMAScript2015出现。

let:

话说在ES5里面声明变量的方法只有用var,但是在ES6中新增了let和const。
let是可以理解为变量,让块级作用域也可以拥有自己的变量。
    //ES5
   var name = "uw3c";
    if(true){
       var name="javascript";
    }
    console.log(name)  //javascript
ES5中上面的代码好理解,就是if执行了,把全局的变量改变了。
    //ES6
   let name = "uw3c";
    if(true){
       let name="javascript";
    }
    console.log(name)  //uw3c
ES6的let让代if码块有了自己的作用域,所以互不干扰。
ES5中经常会出现for循环泄露全局变量的问题。
    //ES5
    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        alert(i);
      };
    }
    a[6](); // 10
原因是因为for没有自己的作用域,导致i最后都会是10,ES5解决的办法也很简单,用闭包摆脱作用域。
    //ES5
    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = (function (index) {
        return function(){alert(index)};
      })(i);
    }
    a[6](); // 6
现在有了ES6的let,一切问题都解决了。
    //ES6
    var a = [];
    for (let i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 6

const:

const声明的是常量,它不可以被改变。
    //ES6
    const PI = Math.PI;
    PI = 99;
    console.log(PI);//Assignment to constant variable

class、 extends、 super:

是不是越来越像java了,有了这些函数,我们就再也不用写prototype的继承了。
之前ES5我们要是写继承的话,会这么写。
    //ES5
     function Animal(){
        this.type= "animal";
     }
     Animal.prototype.say = function(sound){
        alert(this.type+ ",say:" + sound);
     }
    var An = new Animal();
    An.say("hello");//animal,say:hello
    function Cat(){};
    Cat.prototype = new Animal();
    Cat.prototype.type = "cat";
    var blackCat = new Cat();
    blackCat.say("hi");//cat,say:hi
ES6就很简洁了。
    //ES6
    class Animal {
        constructor(){
            this.type = "animal";
        }
        says(sound){
            alert(this.type + ",says:" + sound)
        }
    }
    let animal = new Animal()
    animal.says("hello") //animal,says: hello
    class Cat extends Animal {
        constructor(){
            super();
            this.type = "cat";
        }
    }
    let cat = new Cat();
    cat.says("hi") //cat,says:hi
constructor可以理解为构造方法,它里面声明的东西只能自己用,constructor以外的方法可以共用。
Class之间可以通过extends关键字实现继承。
子类继承父类的时候,在子类的constructor必须写super()。否则新建实例时会报错因为子类没有自己的this对象,而是继承父类的this对象。

arrow function箭头函数:

一门语言,肯定要有自己的函数,ES6的函数可是很大的革新,举个简单的例子。
    //ES5
    function(i){
         return i + 1;
    }
    //ES6
    (i) => i + 1
是不是简单的爆...

default默认值:

default顾名思义,默认值,省的我们经常需要用时||来赋值默认值了。
    //ES5
    function auto(name){
        name = name || "uw3c"
        console.log(name);
    }
    auto();
    //ES6
    function auto(name = "uw3c"){
        console.log(name);
        auto();
    }

rest:

rest什么意思呢,之前写过一篇文章《JS函数没有形参如何使用数据》, 说的是在函数中没有形参怎么获取形参,在ES6里面有有类似的方法。
    //ES5
    function Fun1(){
        var str = Fun1.arguments[0];
        alert(str);//uw3c
    }
    Fun1("uw3c")
    //ES6
    function Fun2(...types){
        var str = types[0];
        alert(str);//uw3c
    }
    Fun2("uw3c")

import export:

话说我最近真的研究了一段时间的require.js,目的是可以引入文件,按需加载。在ES6中这点事儿基本不用require.js啦,直接上代码~
    //a.js
    var name="uw3c";
    var echo=function(value){
      console.log(value)
    }
    export {name,echo}

    // b.js
    import {name,echo} from "./a.js"
    console.log(sex)   // uw3c
    echo(sex) // uw3c
export导出,import引入,上面是一个简单的例子,应该很容易理解。
将本篇文章分享到:
top