巧用 JavaScript Generator 函数对多个数组进行合并遍历

平时很少会去用 Generator 函数，但真要用到时，发现真是方便 :-)

回顾：关于 Generator 的一些用处，之前的文章也稍有提过：

• 【译】Node.js Stream API：理解与运用: 介绍了使用 Async Generator 让 Stream 支持 for await of
  语法
• 关于 Date.prototype.setDate 方法你可能不知道的事: 介绍了使用 Generator 实现懒数组。

编码过程中，偶尔会遇到这种场景：

有多个同类型的数组(假设是2个，数组 foo 和 数组 bar)，每个数组有一套自己的数据处理逻辑，然后全部数组又共享了另一部分处理逻辑，此时，如何有效的组织代码，就需要一些考验了。

以 TypeScript 演示：

// 两个类型相同的数组，foo 和 barconst foo = ['hello', 'world'];const bar = ['你好', '世界'];// foo 有一套自己的处理逻辑for (const e of foo) {    handleFoo(e);}// bar 也有一套自己的处理逻辑for (const e of bar) {    handleBar(e);}// foo 和 bar 还有一套共用的逻辑// 问号部分怎么写for (const e of ???) {    handleAll(e);}

常规的写法有2种：

// 使用 concat 来整合数组for (const e of foo.concat(bar)) {    handleAll(e);}// 使用 spread 来整合数组for (const e of [...foo, ...bar]) {    handleAll(e);}

这样当然可以，但不可避免的，这2种方式都需要构造一个更大的数组，以包含所有的元素。

另一种方法是，利用 Generator 来整合两个(或更多个)数组：

/** * 该工具方法用来整合多个同类型数组 */function* iter<E>(...arrs: E[][]) {    for (const arr of arrs) {        yield* arr;    }}// 这样调用for (const e of iter(foo, bar)) {    handleAll(e);}

更多的思考

最近写的几篇文章大都是关于怎么写出更优雅的代码，如果你也读过，应该知道我不喜欢上面那种一个一个调用函数的编码风格。实际上，我会这样写：

const handlers = [handleFoo, handleBar, handleAll];[foo, bar, iter(foo, bar)].forEach((v, i) => {    for (const e of v) {        handlers[i](e);
    }
});

这样写的好处是，当有更多的数组和 handlers 时，直接往两个数组里塞即可。我称这种写法是 配置式写法
，即，功能是可配置的。

如果你觉得这样写比较有意思，或者想提高编码风格水平，欢迎加我的微信号(youmoolee)进行交流。