避免使用 ES9 中 RegExp.prototype [@@matchAll]() 导致的性能问题

在 ES9 中，RegExp 原型新增了 @@matchAll 方法，该方法可以一次性匹配字符串中所有的匹配项并返回一个 可迭代对象（Iterable），方便了对字符串的匹配操作。不过，在实际开发中，需要格外注意 @@matchAll 的性能问题。

@@matchAll 的原理

@@matchAll 方法接收一个字符串参数，返回一个迭代器对象，该对象包含匹配正则表达式的所有结果。如下代码所示：

const str = "hello world";
const regex = /o/g;
const matches = str.matchAll(regex);

console.log(matches); // 输出：RegExpStringIterator {}

要迭代 @@matchAll 返回的迭代器对象，可以使用 for...of 循环遍历：

for (const match of matches) {
  console.log(match);
}
// 输出：
// ["o", index: 4, input: "hello world", groups: undefined]
// ["o", index: 7, input: "hello world", groups: undefined]

@@matchAll 的问题

虽然 @@matchAll 看起来非常简单方便，但是如果要处理大量字符串，就需要注意它的性能问题。因为 @@matchAll 会遍历整个字符串，将所有匹配的结果都放入一个数组中，甚至对于较短的字符串，也有可能产生较大的数组，并且这个过程无法中断。这个过程通常比其它正则表达式匹配方法（如 RegExp.prototype.test()）要慢得多。

此外，为了获取迭代器中的所有匹配项，您必须显式地处理每个遍历器返回的元素。因此，当您只需要首个匹配时，使用 @@matchAll 会导致性能浪费。

如何避免使用 @@matchAll

为了避免在处理大量字符串时遇到性能问题, 可以考虑使用类似于 RegExp.prototype.exec() 的方法实现遍历，这种方法一次迭代一个匹配项并且不需要等待整个字符串遍历完成。对于需要在不同字符串中执行相同正则表达式的情况，可以使用 @@matchAll 方法，但是需要注意数据量大的情况下可能导致性能问题。如果只需要获取第一个匹配项，就应该使用正则表达式方法中的 RegExp.prototype.exec() 方法。

以下是示例代码，使用 exec() 方法获取第一个匹配项：

const str = "hello world";
const regex = /o/g;
let match;

while ((match = regex.exec(str)) !== null) {
    console.log(match[0], match.index, regex.lastIndex);
    // 输出：o  4  5
    // 输出：o  7  8
}

总结

虽然 @@matchAll 看起来非常方便，但是在实际开发中，需要注意避免其导致的性能问题。在处理大量字符串时，可以使用类似 RegExp.prototype.exec() 的方法实现遍历，遇到需要在多个字符串中执行正则表达式的情况，需要根据实际情况选择方法，不能一昧追求方便而忽略性能问题。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65aceab9add4f0e0ff67bf3f