【大前端专栏】突破桎梏（五）：初识 ECMAScript

今天我们来介绍 【诶可码 · 斯柯瑞噗特】和它的新特性。

系统化的学习 ECMAScript 很有必要，而网上的 ECMAScript 资料比较零散，因此我们根据下面问题从 ES2015 开始梳理 ES2015 的发展与新特性介绍。

1. ECMAScript 与 JavaScript 的关系？
2. ES6 为什么指的是 ESMAScript 2015
3. ECMAScript 2015（ES6）新特性介绍
4. let 与 块级作用域
5. const

1. ECMAScript 与 JavaScript 的关系？

• ECMAScript 简称 ES。ES 是一个脚本语言。注意，是 ES 也是脚本语言。
• ES 通常可以看作是 JavaScript 的标准化规范。
• ES 只提供了最基本的语法。如：怎样定义变量和函数。
• JS 实现了 ES 的语言标准。JS 还在此基础上新增了一些拓展，使得我们可以在浏览器可以操作 DOM/BOM，在 Node 环境中可以读写文件等操作。
• 因为 JS 是在 ES 基础上的拓展，所有 JS 是 ES 的扩展语言。
• JS 在浏览器环境中的组成关系：ES + Web Apis (BOM + DOM 等)。
• JS 在 Node 环境中的组成关系：ES + Node Apis（fs + net 等）。

2. ES6 为什么指的是 ESMAScript 2015

名称	标准版本	发行时间
ECMAScript 2019（ES2019）	10	2019年6月
ECMAScript 2018（ES2018）	9	2018年6月
ECMAScript 2017（ES2017）	8	2017年6月
ECMAScript 2016（ES2016）	7	2016年6月
ECMAScript 2015（ES2015）	6	2015年6月
ECMAScript 5.1（ES5.1）	5.1	2011年6月
ECMAScript 5（ES5）	5	2009年12月
ECMAScript 4（ES4）	4
ECMAScript 3（ES3）	3
ECMAScript 2（ES2）	2
ECMAScript 1（ES1）	1

从上表我们能够讲出如下几点：

• ES 的版本更迭从 ES5 跨向 ES6 这个阶段发生了巨变，中间间隔了 6 年之久（不谈 5.1
• 6 年里，刚好是 Web 界快速发展的几年，ES6 一经发布，带来的更新内容特别多，因此算作一个新阶段的起始点。
• ES6 发布时的版本应该是 ECMAScript 6，但从 2015 这年开始 ES 的版本不再使用版本号命名了，而是使用年号，因此 ES6 又叫 ESCMAScript 2015。
• 从 2015 年开始，ES 的更新频率加速，达到每年一更，且规律是每年的 6 月时更新。

3. ECMAScript 2015（ES6）新特性介绍

ES6 是 ECMAScript 标准的代表版本，原因如下：

• 相比于 ES5.1 的变化比较大
• 自此，标准命名规则发生变化

目前有很多开发者还喜欢用 ES6 这个名称泛指从 ES5.1 以后所有的新版本。
例如 “使用 ES6 的 async 和 await”，实际上 async 是 ES2017 中制定的标准。
因此我们需要注意分辨文章中的 ES6 是特指 ES2015 还是 泛指 ES2015之后的所有新标准。

ES2015 长达 26 个章节，链接：ES2015

---

接下来我们来重点介绍 ES2015 在 ES5.1 基础上的变化，变化归纳为 4 类。

• 解决原有语法上的一些问题或者不足。如：let 和 const 提供的块级作用域。
• 对原有语法进行增强。如：解构、展开、参数默认值、模板字符串。
• 全新的对象、全新的方法、全新的功能。如：Promise、
• 全新的数据类型和数据结构。如：Symbol、Set、Map。

包含到 ES2019 的 Node 版本号：12.14.0。

Nodemon 工具：修改完代码后自动执行代码。
执行 js 文件命令只发生如下变化：node index.js 这样执行变化为 nodemon index.js。

4. let 与 块级作用域

• 作用域的概念：代码中某个成员能够起作用的范围
• 在 ES2015 前，ES 中只有两种作用域：全局作用域、函数作用域。在 ES2015 中新增了一个：块级作用域。
• 通俗的说，块指的是我们代码中花括号所包裹起来的范围，如 if/for 的花括号内。

如下所示，在 if 花括号内使用 let 定义变量，在全局打印输出为：foo is not defined

• 值得一提的是：for 的括号内和花括号内是两个不同的作用域，因此下面代码可以输出看一看结果：

for(let i = 0; i > 3; i++){
	let i = 'foo';
  console.log(i)
}

上面代码的执行过程类似下面这样：

let i = 0

if(i < 3) {
	let i = 'foo'
  console.log(i)
}
i++

• let 声明的变量不会和 var 那样变量声明提升：

console.log(foo)
var foo = 'foo'

// undefined