6个讨喜的 ES6 小技巧

【编者按】本文做者为 Axel Rauschmayer，主要介绍6个 ES6 小技巧。文章系国内 ITOM 管理平台 OneAPM 编译呈现。

在本文中，笔者将介绍6个由 ES6 新功能带来的小技巧。在每一个技巧末尾，都会附上笔者的拙做“《探索 ES6》”中的相关阅读材料（本书可在线上免费阅读）。

一、经过参数默认值实现强制参数

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》“中的”必需参数“一节

二、经过 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}`);
}

arr.entries() 会为索引元素对(index-element pair)返回一个可迭代量。而重构样式 [index, elem] 让咱们能够直接访问对中的两个组成成分。console.log() 的参数是所谓的template literal(模板常量)，后者会给 JavaScript 带去字符串插值。

更多信息

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

三、迭代统一码(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》“中的”散布操做符(…)“一节

四、经过重构交换变量的值

若是你把两个变量放到一个数组中，以后重构该数组为相同的变量，你能够交换变量的值，而不须要中间变量：

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

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

更多信息：

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

五、经过模板常量实现简单模板

ES6 中的模板常量更像是字符串常量，而不是传统的文本模板。可是，若是将它们做为函数返回值，就能够把它们用于模板。

const tmpl = addrs => `        <table>
    ${addrs.map(addr => `            <tr><td>${addr.first}</td></tr>            <tr><td>${addr.last}</td></tr>
    `).join('')}        </table>
`;

函数 tmpl (一个箭头函数)会将数组的 addrs 映射到一个字符串。让咱们对数组的 data 应用 tmpl() 函数：

const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));
// Output:
// <table>
//
//     <tr><td><Jane></td></tr>
//     <tr><td>Bond</td></tr>
//
//     <tr><td>Lars</td></tr>
//     <tr><td><Croft></td></tr>
//
// </table>

更多信息：

• 文章：“《处理 ES6 模板常量中空格》”
• ”《探索 ES6》“中的”经过未加标签的模板常量实现文本模板“一节
• ”《探索 ES6》“中的“箭头函数”一章

六、经过子类工厂实现简单混合(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”一节

七、延伸阅读

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

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

OneAPM 能帮助您轻松锁定 Node.js 应用性能瓶颈，经过强大的 Trace 记录逐层分析，直至锁定行级问题代码。以用户角度展现系统响应速度，以地域和浏览器维度统计用户使用状况。想阅读更多技术文章，请访问 OneAPM 官方博客。

本文转自 OneAPM 官方博客

原文地址：http://www.2ality.com/2016/05/six-nifty-es6-tricks.html