JavaScriptで自動生成されたオブジェクトについて

Question

実現したいこと

JavaScript で自動生成されたオブジェクトに対して、Keyを変更したいと考えています。

let objTable = {};
let arrTable = [];
for(let j = 1; j <= 3; j++ ){
  arrTable.push('-');
  objTable[j] = arrTable;
  
}
/*
{ '1': [ '-', '-', '-' ],
  '2': [ '-', '-', '-' ],
  '3': [ '-', '-', '-' ] }
*/
}

こんなふうに生成されたオブジェクトに対して、1のkeyの配列の一部分を変更したいと思い、spliceを使用しました。
1の配列の0をWに変更したいと思いました。

objTable[1].splice(0,1,'W')

/*
{ '1': [ 'W', '-', '-' ],
  '2': [ 'W', '-', '-' ],
  '3': [ 'W', '-', '-' ] }
*/

ただこうするとすべての配列が変更されてしまいました。

let obj =
{ '1': [ '-', '-', '-' ],
  '2': [ '-', '-', '-' ],
  '3': [ '-', '-', '-' ] }
obj[1].splice(0,1,'W')
console.log(obj)

/*
{ '1': [ 'W', '-', '-' ],
  '2': [ '-', '-', '-' ],
  '3': [ '-', '-', '-' ] }
*/

変数にオブジェクトを直接入れるとうまくいきます。
この違いってなぜなのかがわからず、質問いたしました。

よろしくお願いいたします。

Answer 1

こうするとすべての配列が変更されてしまいました。

元のコードではlet arrTable = [];と配列を一回しか生成していないため、同じ配列オブジェクトが3つともに代入されます。

オブジェクトを切り離したい場合、Array.prototype.slice()でコピーするなどしましょう。

Comments

[katsun0921]

arrTable.slice()で解決できました！
ありがとうございました