使用 Generator 提升 matchAll 体验

发表于 | 分类于 | 评论数：

在 js 中匹配所有往往都是 replace 中回调处理的。
虽然能达到目的，但其实不够优雅，而且不能中断。

一个例子

假设我们有如下数据。(临时编的，没好的例子)

1
2
3
工号: 1, 姓名: 张三
工号: 2, 姓名: 李四
工号: 3, 姓名: 王五

我们需要匹配出 工号 和 姓名 字段。
我之前的做法是这样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const arr = [];
const str = `
工号: 1, 姓名: 张三
工号: 2, 姓名: 李四
工号: 3, 姓名: 王五
`;

str.replace(/(\d+)[^:]+:\s*([^\n]+)/g, (m, id, name) => arr.push({ id, name }));

console.log(arr);
// [
//   { id: '1', name: '张三' },
//   { id: '2', name: '李四' },
//   { id: '3', name: '王五' }
// ]

相信大部分人也都是这样做的，因为这样简单方便。
当然，我也见过有人 while + exec 去做，都没问题。

其实都 es6 了，这么写不是特别优雅，甚至不方便控制。
例如我匹配到前3条后，不继续匹配了，那只能 while + exec 去控制。
replace 根本做不到，他会匹配完所有才终止。

Generator 登场

Generator 生成的遍历器(迭代器)，用在这种场景下非常棒。
我们来封装下 while + exec 操作。

1
2
3
4
5
6
function* matchAll(str, re) {
  let res;
  while ((res = re.exec(str)) !== null) {
    yield res;
  }
}

可以看到非常简单的封装，但实际使用效果非常好。

1
2
3
4
5
6
7
8
9
const str = `
工号: 1, 姓名: 张三
工号: 2, 姓名: 李四
工号: 3, 姓名: 王五
`;

for (let [m, id, name] of matchAll(str, /(\d+)[^:]+:\s*([^\n]+)/g)) {
  console.log({ id, name });
}

写起来优雅了点，而且可以直接 break 来终止匹配。

小结

生成器还有很多妙用，例如 co 模块等。
肯定有更多好玩的等着我们去挖掘。
例如用他按行读取文本数据，可以优化传统 callback 体验。