浏览器DevTools对象显示异常：展开后值与预期不符求助

这是浏览器控制台的惰性求值特性导致的：

• 执行console.log(obj)时，控制台仅显示对象的引用快照，不会立即读取并展示所有属性的实际值。
• 当你展开对象查看详情时，浏览器才会读取该引用指向的对象当前值。如果objects数组里的所有元素实际是同一个对象的引用（比如生成objects时重复修改同一个对象再添加到数组），所有元素最终都会指向最后一次修改后的对象，展开后自然全是最后一个对象的值。

解决办法 #

• 确保每个元素是独立对象：生成或处理对象时，每次都创建新对象而非复用同一引用。比如用对象解构复制：

  // 生成objects时创建新对象
  let objects = [];
  for (let i = 0; i < 5; i++) {
    let newObj = {
      purchaseDate: new Date(),
      // 其他属性
    };
    objects.push(newObj);
  }
  
  // 处理现有objects时复制对象
  let res = [];
  for (const obj of objects) {
    const newObj = {...obj};
    console.log(newObj);
    res.push(newObj);
  }
  

• 强制打印即时值：将对象转成JSON字符串再转回，打印当前值的副本：

  console.log(JSON.parse(JSON.stringify(obj)));
  

• 用表格形式打印：console.table(obj)会直接展示当前对象的所有属性值，无惰性求值问题，适合查看简单对象。

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