ES6语法

1.let

ES6新增了let命令，用来声明变量。它的用法相似于var,可是所声明的变量只在let命令所在的代码块内有效

新建index.html,文件内容为

<script type="text/javascript">
    {
        var a = 12;
    }
    console.log(a);
</script>

从console中能够打印出a的值

在ES6中，使用let声明a的值，而后再次打印a的值，会报错

<script type="text/javascript">
    {
        let a = 12;
    }
    console.log(a);
</script>

报错以下所示，

上面两个例子中，分别用let和var声明了两个变量。而后在代码块以外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这代表，let声明的变量只在它所在的代码块有效

修改上面的代码：

<script type="text/javascript">
    {
        var a = 12;
        var a = 20;
    }
    console.log(a);
</script>

结果以下

一样的把上面的var改成let,

<script type="text/javascript">
    {
        let a = 12;
        let a = 20;
    }
    console.log(a);
</script>

刷新浏览器后能够看到，抛出的异常又不同了

由于let声明的变量是块级做用域，不能重复声明

再次修改上面的代码

<script type="text/javascript">
    var a = [];
    for(var i=0;i <10;i++){
        a[i] = function () {
            console.log(i);
        };
    }
    a[6]();
</script>

刷新浏览器，获得的结果为：

修改代码，把var改成let

<script type="text/javascript">
    var a = [];
    for(let i=0;i <10;i++){
        a[i] = function () {
            console.log(i);
        };
    }
    a[6]();
</script>

再次刷新浏览器，获得的结果为：

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，因此每一次循环的i其实都是一个新的变量，因此最后输出的是6。

若是每一轮循环的变量i都是从新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是由于 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算

修改代码

<script type="text/javascript">
    console.log(foo);
    var foo = 2;
</script>

刷新浏览器后，获得的结果为

一样的，把var改成let,又会出现异常

var命令会发生”变量提高“现象，即变量能够在声明以前使用，值为undefined。按照通常的逻辑，变量应该在声明语句以后才可使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量必定要在声明后使用，不然报错。

上面代码中，变量foo用var命令声明，会发生变量提高，即脚本开始运行时，变量foo已经存在了，可是没有值，因此会输出undefined。变量bar用let命令声明，不会发生变量提高。

这表示在声明它以前，变量bar是不存在的，这时若是用到它，就会抛出一个错误。

ES5 只有全局做用域和函数做用域，没有块级做用域，这带来不少不合理的场景。

1.1 内层变量可能会覆盖外层变量。

<script type="text/javascript">
    var tmp = new Date();
    console.log(tmp)
    function f() {
        console.log(tmp);
        if(false){
            var tmp = "hello world"
        }
    }
    f();
</script>

程序执行结果

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。可是，函数f执行后，输出结果为undefined，缘由在于变量提高，致使内层的tmp变量覆盖了外层的tmp变量。

1.2 用来计数的循环变量泄露为全局变量。

<script type="text/javascript">
    var str = "hello";
    for(var i=0;i < str.length;i ++){
        console.log(str[i])
    }
    console.log(i)
</script>

执行结果：

2.模板字符串

传统的JavaScript语言，输出很长的信息时，一般都是使用"+"号进行拼接的。

这种方法至关繁琐不方便，ES6引入了模板字符串解决这个问题

模板字符串（template string）是加强版的字符串，用反引号(`)标识。它能够看成普通字符串使用，也能够用来定义多行字符串，或者在字符串中嵌入变量

上面代码中的模板字符串，都是用反引号表示。若是在模板字符串中须要使用反引号，则前面要用反斜杠转义。

执行结果：

3.箭头函数

ES6容许使用"箭头"(=>)定义函数

var f = a => a
等同于
var f = function(a){
    return a;
}

若是箭头函数不须要参数或须要多个参数，就使用括号表明参数部分

//无参函数
var f = () => 5;
等同于
var f = function(){return 5};

//多个形参的函数
var f = (num1,num2) => num1 + num2
等同于
var f = function(num1,num2){
    return num1 + num2;
}

使用箭头函数须要注意的点：

3.1 函数体内的this对象，就是定义时全部的对象，而不是使用时所在的对象

代码：

<script type="text/javascript">
    var animal = {
        name:"小狗",
        age:3,
        fav:function () {
            // this是使用时定义的对象
            console.log(this);
            console.log(this.name);
        }
    };
    animal.fav();
</script>

执行结果：

使用箭头函数定义上面的函数

<script type="text/javascript">
    var animal = {
        name:"小狗",
        age:3,
        fav: ()=>{
            // this指向定义时所在的对象(window)
            console.log(this);
            console.log(this.name);
        }
    };
    animal.fav();
</script>

执行结果：

3.2 箭头函数内部不可使用arguments对象，该对象在函数体内不存在

再次修改上面的代码，打印函数传递的参数arguments

<script type="text/javascript">
    var animal = {
        name:"小狗",
        age:3,
        fav:function () {
            // 没有使用箭头函数，可使用arguments获取传递的参数
            console.log(arguments);
            console.log(this.name);
        }
    };
    animal.fav(2,3,4);
</script>

执行结果：

使用箭头函数定义上面的fav函数,再次打印函数传递的参数arguments

<script type="text/javascript">
    var animal = {
        name:"小狗",
        age:3,
        fav: () => {
            // 使用箭头函数时，arguments没法使用
            console.log(arguments);
            console.log(this.name);
        }
    };
    animal.fav(2,3,4);
</script>

执行结果

4. 对象的单体模式

为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式

程序执行结果：

5. 面向对象

5.1 构造函数的方式建立对象

<script type="text/javascript">
    function Animal(name, age) {
        this.name = name;
        this.age = age;
    }
    Animal.prototype.showName = function () {
        console.log(this.name)
    }
    var dog = new Animal("dog", 2);
    console.log(dog.name);
    console.log(dog.age);
</script>

上面这种写法跟传统的面向对象语言（好比 Java 和 python）差别很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，做为对象的模板。

经过class关键字，能够定义类。ES6 的class能够看做只是一个语法糖，它的绝大部分功能，ES5 均可以作到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

5.2 class建立对象

修改上面的代码，用class建立对象

<script type="text/javascript">
    class Animal {
        // 相似于python中的__init__方法
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }

        showName() {
            console.log(this.name);
        }
    }
    var d = new Animal("dog", 3);
    d.showName();
</script>

程序执行结果

上面代码定义了一个“类”，能够看到里面有一个constructor方法，这就是构造方法，而this关键字则表明实例对象。

也就是说，ES5 的构造函数Animal，对应 ES6 的Animal类的构造方法。

Animal类除了构造方法，还定义了一个showName方法。注意，定义"类"的方法的时候，前面不须要加上function这个关键字，直接把函数定义放进去了就能够了。另外，方法之间不须要逗号分隔，加了会报错。

上面代码表示，类自己就指向了类的构造函数。

使用的时候，也是直接对类使用new命令，跟构造函数的用法彻底一致。

5.3 constructor方法

constructor方法是类的默认方法，经过new命令生成对象实例时，自动调用该方法。

一个类必须有constructor方法，若是没有显式定义，一个空的constructor方法会被默认添加。

class Animal {
}

// 等同于
class Animal {
  constructor() {}
}

上面代码中，定义了一个空的类Point，JavaScript 引擎会自动为它添加一个空的constructor方法。