思维导图

JavaScript共包含三个部分：ECMAScript、DOM和BOM，而我们今天开始所要讲的ES6的全称就是ECMAScript6，它是2015年发布的ECMAScript标准，故又被称之为ECMAScript2015。而后每年都会更新一个新版本，并以该年份置于其后作为标识，而这些从2015年开始的ECMAScript版本都被统称为ES6。

ES6相对之前版本增加了很多新的特性，但是也有很多都只是语法糖，也就是说实现功能和之前一样，只是语法更简洁了而已（如箭头函数、类）。这些新特性新语法给我们开发带来了很多便利，提高了工作效率和降低了维护成本。遗憾的是，现代浏览器对ES6兼容参差不齐，所以导致很多人虽然想用但是不敢用。不过幸亏有了像Babel这样优秀的编译工具，能将ES6语法编译成现代浏览器能识别的ES6之前版本，这样我们又可以轻松愉快地使用它了。

接下来，就让我来为大家一步步地打开这扇通往ES6的大门吧！

一、let——变量声明

在ES6之前，我们是使用var来声明变量，那么我们就来简单说说var和let之间到底有什么区别。

1. 块级作用域

①var声明的变量不是块级作用域，所以代码块之外能访问代码块中的变量。

{   // 代码块
  var a = 0;  // 全局变量，外部可访问
}
console.log(a);   // 0

②let声明的变量是块级作用域，所以代码块之外无法访问代码块中的变量。

{   // 代码块
  let a = 0;  // 局部变量，外部可访问
}
console.log(a);   // 报错

2. 暂时性死区

①var声明的变量会进行变量提升，也就是说，该变量声明总会被提升到作用域最顶部。

{
  a = 0;
  var a;
}
console.log(a);   // 0

变量a的作用域为全局，故以上代码其实相当于下面代码：

var a;  // 变量提升
{
  a = 0;
}
console.log(a);   // 0

然后再看下面这个例子：

console.log(a);   // undefined
{
  a = 0;
  var a;
}