js开发：es6从入门到放弃之let，const，块级作用域

博主之所以写这篇文章，一来是因为es6教程过于难懂，二来是为了巩固es6方面的知识。

 

前言:

es6和js是什么暧昧关系？JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。当然了，这是es6文本教程的说法，简单来讲，es6就是一种国际脚本语言规范，因为它针对js设定，所以它变成了js的一部分。

 

1.如何使用es6

（1）babel babeljs.io在线编译：

首先配置babelrc文件，可以使用

 

$ npm install --save-dev babel-preset-latest

 

   or全局安装

 

$ npm install --global babel-cli

or在工程中安装依赖是安装

 

 

 

$ npm install --save-dev babel-cli

 

 

 

这方面的内容太多了，建议大家去看http://es6.ruanyifeng.com/#docs/intro*（本文参考文本），加深理解

（2）traceur编译

traceur是google出的一款浏览器，可以把es6编译成es5，使用的时候要加上bootstrap.js引导程序，用法如下

 

<script src="treaceur.js"></script>
<script src="bootstrap.js"></scrip[t>
<script type="module">

</script>

2.es6新增的let命令，用来声明变量。用let生命的变量有自己的作用域，只在代码块内有效。下面来看看es6教程中的例子：

 

 

 

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

因为let只在自己的作用域的代码块内生效，所以在外部调用它时会输出undefined，这样做显然是有好处的，下面我们再来看下一个例子：

 

 

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

 

 

 

 

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是10。

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

 

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

 

 

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了3次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

如果大家使用过c++或者java，就会发现这个let跟里面的声明变量的关键字如此相似，功能基本是一样的。

另外，let不存在变量声明提升，会出现暂时性死区，也不允许重复声明。

 

2.const

const是es6新增的一个声明常量的命令。所谓常量，就是不可变的变量。但是这个不可变的并不是值，而是这个常量指向的内存地址。我们可以为这个常量添加新属性，数组成员等，但是不可以改变它的指向。这个和c++的const其实是一个道理。

另外，const一旦声明必须赋值，否则就会出现错误。const的作用域与let命令相同：只在声明所在的块级作用域内有效；const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用；const声明的常量，也与let一样不可重复声明。

3.块级作用域

函数能不能在块级作用域之中声明？这是一个相当令人混淆的问题。

在es5中，在块级作用域声明函数是违法的。但是浏览器并不遵从这个规定；

所以，es6为了兼容以前的代码，允许在块级作用域声明函数，只是这个函数只能在块级作用域中调用。

 

 

ES6 声明变量的六种方法 

 

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有6种声明变量的方法。