6个讨喜的 ES6 小技巧（什么人讨喜）

6个讨喜的 ES6 小技巧（什么人讨喜）

1、通过参数默认值实现强制参数

ES6 的参数默认值只有在真正使用时才会求值。这可以让你强制确保提供参数：

/** * Called if a parameter is missing and * the default value is evaluated. */function mandatory() {    throw new Error('Missing parameter');}function foo(mustBeProvided = mandatory()) {    return mustBeProvided;}

函数调用 mandatory() 只有当参数 mustBeProvided 缺失时才会执行。

互动：

> foo()    Error: Missing parameter    > foo(123)    123

更多信息：

”《探索 ES6》“中的”必需参数“一节

2、通过 for-of 循环迭代数组索引与元素

forEach() 方法允许你迭代数组中的元素。如果你想的话，还可以得到每个元素的索引：

var arr = ['a', 'b', 'c'];    arr.forEach(function (elem, index) {        console.log('index = '+index+', elem = '+elem);    });    // Output:    // index = 0, elem = a    // index = 1, elem = b    // index = 2, elem = c

ES6 的 for-of 循环是支持 ES6 迭代（通过可迭代量与迭代器）与重构（destructuring）的循环。如果将重构与新的数组方法 entries() 相结合，可以得到：

const arr = ['a', 'b', 'c'];    for (const [index, elem] of arr.entries()) {        console.log(`index = ${index}, elem = ${elem}`);    }

更多信息

”《探索 ES6》“中的”重构“一章”《探索 ES6》“中的”可迭代量与迭代器“一章”《探索 ES6》“中的”带有重构样式的迭代“一章”《探索 ES6》“中的”模板常量“一章

3、迭代统一码(Unicode)代码点

有些统一码代码点（大致上多为字符）包含两个 JavaScript 字符。比如，表情符：

字符串实现了 ES6 迭代。如果迭代字符串，会得到编码的代码点（一或两个 JavaScript 字符）。举例如下：

for (const ch of 'x\uD83D\uDE80y') {        console.log(ch.length);    }    // Output:    // 1    // 2    // 1

这样，你就可以计算一个字符串中的代码点数量：

> [...'x\uD83D\uDE80y'].length    3

散布操作符 (…) 会将其操作数中的项目插入到一个数组中。

更多信息

”《探索 ES6》“中的”ES6 中的统一码“一章”《探索 ES6》“中的”散布操作符(…)“一节

4、通过重构交换变量的值

如果你把两个变量放到一个数组中，之后重构该数组为相同的变量，你可以交换变量的值，而不需要中间变量：

[a, b] = [b, a];

我们有理由相信，JavaScript 引擎将来会优化这一模式从而避免创建数组。

更多信息：

”《探索 ES6》“中的”重构“一章

5、通过模板常量实现简单模板

ES6 中的模板常量更像是字符串常量，而不是传统的文本模板。但是，如果将它们作为函数返回值，就可以把它们用于模板。

const tmpl = addrs => `        

        ${addrs.map(addr => `                                `).join('')}        

${addr.first}

${addr.last}

    `;

const data = [        { first: '', last: 'Bond' },        { first: 'Lars', last: '' },    ];    console.log(tmpl(data));    // Output:    // 

    //    //         //         //    //         //         //    // 

Bond

Lars

更多信息：

6、通过子类工厂实现简单混合(mixins)

如果一个 ES6 类继承了另一个类，该类要通过一个任意的表达式动态指定（而不是通过某个标识符静态指定）。

// Function id() simply returns its parameter    const id = x => x;    class Foo extends id(Object) {}

这允许你将一个 mixin 实现为如下函数：该函数会把某个类 C 映射至一个新类（带有 mixin 方法），且该新类的父类为 C。例如，下面的 Storage 与 Validation 方法均为 mixins:

const Storage = Sup => class extends Sup {        save(database) { ··· }    };    const Validation = Sup => class extends Sup {        validate(schema) { ··· }    };

你可以将他们用于构建如下的 Employee 类：

class Person { ··· }    class Employee extends Storage(Validation(Person)) { ··· }

更多信息：

”《探索 ES6》“中的“简单 mixins”一节

7、延伸阅读

《探索 ES6》中的下面两章完善地介绍了 ECMAScript 6：

ES6 中新特性概览ECMAScript 6 快速入门（简单易学的新功能）