Javascript 2D 数组意外行为答案

【问题标题】：Javascript 2D Array unexpected behaviourJavascript 2D 数组意外行为
【发布时间】：2020-04-01 16:13:15
【问题描述】：

我目前正在使用 Javascript 进行开发，但遇到了一个无法解决的问题。我会说我在编程方面非常有经验，但以前从未发生过这样的事情，我无法通过朋友或互联网解决它。

在下面的代码中，我创建了一个简单的二维数组并用 0.1 填充每个位置。然后我记录数组，修改它并再次记录。你期望输出是什么？我希望它记录一个充满许多 0.1s 的数组并记录另一个充满许多 0.1s 的数组，在位置 1,2 它应该是 100。

但真正的结果是两个相似的数组。当我注释掉我编辑数组的行时，它变得更加奇怪。然后输出数组再次相同，但没有修改。所以第一个日志取决于它之后执行的代码。这对我来说似乎非常奇怪。我还尝试将修改行设置为 1 秒超时。结果相同。

提前感谢您的帮助。

let test = [];
for (let xx = 0; xx < 2; xx++) {
   test.push([]);
   for (let yy = 0; yy < 6; yy++) {
      test[xx].push(0.1);
   }
}
    
console.log(test);
test[1][2] = 100;
console.log(test);

【问题讨论】：

我可以在问题本身中看到它的两个不同数组。运行 sn-p 你得到两个不同的数组
天啊，但在 Chrome 或 Safari 中并非如此。
查看我发布的答案

标签： javascript arrays undefined-behavior

【解决方案1】：

查看在您的问题中编辑的 sn-p。您的代码工作正常。

如果您在浏览器的控制台上看到两次相同的数组，那是因为浏览器的开发工具是如何工作的。当您执行console.log(test) 时，数组不会打印到控制台，它们的参考会打印在那里。然后你“扩展”数组的内容。由于您记录了两次相同的引用，因此它们指向相同的值。

如果您改为记录console.log(test.toString())，您会看到两个记录的值不同。

例如，在 Chrome 上：

展开前：

展开后：

【讨论】：

【解决方案2】：

无论何时console.log(someObject)，浏览器都会输出对象的实时视图；这意味着您对该对象所做的任何更改都会更新控制台输出。

而是使用JSON.stringify(someObject) 序列化对象，然后使用console.log 它。这会在序列化时为您提供该对象的快照。但是你必须小心，someObject 可能有循环引用，并且很少有其他陷阱，这会在序列化过程中产生问题。

见https://developer.mozilla.org/en-US/docs/Web/API/Console/log

【讨论】：

【解决方案3】：

console.log 在异步/同步方面会有不同的行为。

欲了解更多信息：console.log() async or sync?

您可以使用 Promise 或 async/await 实现不同的输出

let test = [];
for (let xx = 0; xx < 2; xx++) {
  test.push([]);
  for (let yy = 0; yy < 6; yy++) {
    test[xx].push(0.1);
  }
}

Promise.resolve(console.log(test)).then(() => {
  test[1][2] = 100;
}).then(()=>{
  console.log(test);
})

或者使用异步/等待

let test = [];
for (let xx = 0; xx < 2; xx++) {
  test.push([]);
  for (let yy = 0; yy < 6; yy++) {
    test[xx].push(0.1);
  }
}


(async() => {
  await console.log(test)
  test[1][2] = 100;
  await console.log(test);
})();

【讨论】：