为什么JS中matchAll返回的迭代器只能被遍历输出一次？

String.prototype.matchAll() 返回的是不可逆的一次性迭代器对象，迭代器内部维护了遍历位置指针，只要被消费一次（所有遍历迭代器的操作都会触发消费，包括 Array.from、for...of、扩展运算符 ...、解构赋值等），指针就会移动到迭代结束的位置，无法重置，后续再次遍历该迭代器就不会返回任何内容。

对应两段代码的现象说明 #

• 第一段代码先执行 Array.from(result)，已经完整消费了迭代器，后续执行 for...of 遍历迭代器时，迭代器已经处于结束状态，所以无任何输出
• 第二段代码先执行 for...of 遍历完成迭代器消费，后续执行 Array.from(result) 自然无法拿到匹配值

解决方案 #

如果需要多次使用匹配结果，首次获取迭代器时就直接转为数组存储，后续所有操作都基于该数组即可：

let str = '<span class="my"> <var suv="inn">';
let regexp = /<(([a-z]+)\s*([^>]*))>/g;
// 直接将迭代结果转为数组存储，可多次使用
const matchList = Array.from(str.matchAll(regexp));

console.log("Array from 结果：");
console.log(matchList[0]);
console.log(matchList[1]);

console.log("for loop 结果：");
for (let value of matchList){
  console.log(value);
}

额外说明 #

你代码中写的 console.log(result[0]) 会输出 undefined，因为迭代器本身不是数组，不支持下标直接访问，只有转成数组后才能通过下标获取对应匹配项。

内容的提问来源于stack exchange，提问作者Aashit Garodia