今天我们来介绍 【诶可码 · 斯柯瑞噗特】和它的新特性。
系统化的学习 ECMAScript 很有必要,而网上的 ECMAScript 资料比较零散,因此我们根据下面问题从 ES2015 开始梳理 ES2015 的发展与新特性介绍。
- ECMAScript 与 JavaScript 的关系?
- ES6 为什么指的是 ESMAScript 2015
- ECMAScript 2015(ES6)新特性介绍
- let 与 块级作用域
- 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