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++) {&nbsp; test.push([]);&nbsp; for (let yy = 0; yy < 6; yy++) {&nbsp; &nbsp; test[xx].push(0.1);&nbsp; }}Promise.resolve(console.log(test)).then(() => {&nbsp; test[1][2] = 100;}).then(()=>{&nbsp; console.log(test);})或使用异步/等待let test = [];for (let xx = 0; xx < 2; xx++) {&nbsp; test.push([]);&nbsp; for (let yy = 0; yy < 6; yy++) {&nbsp; &nbsp; test[xx].push(0.1);&nbsp; }}(async() => {&nbsp; await console.log(test)&nbsp; test[1][2] = 100;&nbsp; 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