Hexo

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

前言

ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。

PS：严格来说，ECMAScript 还包括其他很多语言的语言标准。

很多人在做业务选型的时候，会倾向于选jQuery。其实jQuery的语法是偏向于ES3的。而现在主流的框架 Vue.js 和React.js的语法，是用的ES6。

ES6中增加了很多功能上的不足。比如：常量、作用域、对象代理、类、继承等。这些在ES5中想实现，比较复杂，但是ES6对它们进行了封装。

ECMAScript 发展历史

1995年：ECMAScript 诞生。
1997年：ECMAScript 标准确立。
1999年：ES3 出现，与此同时，IE5 风靡一时。
2009年，ES5 出现，例如 foreach、Object.keys、Object.create 和 json 标准。
2015年6月，ES6正式发布。

ES6 的目标是：让 JS 语言可以编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 的各大版本

ES5 : 09年发布。
ES6：ECMAScript 2015年6月
ES7：ECMAScript 2016
ES8：ECMAScript 2017

ES6 的其他优势

使用 babel 语法转换器，支持低端浏览器。
流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 标准开发。

ES6的环境配置

掌握 ES6 之后，如果要考虑 ES5 的兼容性，可以这样做：写 ES6 语法的 js 代码，然后通过 Babel将 ES6 转换为 ES5。

但是，在这之前，我们需要配置一下相关的环境。

建立工程目录

（1）先建立一个空的工程目录 ES6Demo，并在目录下建立两个文件夹 src和 dist：

src：书写ES6代码，我们写的 js 程序都放在这里。
dist：利用 Babel 编译生成的 ES5 代码。我们在 HTML 页面需要引入 dist 里的 js 文件。

（2）在 src 里新建文件 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 我们引入 ES5 中的 js 文件，而不是引入 ES6 中的 js 文件。 -->
    <script src="./dist/index.js"></script>
</head>
<body>

</body>
</html>

注意，上方代码中，我们引入的是dist目录下的 js 文件。

然后我们新建文件 src/index.js：

1
2
3