Javascript 2D 数组意外行为

Question

我目前正在使用 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);

Answer 1

查看在您的问题中编辑的片段。您的代码工作正常。

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

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

例如，在 Chrome 上：

展开前：

展开后：

Answer 2

console.log关于异步/同步会有不同的行为。

您可以使用 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);

})();

Answer 3

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

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

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Console/log