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

Question

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

我正在使用新的基于 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() 调用后更改了数据。当您单击日志中的展开箭头时，它实际上现在 显示了对象的值。

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

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