ECMAScript6
1、ES6简介
1.1、什么是ES6
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？
要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。
1.3、为什么要学习ES6？
这个问题可以转换一种问法，就是学完es6会给我们的开发带来什么样便利？chrome解释javascript的引擎叫做V8，有一个人把V8引擎转移到了服务器，于是服务器端也可以写javascript，这种在服务器端运行的js语言，就是Node.js。Node.js一经问世，它优越的性能就表现了出了，很多基于nodejs的web框架也应运而生，express就是之一，随之而来的就是全栈MEAN mogoDB,Express,Vue.js,Node.js开发，javaScript越来越多的使用到web领域的各个角落，js能做的事情也越来越多。Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。nodejs是一种开发趋势，Vue.js这种前端框架是一种开发趋势，ES6被普及使用也是趋势。目前一些前端框架都在使用ES6语法，例如Vue、React、D3等等，所以ES6也是学习好前端框架的基础。
2、ES6环境搭建
由于有些低版本的浏览器还不支持ES6的语法，所以在不使用框架的情况下，需要将ES6语法转换为ES5语法。
2.1、前期准备
先创建一个项目，项目中有两个文件夹，src和dist，一个html文件
src：将编写的ES6的js文件放到此文件夹中（这里是index.js文件）
dist：将通过Babel编译成的ES5的js文件放到此文件中（这里是index.js文件）
html：注意：将dist中编译好的文件引入到HTML文件中，而不是src中的js文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="./dist/index.js"></script> 7 </head> 8 <body> 9 Hello ES6 10 </body> 11 </html>
2.2、ES6环境搭建
第一步：
在src目录下，新建index.js文件。这个文件很简单，我们只作一个a变量的声明，并用console.log()打印出来。
let a = 1;
console.log(a);
第二步：
在项目的根目录初始化项目并生成package.json文件(可以根据自己的需求进行修改)
cnpm init -y
{ "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
第三步：
安装Babel插件（将ES6语法转换为ES5）
cnpm install -g babel-cli
第四步：
当然现在还不能正常转换，还需要安装ES5所需的一个包
cnpm install --save-dev babel-preset-es2015 babel-cli 安装完成后，package.json会有所变化
{ "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" } }
第五步：
在项目的根目录添加一个 .babelrc 文件，并添加内容
{
"presets":[
"es2015"
],
"plugins": []
}
在windows系统中创建.babelrc文件的方法
方法一：根目录下，创建“.babelrc.”文件名就可以了！（前后共两个点）
方法二：cmd进入根目录，输入“type null>.babelrc”，回车即可！
第六步：
安装完成后我们可以通过命令进行转换
babel src/index.js -o dist/index.js
第七步：
可以将命令进行简化（package.json进行配置）
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
修改为：
{ "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "babel src/index.js -o dist/index.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" } }
然后我们可以通过下面命令转义代码：
npm run test