为何CodePen/JSFiddle与浏览器控制台返回结果不同？如何解决？

差异原因 #

CodePen 和 JSFiddle 的控制台输出做了简化处理：它们默认只展示数组的可枚举元素。matchAll() 返回的迭代器转换为数组后，每个匹配结果是一个类数组对象，其中 index、input、groups 这些属性属于不可枚举属性，所以在简化输出中不会被展示。而浏览器原生控制台会默认展开显示对象的所有属性（包括不可枚举的），因此能看到完整的匹配信息。

让CodePen/JSFiddle显示完整结果的方法 #

有两种常用方案：

1. 使用 console.dir() 替代 console.log()
console.dir() 会详细输出对象的所有属性（包括不可枚举属性），直接替换后就能看到完整的匹配信息：

function findZip(str) { return [...str.matchAll(/zip/g)]; }
console.dir(findZip("Zip is a file format used for data compression and archiving. A zip file contains one or more files that have been compressed, to reduce file size, or stored as is. The zip file format permits a number of compression algorithms."))

2. 手动提取所需属性转为普通对象
   如果只需要特定属性（比如 index 和匹配值），可以手动转换每个匹配结果为普通可枚举对象：

function findZip(str) {
  return [...str.matchAll(/zip/g)].map(match => ({
    match: match[0],
    index: match.index,
    input: match.input
  }));
}
console.log(findZip("Zip is a file format used for data compression and archiving. A zip file contains one or more files that have been compressed, to reduce file size, or stored as is. The zip file format permits a number of compression algorithms."))

这样输出的数组会包含每个匹配的具体属性信息，在CodePen/JSFiddle的控制台中能直接看到。

内容的提问来源于stack exchange，提问作者Frank Bangham