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

如果你把你的字符串示例放在一个小提琴中，它似乎解析得很好：

https://jsfiddle.net/z67Lgyrm/

您可能会在console.log()来电后更改数据。当您单击日志中的展开箭头时，它实际上显示了对象现在的值。

你似乎在columns数组上使用slice()，但由于它是多维的，它只是复制了子数组的引用（即实际上没有复制值）。

请点击此处查看可能的解决方案：Create copy of multi-dimensional array, not reference - JavaScript

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

1 个答案: