转载

使用ES6进行开发的思考

ECMAScript6已经于近日进入了RC阶段，而早在其处于社区讨论时，我就开始一直在尝试使用ES6进行开发的方案。在 Babel 推出后，基于ES6的开发也有了具体可执行的解决方案，无论是Build还是Debug都能得到很好的支持。

而在有了充足的环境、工具之后，我们面临的是对ES6众多新特性的选择和分析，以便选取一个最佳的子集，让我们可以享受ES6带来的便利（减少代码量、提高可读性等）的同时，也可以顺利运行于当前以ES3-ES5为主的浏览器环境中。

整体结论

以下是在经过分析后得出的一个初步结论，ES6的特性列表选自 es6features 。

在本文中，会将这些特性分为几个类型，并一一解释其使用场景。

★★★ 推荐使用 ★★ 有考虑地使用 ★ 慎重地使用 ☆ 不使用
特性	推荐程度
arrows	★★★
classes	★★★
enhanced object literals	★★★
template strings	★★★
destructuring	★★
default + rest + spread	★★★
let + const	★★★
iterators + for..of	★★
generators	★
unicode	☆
modules	★★
module loaders	☆
map + set + weakmap + weakset	★★
proxies	☆
symbols	★
subclassable built-ins	☆
promises	★★★
math + number + string + array + object APIs	★★★
binary and octal literals	★
reflect api	☆
tail calls	★★

在后续按特性介绍时，需要关注一点：如果你不想使用shim库（如Babel的 browser-polyfill.js 和 generatorsRuntime.js ）或者想使用尽可能少的helper（Babel的 externalHelpers 配置），那么需要按你的需求进一步缩减可使用的ES6特性，如 Map 、 Set 这些就不应该使用。

语法增强类

Arrow function

Arrow functions 是ES6在语法上提供的一个很好的特性，其特点有：

语法更为简洁了。
文法上的固定 this 对象。

我们 鼓励在可用的场景下使用Arrow functions ，并以此代替原有的 function 关键字。

当然Arrow functions并不是全能的，在一些特别的场景下并不十分适用，最为典型的是Arrow functions无法提供函数名称，因此做递归并不方便。虽然可以使用 Y combinator 来实现函数式的递归，但其可读性会有比较大的损失。

配合后文会提到的对象字面量增强，现在我们定义方法/函数会有多种方式，建议执行以下规范：

所有的Arrow functions的参数均使用括号 () 包裹，即便只有一个参数：
```
// Good let foo = (x) => x + 1;   // Bad let foo = x => x + 1; 
```
定义函数尽量使用Arrow functions，而不是 function 关键字：
```
// Good let foo = () => {  // code }; // Bad function foo() {  // code } // Bad let foo = function () {  // code }  
```
除非当前场景不合适使用Arrow functions，如函数表达式需要自递归、需要运行时可变的 this 对象等。

对于对象、类中的方法，使用增强的对象字面量：

// Good let foo = {  bar() {   // code  } }; // Bad let foo = {  bar: () => {   // code  } }; // Bad let foo = {  bar: function () {   // code  } };

增强的对象字面量

对象字面量的增强主要体现在3个方面：

可在对象中直接定义方法

let foo = {       bar() {         // code     } };

我们 推荐使用 这种方式定义方法。

可使用通过计算得出的键值

let MY_KEY = 'bar';   let foo = {       [MY_KEY + 'Hash']: 123 };

我们 推荐在需要的时候使用计算得出的键值 ，以便在一个语句中完成整个对象的声明。

与当前Scope中同名变量的简写

let bar = 'bar';   let foo = {       bar // 相当于bar: bar };

我们 并不推荐 这样的用法，这对可读性并没有什么帮助。

模板字符串

模板字符串的主要作用有2个：

多行字符串

let html =   `<div>     <p>Hello World</p> </div>`

从上面的代码中可以看出，实际使用多行字符串时，对齐是个比较麻烦的事。如果 let html 这一行本身又有缩进，那么会让代码更为难受一些。

因此我们 不推荐使用多行字符串 ，必要时还是可以使用数组和 join('') 配合，而生成HTML的场景我们应该尽量使用模板引擎。

字符串变量替换

let message = `Hello ${name}, it's ${time} now`;

这是一个非常方便的功能，我们 鼓励使用 。但需要注意这些变量并不会被HTML转义，所以在需要HTML转义的场景，还是乖乖使用模板引擎或者其它的模板函数。

解构

解构（原谅我没什么好的翻译）是个比较复杂的语法，比如：

let [foo, bar] = [1, 2];   let {id, name, children} = getTreeRoot();

还可以有更复杂的，具体可以参考 MDN的文档。

对于这样一个复杂且多变的语法，我们要有选择地使用，建议遵循以下原则：

不要一次通过解构定义过多的变量，建议不要超过5个。
谨慎在解构中使用“剩余”功能，即 let [foo, bar, ...rest] = getValue() 这种方式。
不要在对象解构中使用过深层级，建议不要超过2层。

函数参数增强

ES6为函数参数提供了默认值、剩余参数等功能，同时在调用函数时允许将数组展开为参数，如：

var foo = (x = 1) => x + 1;   foo(); // 2 var extend = (source, ...args) => {    for (let target in args) {   for (let name in Object.keys(target) {    if (!source.hasOwnProperty(name) {     source[name] = target[name];    }   }  } }; var extensions = [    {name: 'Zhang'},  {age: 17},  {work: 'hard'} ]; extend({}, ...extensions);

我们 鼓励使用这些特性让函数的声明和调用变得更为简洁 ，但有一些细节需要注意：

在使用默认参数时，如果参数默认值是固定且不会修改的，建议使用一个常量来作为默认值，避免每一次生成的开销。
不要对 arguments 对象使用展开运算，这不是一个数组。

关键字类

let和const

这是2个用来定义变量的关键字，众所周知的， let 表示块作用域的变量，而 const 表示常量。

需要注意的是， const 仅表示这个变量不能被再将赋值，但并不表示变量是对象、数组时其内容不能改变。如果需要一个不能改变内容的对象、数组，使用 Object.freeze 方法定义一个真正的常量：

const DEFAULT_OPTIONS = Object.freeze({id: 0, name: 'unknown'});

不过如果你在程序中能控制不修改对象的话，这并不具备什么意义， Object.freeze 是否会引起执行引擎的进一步优化也尚未得到证实。

我们 推荐使用 let 全面替代 var 。同时 建议仅在逻辑上是常量的情况下使用 const ，不要任何不会被二次赋值的场景均使用 const 。

迭代器和for..of

迭代器是个好东西，至少我们可以很简单地遍历数组了：

for (let item in array) {       // code }

但是迭代器本身存在一些细微的缺点：

性能稍微差了一些，对于数组来说大致与 Array.prototype.forEach 相当，比不过原生的 for 循环。
不能在循环体中得到索引 i 的值，因此如果需要索引则只能用原生的 for 循环。
判断一个对象是否可迭代比较烦人，没有原生方法提供，需要自行使用 typeof o[Symbol.iterator] === 'function' 判断。

对于迭代器，我们 鼓励使用并代替原生 for 循环 ，且推荐关注以下原则：

对于仅一个语句的循环操作，建议使用 forEach 方法，配合Arrow functions可非常简单地在一行写下循环逻辑。
对于多个语句的循环操作，建议使用 for..of 循环。
对于循环的场景，需要注意非数组但可迭代的对象，如 Map 和 Set 等，因此除 arguments 这类对象外，均建议直接判断是否可迭代，而不是 length 属性。

生成器

生成器（Generators）也是一个比较复杂的功能，具体可以参考 MDN的文档。

对于生成器，我的建议是 非常谨慎地使用 ，理由如下：

生成器不是用来写异步的，虽然他确实有这样一个效果，但这仅仅是一种Hack。异步在未来一定是属于 async 和 await 这两个关键字的，但太多人眼里生成器就是写异步用的，这会导致滥用。
生成器经过Babel转换后生成的代码较多，同时还需要 generatorsRuntime 库的支持，成本较高。
我们实际写应用的大部分场景下暂时用不到。

生成器最典型的应用可以参考 C#的LINQ 获取一些经验，将对一个数组的多次操作合并为一个循环是其最大的贡献。

模块和模块加载器

ES6终于在语言层面上定义了模块的语法，但这并不代表我们现在可以使用ES6的模块，因为实际在ES6定稿的时候，它把模块加载器的规范给移除了。因此我们现在有的仅仅是一个模块的 import 和 export 语法，但具体如“模块名如何对应到URL”、“如何异步/同步加载模块”、“如何按需加载模块”等这些均没有明确的定义。

因此，在模块这一块，我们的建议是使用标准语法书写模块，但使用AMD作为运行时模块解决方案，其特点有：