Почему JSON.parse меняет значения в вложенных массивах?

Question

Чтобы узнать Угловой 2, я использовал Connect Four game с Угловым CLI, когда он использовался SystemJS.

Я тиражирование усилия с нуля с новым CLI WebPack на основе и у меня возникли странные проблемы ...

Следующий метод получает строку 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... 

Почему это Хаппа Ening?

Возможно, вы увидите, что лучше, если вы 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() вызова. Когда вы нажимаете стрелку раскрывающегося списка в журнале, на самом деле отображается значение объекта .

Также вы используете slice() в массиве столбцов, но поскольку он является многомерным, он только копирует ссылки на дочерние массивы (то есть фактически не копирует значения).

Смотрите здесь для возможного решения: Create copy of multi-dimensional array, not reference - JavaScript