JavaScript中Object.values()是‘无成本’操作吗？内部实现探讨

每次调用Object.values()时，JavaScript都会遍历对象的所有可枚举自有属性值，然后创建并返回一个全新的数组，不存在所谓的“基于对象内部值的包装数组”。

原因说明 #

• 按照ECMAScript标准定义，Object.values()的核心逻辑就是收集目标对象的可枚举自有属性值（按属性创建顺序排序），然后生成新数组返回。
• 对象的属性值可能随时被修改，因此每次调用都需要实时遍历当前的属性状态，无法依赖固定的“包装结构”来返回结果。

针对大对象的性能建议 #

如果你的对象是包含10000个键值对的字典，频繁调用Object.values()确实会因为重复遍历带来性能开销，可参考以下优化方式：

• 缓存结果：如果对象属性不频繁变动，只需调用一次Object.values()并把结果缓存起来，后续直接使用缓存的数组即可。
• 同步维护数组：如果对象属性需要频繁更新，可以同时维护一个与对象值同步的数组，每次修改对象时同步更新数组，避免每次都调用Object.values()。

示例代码（缓存方式）：

// 初始化包含10000个键值对的字典
const largeDict = {};
for (let i = 0; i < 10000; i++) {
  largeDict[`key${i}`] = `value${i}`;
}

// 缓存一次值数组
const cachedValues = Object.values(largeDict);

// 后续多次使用缓存的数组，无需重复遍历
console.log(cachedValues.length); // 输出10000

// 当对象更新时，重新缓存
largeDict['newKey'] = 'newValue';
const updatedValues = Object.values(largeDict);

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