向ES6看齐，用更好的JavaScript（一）

众所周知，JavaScript作为弱类型语言，一直是精华与糟粕共存，许多“诡异”的地方我们不得不接受并使用。其实ES6（又称ECMAScript 2015）在2015年6月就已经正式发布了，其中提出的很多新的特性让JavaScript更加完善和丰富，对于前端开发者可谓一大福音。

目前各大浏览器的最新版本对ES6的支持度也越来越高，大部分的特性都实现了（ ES6 支持 ）。另外现在也有很多的转换器（如Babel)，将ES6和ES7的代码转换为ES5的代码，这就意味着我们现在就可以使用这些新特性应用到我们的项目中去。

本篇对ES6中的关于变量部分的新特性进行介绍,本系列传送门：

• 1 变量部分
• 2 现有对象拓展
• 3 新增数据类型/数据结构
• 4 新的异步编程模式
• 5 类和模块

1 利用let和const引入块级作用域

以往JavaScript是不具有块级作用域的，一个函数才能构成一个作用域,局部变量在整个函数内都是有定义的，举个栗子

    for(var i = 0;i < 10;i++){
    }
    
    console.log(i);  //输出10

最后在for循环之后，i变量仅用于for循环，但在却被泄露成全局变量形成变量污染，这就是不合理的地方，通过ES6中定义的let关键字可以形成仅作用于该块作用域的局部变量，

    //ES6环境下
    for(let i = 0;i < 10;i++){
    }
    
    console.log(i);  //输出ReferenceError(未定义)

利用Babel将这段ES6代码转换为ES5代码后，实际上是对ES5的代码对其原理进行模拟达到一致的效果，因此可以帮助我们的理解：

    //Babel转换后
    for (var _i = 0; _i < 10; _i++) {
    }

    console.log(i); //输出ReferenceError(未定义)

可以看到，对于let声明的局部变量，如果外部有相同定义，会通过添加下划线将其转换为另外的变量，表达意思就是let将该变量仅在该块作用域内可用。

再举个栗子:

    var a = [];
    for (var i = 0; i < 3; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[1](); //输出3
    a[2](); //输出3

上面的代码的三次循环中i始终为同一个变量，值最后为3。a数组中的函数读到的i也是这个值，因此都是输出3，这跟我们想要的结果并不一致。而利用let这个新特性可以很好的解决这个问题:

    //ES6环境
    var a = [];
    for (let i = 0; i < 3; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[1](); //输出1
    a[2](); //输出2

    //Babel转换后
    var a = [];
    var _loop = function _loop(i) {
        a[i] = function () {
            console.log(i);
        };
    };
    
    for (var i = 0; i < 3; i++) {
        _loop(i);
    }
    a[1](); //输出1
    a[2](); //输出2

这次转换后稍微变得复杂了一些，实际上是新定义一个函数，将循环变量i作为参数传进去，可以这样理解ES6中代码通过let将三次循环中的i固定于各自的块作用域中，互不干扰。

另外关于let要注意的几点：

    console.log(a);   //输出ReferenceError(未定义)，let声明的变量不会变量提升，这也是规范我们的代码先声明后使用。
    let a = 3;    
    let a = 4;     //错误，let声明的变量不能重复定义

总之，用let让我们的代码更加规范避免了很多问题，因此尽可能使用let代替var.

• 与let类似const也能形成块作用域，不同点在于const声明的变量为常量，不可改变

举个栗子：

    if(true){
        const MAX = 999;
        MAX = 3;  //报错："MAX" is read-only
    }
    console.log(MAX);//输出ReferenceError(未定义)
    

可以看出const也形成块级作用域，而且值不可改变，有一点要注意的是不能改变的是const类型变量存储的东西，举个栗子更好理解：

    const person = {};
    person.name = 'vicfeel';  //正确，person存储的是指向该对象的地址，对象内容可以改变
    person = {};  //报错："person" is read-only，该地址不能改变

2 变量解析与赋值

以往多个变量的赋值我们使用如下的方式：

    var a = 1;
    var b = 2;
    var c = 3;
    
    var d = 4,e = 5,f = 5;

ES6中增加一种更便捷的多变量赋值方法：

    var [a,b,c] = [1,2,3];

系统会自动对数组内元素进行对应赋值，也就是说我们也可以用这种方式来进行变量的声明：

    //ES6环境下
    var arr = [1,2,3];
    var [a,b,c] = arr;

我们用Babel看一下是如何模拟的：

    //Babel转换后
    var _ref = [1, 2，3];
    var a = _ref[0];
    var b = _ref[1];
    var c = _ref[2];

可以看到是通过数组下标依次向后赋值，下面我对多种情况进行了赋值测试：

    {
        //数量不对应
        let [a,b,c] = [1,2];
        console.log(a);  //1
        console.log(b);  //2
        console.log(c);  //undefined
        //按照上面babel转换的理解，c = _ref[2]不存在该要素因此c为undefined
    }
    {
        //多层数组
        let [a,[b,c],d] = [1,[2,3],4];
        console.log(a);  //1
        console.log(b);  //2
        console.log(c);  //3
        console.log(d);  //4
    }
    {
        //多层不对应
        let [a,[b,c],d] = [1,[2],3];
        console.log(a);  //1
        console.log(b);  //2
        console.log(c);  //undefined
        console.log(d);  //3
    }
    {
        //对应值非数组
        let [a,b,c] = 1;  //报错
        let [a,b,c] = false;  //报错,等号右边必须为可遍历对象
    }

了解映射的原理之后，一个很好的应用场景就是交换数值，现在可以这样简单的实现：

    //ES6环境下
    let [x,y] = [0,1];
    [x,y] = [y,x]; 

• 除此之外，ES6还在映射赋值中加入了默认值

//ES6环境下
let [a, b = 2,c] = [1]; //y无对应值时，默认值则为2
console.log(a);  //1
console.log(b);  //2
console.log(c);  //undefined

看一下ES5的模拟

//Babel转换后
var _ref = [1];
var a = _ref[0];
var _ref$ = _ref[1];
var b = _ref$ === undefined ? 2 : _ref$; //通过‘===’严格等于判断是否为undefined，是的话采用默认值
var c = _ref[2];   //所以是undefined

• 针对对象的映射赋值

直接看栗子：

    //ES6环境下
    var { oA, oB } = { oA: "a", oB: "b" };
    console.log(oA); //"a"
    console.log(oB); //"b"

看一下ES5的模拟

    //Babel转换后
    var _oA$oB = { oA: "aaa", oB: "bbb" };
    var oA = _oA$oB.oA;   //原来是通过同名属性进行对应
    var oB = _oA$oB.oB;
    
    console.log(oA);
    console.log(oB);

了解了对应的原理之后，我们再做一下其它情况的测试：

    {
        //顺序改变
        var { oA, oB } = { oB: "a", oA: "b" };
        console.log(oA); //"b"
        console.log(oB); //"a"
    }
    {
        //数量不对应
        var { oA, oB } = { oA: "a"};
        console.log(oA); //"a"
        console.log(oB); //undefined,等号右边对象找不到oB属性
    }

掌握这种方法，可以简化很多之前操作，如获取一个对象的某些属性，可以通过以下方式：

    //ES6环境下
    var person = {
       name:'Vicfeel',
       age:'23',
       sex:'Male'
    }
    
    let {name,age,sex} = person;
    
    console.log(name);//Vicfeel
    console.log(age); //23
    console.log(sex); //Male

参考Reference
http://www.ecma-international.org/ecma-262/6.0/index.html
http://es6.ruanyifeng.com/
http://www.cnblogs.com/Wayou/p/es6_new_features.html
http://www.cnblogs.com/snandy/archive/2015/05/10/4485832.html

博文作者：vicfeel
博文出处：http://www.cnblogs.com/vicfeel
本文版权归作者和博客园共有，欢迎转载，但须保留此段声明，并给出原文链接，谢谢合作！
如果阅读了本文章，觉得有帮助，您可以为我的博文点击“推荐一下”！