console.log() 在值实际改变之前显示变量的改变值

Question

这段代码我理解。我们复制 A 并将其称为 C。当 A 更改时，C 保持不变

var A = 1;
var C = A;
console.log(C); // 1
A++;
console.log(C); // 1

但是当 A 是一个数组时，情况就不同了。不仅C会改变，而且在我们接触A之前它也会改变

var A = [2, 1];
var C = A;
console.log(C); // [1, 2]
A.sort();
console.log(C); // [1, 2]

谁能解释第二个例子中发生了什么？

Answer 1

Console.log() 被传递给对象的引用，因此控制台中的值会随着对象的变化而变化。为避免这种情况，您可以：

console.log(JSON.parse(JSON.stringify(c)))

MDN warns:

请注意，如果您在最新版本的 Chrome 和 Firefox 中记录对象，您在控制台上记录的内容是对该对象的引用，这不一定是您当时的对象的“值”调用console.log()，但它是你打开控制台那一刻的对象的值。

Answer 2

Pointy's answer 有很好的信息，但这不是这个问题的正确答案。

OP 描述的行为是 2010 年 3 月首次报告的错误的一部分，2012 年 8 月为 Webkit 进行了修补，但在撰写本文时尚未集成到 Google Chrome 中。行为取决于在将对象字面量传递给console.log() 时控制台调试窗口是打开还是关闭。

摘自原始错误报告 (https://bugs.webkit.org/show_bug.cgi?id=35801)：

描述来自 mitch kramer 2010-03-05 11:37:45 PST

1) 创建具有一个或多个属性的对象字面量

2) console.log 该对象但保持关闭状态（不要在控制台中展开）

3) 将其中一个属性更改为新值

现在打开console.log，您会看到由于某种原因它具有新值，即使它的值在生成时不同。

我应该指出，如果您打开它，如果不清楚，它将保留正确的值。

来自 Chromium 开发者的回复：

评论 #2 来自 Pavel Feldman 2010-03-09 06:33:36 PST

我认为我们永远不会修复这个问题。我们无法在将对象转储到控制台时对其进行克隆，也无法监听对象属性的更改以使其始终真实存在。

我们应该确保现有行为是预期的。

随之而来的是很多抱怨，最终导致了错误修复。

2012 年 8 月实施的补丁中的变更日志注释 (http://trac.webkit.org/changeset/125174)：

截至今天，将对象（数组）转储到控制台将导致对象的属性变为 阅读控制台对象扩展（即懒惰）。这意味着在倾倒同一个对象的同时 使用控制台对其进行变异将很难调试。

此更改开始生成对象/数组的缩写预览 记录并将此信息传递到前端。这只发生在前端 已打开，它仅适用于 console.log()，不适用于实时控制台交互。

Answer 3

Mozilla 截至 2021 年 12 月的最新指南：

不要使用console.log(obj)，使用console.log(JSON.parse(JSON.stringify(obj)))。

这样您就可以确定您在记录时看到了obj 的值。否则，许多浏览器会提供实时视图，该视图会随着值的变化而不断更新。这可能不是你想要的。

Answer 4

数组是对象。变量引用对象。因此，第二种情况下的赋值将 reference（地址）从“A”复制到“C”中。之后，两个变量都指向同一个对象（数组）。

像数字这样的原始值在像您这样的简单赋值中完全从一个变量复制到另一个变量。 “A++”；语句为“A”分配一个新值。

换一种说法：变量的值可以是或者原始值（数字、布尔值、null 或字符串），也可以是引用到一个对象。字符串原语的情况有点奇怪，因为它们更像对象而不是原始（标量）值，但它们是不可变的，因此可以假装它们就像数字一样。

Answer 5

编辑：保留这个答案只是为了保留下面有用的 cmets。

@Esailija 实际上是对的 - console.log() 不一定会记录变量在您尝试记录它时的值。在您的情况下，对console.log() 的两次调用都将记录C 的值在 排序之后。

如果您尝试在控制台中将相关代码作为 5 个单独的语句执行，您将看到预期的结果（首先是 [2, 1]，然后是 [1, 2]）。

Answer 6

虽然它不会在所有情况下都有效，但我最终使用“断点”来解决这个问题：

mysterious = {property:'started'}

// prints the value set below later ?
console.log(mysterious)

// break,  console above prints the first value, as god intended
throw new Error()

// later
mysterious = {property:'changed', extended:'prop'}

Answer 7

Safari 中也存在此问题。正如其他人在这个问题和类似问题中指出的那样，控制台传递了一个对对象的引用，它在控制台打开时打印对象的值。例如，如果您直接在控制台中执行代码，则值会按预期打印。 而不是 JSON 字符串化，我更喜欢传播数组（例如在你的情况下 console.log([...C]);）和对象：结果是完全一样的，但代码看起来清洁一点。我有两个VS code snippets 可以分享。

    "Print object value to console": {
      "prefix": "clo",
      "body": [
         "console.log(\"Spread object: \", {...$0});"
      ],
      "description": "Prints object value instead of reference to console, to avoid console.log async update"
   },
   "Print array value to console": {
      "prefix": "cla",
      "body": [
         "console.log(\"Spread array: \", [...$0]);"
      ],
      "description": "Prints array value instead of reference to console, to avoid console.log async update"
   }

为了获得与 console.log(JSON.parse(JSON.stringify(c))) 相同的输出，您可以根据需要省略字符串部分。顺便说一句，spread syntax 通常可以节省时间和代码。