6个讨喜的 ES6 小技巧

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

在本文中，笔者将介绍6个由 ES6 新功能带来的小技巧。在每个技巧末尾，都会附上笔者的拙作“《探索 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}`);

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

”《探索 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 = ` 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》“中的“箭头函数”一章 6、通过子类工厂实现简单混合(mixins)

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

// Function id() simply returns its parameter

const id = 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 快速入门（简单易学的新功能）

本文转自 OneAPM 官方博客

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

再不学ES6你就out了 —— 一文搞懂ES6 ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版 虽然15年就有正式版本了，但是国内普遍商用是在2018年之后去了，甚至到现在有很多前端仍然搞不懂ES6
快速了解ES6模块化少不了这篇文章 在之前的JavaScript中是没有模块化概念的，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。如果要进行模块化操作，就需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化，于是才有了ES6模块化的诞生。 为什么要有模块化，或者模块化的好处是什么呢？
Monorepo与multirepo区别何在？ **Monorepo是一个新的名词，但不是一个新的概念。**从软件开发最开始，我们已经在开始用这种模式了。这种模式的一个中心思想就是，用一个repo来管理所有的源代码。除了这种模式以外，另一个比较受推崇的模式就是multirepo,也就是用多个repo来管理自己的源代码。
ES6 特性快速扫盲 ES6，也称 ECMAScript2015，对目前来说，它并不是 JavaScript 最新的标准，但是它已经广泛用于编程实践中。如果你还没用过 ES6，现在还不算太晚，跟我一起扫一遍吧。