为什么 JSON.parse 会更改嵌套数组中的值？

Question

为了学习 Angular 2，我在使用 SystemJS 时用 Angular CLI 做了一个 Connect Four game。

我正在使用新的基于 Webpack 的 CLI 从头开始复制工作，但我遇到了一个奇怪的问题...

以下方法接收带有 JSON 编码数据的字符串，并用它初始化一个新的游戏实例。我加了几个console.log来说明问题：

export class ConnectFourGameModel {
  static fromJSON(jsonString: any): ConnectFourGameModel {
    let jsonData = JSON.parse(jsonString);

    console.log('*** from JSON (compare the "columns" array between jsonString and jsonData below) ***');
    console.log('jsonString: ', jsonString);
    console.log('jsonData: ', jsonData);

    ...
    return result;
}

运行时，第一个 console.log 正确显示 JSON 字符串：

jsonString:
{... Several fields here ...
 "columns":[[0,0,0,0,0,1],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]]
}

但是第二个 console.log，这只是对该字符串调用 JSON.parse 的结果，看似随机更改值：

jsonData:
> Object {... Several fields here ...
  > columns: Array[15]
    V 0: Array[6]
        0: 2     <-- Should be 0
        1: 2     <-- Should be 0
        2: -1    <-- Should be 0
        etc...

为什么会这样？

如果 load the app on Github Pages，您可能会看得更清楚，在浏览器上打开 JavaScript 控制台，然后单击任何列进行移动。

存储库位于 Github：https://github.com/cmermingas/connect-four-webpack

我在这里寻找有关 使用 JSON.parse 解析嵌套数组的问题，但我无法将此问题与我发现的问题联系起来。

非常感谢！

Answer 1

如果将字符串示例放入 fiddle，它似乎解析得很好：

https://jsfiddle.net/z67Lgyrm/

可能发生的情况是您在 console.log() 调用后更改了数据。当您单击日志中的展开箭头时，它实际上显示的是对象 now 的值。

您似乎也在列数组上使用 slice()，但因为它是多维的，所以它只是复制对子数组的引用（即实际上没有复制值）。

请参阅此处了解可能的解决方案：Create copy of multi-dimensional array, not reference - JavaScript

为什么 JSON.parse 会更改嵌套数组中的值？

Why is JSON.parse changing the values in nested arrays?

javascript

typescript

web-worker

angular-cli