快来使用ECMAScript 2015吧

原文网址：http://yanhaijing.com/javascript/2015/09/04/try-es2015/

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，transpiler 的理念真是太棒了，当我蓦然回首，发现自己早已深处工程化前端之列，预编译已经融入到工作中了，如果你还处在前端的蛮荒时代（没有编译流程），那么可以先考虑引入工程化流程，再来接触ES6，目前比较流行的有grunt，gulp，webpack等。当然如果是node的话，那就没什么压力了。

babel支持的平台非常多，可以参看这里，点击相应平台，下面会给出使用的例子。

至此我真的想说，前端朋友们，是时候使用ES6了，大胆尝试吧，真的非常棒。

本文将介绍在fis中借助babel使用ES6的过程，包括环境搭建，基本语法，模块系统，优秀特性等。

环境搭建

作为前端开发者，我非常幸运能使用fis这么高大上的工具，fis在前不久刚刚发布了fis3，我们用的还是fis2，作为国产工具最大的杯具就是babel不提供默认支持，好的方面是fis团队已经开发出了插件支持——fis-parser-babel-5.x。

借助这个插件就搞定了编译问题，先来说说我的思路吧，我只希望给固定的js引入编译过程，我的思路是这样的，后缀为.es或.es.js的文件才引入编译流程，这样就可以共存了。

test.js // 普通js文件
test.es // es文件
test.es.js //es文件

我使用的是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也有很多功能，你自己去发现吧。

如果你有什么疑问或建议在评论区和我一起讨论吧。

参考资料