ES6 简介

图片描述

图片来源于网络,版权归原作者所有

1. 前言

本节我们将什么是 ES5 ?什么是 ES6 ?为什么要学习 ES6 ?以及 ES6 与 ES5 之间的关系。本教程会通过在 ES5 中使用的知识点,对应的引出在 ES6 的知识点,深入浅出讲解 ES6 为什么会被引入?以及它背后的思想。

2. 什么是 ES5

ECMAScript 5 是 2009 年发布的 ECMAScript 的标准,由于第四版添加的内容过于复杂,便被废弃了。ES5 主要新增了严格模式,还有对数组和对象新增了一些方法,扩展了 JS 底层编写的能力。如:Vue 中的数据侦测就是使用 ES5 中的 Object.defineProperty 方法来实现的。

3. 什么是 ES6

ES6 是 ECMAScript 6 的简称,是于 2015 年 6 月正式发布的 JavaScript 语言的标准,正式名为 ECMAScript 2015(简称 ES2015)。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。同时 ES6 增加了很多 API 极大地拓展了 JavaScript 的功能,使他更像一门编程语言,可以承担更多的事。

ES6 因为是 2015 年发布的,也称作 ES2015,对应的版本是 ES6,后面的命名方式以此类推。ES6 从起草到正式发布,经过了一个很漫长的时间。从 2000 年 ES4 开始酝酿的时候就已经开始了,由于 ES4 添加的 API 过多,导致这个版本没有通过,后来 ES5 就直接发布了。但是 ES4 提出的很多内容也被 ES6 所继承,因此,ES6 制定的起点其实是 2000 年。

ES5 到 ES6 的演变其实经过了漫长的时间,而且 ES6 也算是 ECMAScript 的一个分水岭,它做了很多工作,修补了 ES5 之前 JavaScrept 存在的各种缺陷,并添加了很多新的功能,尽量能使得 JavaScript 成为一个更高级的,能承担更大型项目的语言。

Tips: 在后面的文章中,我们所说的 ES5 统称 ES6 之前的所有 ECMAScript 的特性,ES6 则是 ES6 之后的版本内容。从 2015 年发布的 ECMAScript6 之后每年 ECMAScript 都会正式发布一个版本 ECMAScript。所以很多特性不能直接在浏览器中使用,需要借助 babel 这样的工具,把 ES6 的语法转换成 ES5,这样浏览器才能识别。

4. 为什么学习 ES6

ES5 不能满足前端的复杂度,无论是 jQuery 这样的库,还是像 Vue 和 React 这样的框架,都在使用一些降级的方案来解决现有的问题,所以 ES6 的引入就是为了解决 ES5 以前存在的各种问题。另外,ES6 是一个大换血的版本,也是一个分水岭,标志着 JavaScript 向着更高的方向发展。ES6 也是对 ES5 的增强和升级。

  1. 主流的浏览器都已经全面支持 ES6;
  2. 行业内较新的前端框架都已经全面使用 ES6 的语法;
  3. 微信小程序,uni-app 等都是基于 ES6 的语法;
  4. 从就业出发,现在公司基本都在使用新的语法,增加必备技能获得更好的offer。

以上都是学习 ES6 的场景,也是大势所趋。

5. 版本说明

从 2015 年 6 月正式发布的 ES2015(简称 ES6) 语言的标准后,每年 6 月都会对 ECMAScript 进行版本迭代,本系列文章也是对 ES6 及以后更新的内容做系统性的讲解,目前的版本已经到了 ES2019(简称 ES10)。

添加语言的新特性,增加类和模块化的语法,其他特性包括迭代器,Python 风格的生成器和生成器表达式,箭头函数,二进制数据,新增内置数据结构(Map),增加了集合概念(Set),异步的解决方案(promise,async/await),使用 reflect 和 proxy 取代 Object 的部分功能更加细化了语言层面的部分。

另外,还增加了异步循环,生成器,新的正则表达式特性和 rest/spread 等语法。

6. 学习基础

本教程是 JavaScript 的延伸和进阶课程,所以学习本教程需要一些前置知识,主要有以下几个要求:

  • 了解 JavaScript 的基本语法;
  • 有过一定的项目经验;
  • 对 ECMAScript 的规范有一定的了解。

7. 小结

本节主要介绍了ES5、ES6 的内容,需要注意以下几点:

  1. JavaScript 不算是一门纯正的编程语言,它是一个集合,是由 ECMAScript、DOM 和 BOM 组合而成的,ECMAScript 才是 JavaScript 在 Web 编程中的核心。

  2. ES6 是一个分水岭,提供了很多超前的特性,不能直接在浏览器中使用,需要借助转换器,把 ES6 语法转换成 ES5 或者更低的版本才能在浏览器中运行。