JavaScript调用Object.entries后返回数组异常扩展问题排查咨询

问题排查结论 #

首先明确：你看到的navigator.userAgent相关警告和数组异常没有任何关联，该警告是第三方依赖popper.min.js触发的Chrome审计提示，仅和浏览器用户代理字符串的版本更新规则有关，不会影响JS原生方法的返回结果。

数组异常的原因 #

正常场景下Object.entries、Object.keys、Object.values原生方法的返回值不可能出现你描述的多余元素，该问题100%是运行环境被篡改导致，常见原因有两类：

• Array原型被注入了可枚举属性：项目中其他脚本（通常是不规范的第三方依赖、老旧的自定义工具函数）直接给Array.prototype添加了可枚举的属性/方法，导致数组默认会带上这些原型上的元素。
• 原生方法被重写：有问题的polyfill或者自定义逻辑覆盖了Object.entries等原生方法的实现，返回了不符合规范的结果。

排查步骤 #

• 最小复现验证：新建空白页面只运行你提供的几行代码，不引入任何其他依赖，如果输出正常即可确认是项目内其他代码导致的问题。
• 验证原生方法是否被篡改：执行console.log(Object.entries.toString())，原生方法输出应为function entries() { [native code] }，如果输出其他内容说明方法被重写。
• 验证Array原型是否被篡改：执行console.log(Object.getOwnPropertyNames(Array.prototype))，查看是否有异常的数字键或者自定义属性。

解决办法 #

根治方案 #

找到篡改原生对象/方法的代码，做如下修改：
给原型添加属性时，使用Object.defineProperty设置enumerable: false，避免属性被遍历到：

// 错误写法
Array.prototype.getFirst = function() { return this[0] }
// 正确写法
Object.defineProperty(Array.prototype, 'getFirst', {
  value: function() { return this[0] },
  enumerable: false
})

移除不规范的Object系列方法的自定义polyfill，替换为符合ECMA规范的实现。

临时规避方案 #

如果无法快速定位篡改来源，可以在你的业务代码里加一层过滤逻辑：

// 处理Object.entries返回结果，过滤非数组元素
domain = Object.entries(dates).filter(item => Array.isArray(item))

// 也可以自己实现安全的entries逻辑，不受环境篡改影响
const safeEntries = (obj) => {
  const res = []
  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      res.push([key, obj[key]])
    }
  }
  return res
}
domain = safeEntries(dates)

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