JavaScript键值对赋值后值未变更、两次console.log输出一致问题求助

你遇到的现象本质是浏览器控制台的惰性求值特性导致的假象，并非赋值操作未生效。

为什么两次打印结果一致 #

JS中对象属于引用类型，调用console.log打印对象时，控制台仅保存对象的内存引用，不会立即录制对象所有属性的快照。等你手动点击展开对象查看属性时，控制台才会读取对象当前的最新属性值。由于你的赋值操作是同步执行的，在你展开两次打印的对象时，赋值已经完成，因此两次展开看到的都是修改后的值，视觉上呈现为“赋值没生效”的错觉。

验证赋值是否真的生效的方法 #

你可以通过以下两种方式避开控制台的惰性求值特性，查看真实的赋值结果：

• 直接打印目标基础类型属性，而非整个对象：

  // 修改前打印name值
  console.log(files[index].name)
  files[index].name = "lol"
  // 修改后打印name值
  console.log(files[index].name)
  

  基础类型值打印时会直接输出调用console.log时刻的真实值，两次输出会明确显示差异。
• 打印时生成对象的快照：
  打印前对对象做序列化再反序列化，生成当前对象的独立拷贝，后续修改不会影响打印结果：

  console.log(JSON.parse(JSON.stringify(files[index])))
  files[index].name = "lol"
  console.log(JSON.parse(JSON.stringify(files[index])))
  

排除控制台问题后仍赋值失败的排查方向 #

如果通过上述方法确认赋值确实未生效，可以排查两种常见情况：

• 目标对象的name属性被设置为不可写，或存在setter拦截了赋值逻辑
• 目标对象是通过Object.freeze()生成的冻结对象，冻结对象的属性无法被修改

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