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() ，但因为它是多维的，所以它只是复制对子数组的引用(即，实际上并未复制值)。

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