关于ECMAScript2015的一些变化

作者: 冰的棍儿 | 来源:发表于2016-12-21 18:02 被阅读0次

关于ECMAScript2015的一些变化
关于一些小变化
ES6 开发者的 7 个黑客技巧
ECMAScript2015
2017-07-24
es6
ecmascript6的6大特性
es6的十大特性
前端开发不得不知的ES6十大特性
ECMAscript2015入门

今天研究了一下关于ECMASript2015，也就是我们常称呼的ES6。关于ES6，使用'use strict'就不多说了，我详细罗列以下几点：
一.let 定义变量
let 有块级别作用域{},且目前浏览器已经支持了
举个例子来说，let可以解决for循环中加事件，事件里i不能使用的问题：
我们来看一个for循环里加事件不能用的案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        'use strict'
        window.onload = function(){
            var aBtn = document.getElementsByTagName('input');
            for (var i =0; i<aBtn.length; i++) {
                aBtn[i].onclick = function(){
                    alert(i);       //结果是3 3 3
                };
            }
        };
    </script>
    <body>
        <input type="button" value="aaa" />
        <input type="button" value="bbb" />
        <input type="button" value="ccc" />
    </body>
</html>

那我们将定义变量 var 替换为 let 试试：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        'use strict'
        window.onload = function(){
            var aBtn = document.getElementsByTagName('input');
            for (let i =0; i<aBtn.length; i++) {
                aBtn[i].onclick = function(){
                    alert(i);       //结果是0 1 2
                };
            }
        };
    </script>
    <body>
        <input type="button" value="aaa" />
        <input type="button" value="bbb" />
        <input type="button" value="ccc" />
    </body>
</html>

使用let定义变量就可以很好的解决i的问题，而不使用封闭空间。
另外：我们需要强调一点，在使用let的过程中，是不能重复声明变量的。如下：

let a = 12;
lat a = 5;      //错误的重复声明会报错：Identifier 'a' has already been declared
console.log(a);

二、const 定义的是常量
当我们在写页面的过程中，如果需要一个常量来一直使用的话，比如我们需要定义一个Tab循环使用，那么我们可以使用const来定义。
举个检点的例子来验证如何使用const定义一个常量：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        const a = 12;
//      const a = 5;    //不能重复定义
//      a = 8;          //常量不能被修改
        const b = 9;
        alert(a);
        alert(b);
    </script>
    <body>
    </body>
</html>

所以我们在使用const过程中，需要注意这两点：
1.不能重复定义
2.常量不能修改

三、字符串模板引擎
字符串模板引擎就是我们常说的字符串拼接，通常我们在做字符串拼接时，使用'++'的方式拼接，
但是当我们遇到大量的变量需要字符串拼接起来的时候，这时候会发现，这种拼接方式是极易出错的，一不小心丢了一个单引号或者+号，字符串拼接就有问题。
那么，我们使用字符串模板引擎方式，用${}代替'++'方式来看看，：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        var name = 'facebook';
        var sex = '56';
        var hobby = 'chat';
        var str = `我是${name}，性别有${sex}种，功能是${hobby}。`;
        alert(str);
    </script>
    <body>
    </body>
</html>

省去了大量的单引号加号，看着是不是更加清晰了，也更不容易出错了呢。
在使用时，需注意我们使用的不是单引号了，而是`(tab键上边的那个键哦！)。

今天就先说到这里，未完待续。