Javascriptで、二次元配列の要素を一つだけ変更したい。

Question

###前提・実現したいこと
Javascriptで、二次元配列の要素を一つだけ変更したい。

①3個の要素を持つ配列fieldsを作成
②3個の要素(文字列 'あ')を持つ配列fieldを作成し、一つ一つをfieldsに格納した。
③fields[1][1]要素に文字列'い'を代入した。

###発生している問題
fields[1][1]だけでなく、
・fields[0][1]
・fields[2][1]
も、文字列'い'に変わってしまっている。

###該当のソースコード

var fields = [],
    field = [];

    for(i=0;i<3;i++){
      field[i]='あ';
    }//一行ずつ生成

    for(i=0;i<3;i++){
      fields.push(field);
    }//格納（全体の完成）

    console.log(fields);

    fields[1][1]='い';

    console.log(fields);

###出力

[['あ','あ','あ'],
 ['あ','あ','あ'],
 ['あ','あ','あ']]

[['あ','い','あ'],
 ['あ','い','あ'],
 ['あ','い','あ']]

初歩的な質問で申し訳ないのですが、宜しくお願い致します。

Answer 1

オブジェクトや配列は「参照型」です。
よって、コピーするには下記のようにします。

fields.push(field.concat());

• 参照: 【Javascript】値渡しと参照渡しについてあらためてまとめてみる - Qiita

全体のソースコードは下記です。

var fields = [],
field = [];

for(i=0;i<3;i++){
  field[i]='あ';
}//一行ずつ生成

for(i=0;i<3;i++){
  fields.push(field.concat());
}//格納（全体の完成）

console.log(fields);

fields[1][1]='い';

console.log(fields);

追記: 参照渡しと値渡しの例

【参照渡し】

// 配列を作る
var field1 = ['あ', 'あ', 'あ'];

// 配列をコピーする
// ※ これは参照渡しなので、実は中身は同じ
var field2 = field1;

// コピーした配列の中身を変える
field2[1] = 'い';

// すると、元の配列の中身も変わってしまう
console.log(field1);
console.log(field2);

【値渡し】

// 配列を作る
var field1 = ['あ', 'あ', 'あ'];

// 配列をコピーする
// ※ 新たに配列が作られる
var field2 = field1.concat();

// コピーした配列の中身を変える
field2[1] = 'い';

// 今度は、元の配列の中身は変わらない
console.log(field1);
console.log(field2);

Comments

[OnomimonO]

参照渡しと値渡しに関して、理解したつもりでいたのですが、実際に出てくると気づくことができませんでした。
大変勉強になりました。ありがとうございました。