快来使用ECMAScript 2015吧
ECMAScript 6 （以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的，所以又称 ECMAScript 2015 。
如果你还不知道ECMAScript，那么你有可能知道javascript，那么可自行查询js和es的关系，如果你也不知道javascript可以忽略这篇文章了。
ES6 是ES5.1的下一个版本，和ES5不一样，ES6的改动非常大，而且无法用shim脚本兼容陈旧的浏览器，我一开始认为这是有违web理论的，web得以繁荣昌盛，得益其强大的兼容性，HTML5的理念也是向后兼容，css3的理念也是向后兼容，我一直认为ES6会步ES4的后尘，就像xhtml2.0的结局一样。
直到我遇见了 babel ，transfer的理念真是太棒了，当我蓦然回首，发现自己早已深处工程化前端之列，预编译已经融入到工作中了，如果你还处在前端的蛮荒时代（没有编译流程），那么可以先考虑引入工程化流程，再来接触ES6，目前比较流行的有 grunt ， gulp ， webpack 等。当然如果是node的话，那就没什么压力了。
babel 支持的平台非常多，可以参看 这里 ，点击相应平台，下面会给出使用的例子。
至此我真的想说，前端朋友们，是时候使用 ES6 了，大胆尝试吧，真的非常棒。
本文将介绍在fis中借助babel使用ES6的过程，包括环境搭建，基本语法，模块系统，优秀特性等。
环境搭建
作为前端开发者，我非常幸运能使用 fis 这么高大上的工具，fis在前不久刚刚发布了fis3，我们用的还是fis2，作为国产工具最大的杯具就是babel不提供默认支持，好的方面是fis团队已经开发出了插件支持—— fis-parser-babel2 。
借助这个插件就搞定了编译问题，先来说说我的思路吧，我只希望给固定的js引入编译过程，我的思路是这样的，后缀为.es6或.es6.js的文件才引入编译流程，这样就可以共存了。
test.js // 普通js文件 test.es6 // es6文件 test.es6.js //es6文件 我使用的是fis2，配置的js也非常容易，所以在此就不列举了。
babel会将es6代码编译为es5代码，所以其代码需要在支持es5语法的浏览器里运行，如果你支持的浏览器都是现代浏览器可以忽略这个问题，如果你要兼容一些陈旧浏览器，比如ie8那么我建议使用 es5-shim ，需要引入es5-shim.js和es5-sham.js。
很多编辑器其实还不支持es6的语法，我使用的编辑器是sublime，借助JavaScriptNext - ES6 Syntax这个插件，可以让sublime支持es6语法。
如果你的编辑器没有类似的功能，那么推荐你用subliem吧，我总结了一些使用subliem的经验，推荐给你《 我的 Sublime Text 2 笔记 》。
基本语法
ES6带来了很多新的语法，参考资料里面列举了一些资料可以参考，我看的是阮一峰老师的ECMAScript 6 入门，新知识点还是蛮多的，边扫语法边实验，看看babel编译完的es5语法是什么样子，我建议你也这么做，这样效率极高，而且能知道babel干了些什么。
babel有一个 try is out ，可以时时预览原语法和编译后的语法。本文下面的部分就将用这个作为演示系统。
需要注意的是babel并不支持全部的es6语法，有些并没有实现，babel首页有个清单，babel还不止支持es6，还支持部分es7的语法。
模块系统
先来说说模块系统吧，如果你还未使用模块开发（AMD OR CMD），那可以跳过这个章节，或者看看我的另一篇文章《 JavaScript模块的前世今生 》，了解下javascript模块的历史，ES6的模块系统和现有模块系统是兼容的，也就是说你既可以在AMD中引用ES6中的模块，也可以在ES6中引用AMD中的模块。
在ES6模块系统中，引用其他模块系统可以用下面的代码：
import $ from 'jquery.js'; $('#test'); babel编译完的代码如下：
'use strict'; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } var _jqueryJs = require('jquery.js'); var _jqueryJs2 = _interopRequireDefault(_jqueryJs); (0, _jqueryJs2['default'])('#test'); babel默认使用的模块系统是commonjs，上面编译完的代码就是commonjs的代码。
再来看看如何导出能被其他模块系统引用的模块。
var $ = ''; export default $; 上面的代码，导出了默认导出模块，下面看看babel编译的结果：
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var $ = ''; exports['default'] = $; module.exports = exports['default']; 编译完还是符合commonjs规范的模块。好了对于其他导入和导出已发，不妨自己试试吧。
注意：babel编译完的代码会好使用严格模式。
关于模块的更多细节可以参考这里： - ES6 的模块系统
优秀特性
模块系统介绍完了，来看看ES6中一些其他优秀特性，babel并未对ES6的全部语法提供支持，下面我列举一些自己认为优秀的特性，并可立即使用的特性列举出来。
字符串
动态字符串使用反引号。并且支持模块变量和多行模式。
// 源码 `yanhaijing ${abc}`; // babel编译完的代码 "yanhaijing " + abc; 后面只列举源码，babel编译完的结构可自行查看。
解构赋值
使用数组和对象成员对变量赋值，优先使用解构赋值。
// 数组结构赋值 var arr = [1, 2, 3, 4]; var [first, second] = arr; // 对象结构赋值 var obj = {a: 1, b: 2}; var {a, b} = obj; 对象
ES6扩展了对象字面量的语法。
var a = 1; var obj = { a, [a + 1]: 3, add() {} } 数组
使用扩展运算符（…）拷贝数组。
var arr1 = [1, 2, 3]; var arr2 = [...arr1]; 函数
箭头函数：
(() => { console.log('Welcome to the Internet.'); })(); 不要在函数体内使用arguments变量，使用rest运算符（…）代替：
function concatenateAll(...args) { return args.join(''); } 使用默认值语法设置函数参数的默认值：
function f(a = 1) {} Class
总是用class，取代需要prototype操作。因为class的写法更简洁，更易于理解
class Child extends Parent { constructor() { super(); this.value = 1; } get() { return this.value; } } 更多优秀特性，请参看 这里 。
总结
好了这就是本文的全部内容了，读完本文按捺不住心中的小激动就快快来适用吧，es6真的很棒，babel非常重要，ES6还有很多特性等待你去挖掘哦，另外babel也有很多功能，你自己去发现吧。
如果你有什么疑问或建议在评论区和我一起讨论吧。
参考资料
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
