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

小半 • 2024年3月19日下午9:29 • 技术漫谈 • 阅读 125

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

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

【译】Node.js Stream API：理解与运用: 介绍了使用 Async Generator 让 Stream 支持 for await of 语法

关于 Date.prototype.setDate 方法你可能不知道的事: 介绍了使用 Generator 实现懒数组。

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

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

以 TypeScript 演示：

// 两个类型相同的数组，foo 和 bar
const 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)进行交流。