Javascriptの配列について

Question

前提

canvasを使ってJavascriptで描画しようとしています。
二次元配列に値を代入しようとしているのですが思うように代入できません。

実現したいこと

二次元配列への値の代入

発生している問題・エラーメッセージ

一箇所のみ1を代入しているはずなのに確認でコンソールに値を出力すると、ランダムで選ばれた列の全ての値が1に変わってしまいます。
(エラーメッセージはありません)

該当のソースコード

// 関係ないコードは省略しています
const n = 20;
let B = new Array(n+2);
let zero = new Array(n+2);

setup();

function setup(){
  // (n+2)x(n+2)の二次元配列をつくる
  for(let i=0; i<n+2; i+=1){
     zero[i] = 0.0;
  }
  for(let i=0; i<n+2; i+=1){
     B[i] = zero;
  }

  // 初期化(ランダムに選んだ一箇所のみ値を1にする)
  let rand_x = Math.trunc( (Math.random()*(n-10)) + 5 );
  let rand_y = Math.trunc( (Math.random()*(n-10)) + 5 );

  B[rand_x][rand_y] = 1.0;

  // 確認
  for(let i=0; i<n+2; i+=1){
      for(let j=0; j<n+2; j+=1){
         console.log(B[j][i]);
      }
  }
}

試したこと

変数の宣言の仕方とか、値の代入の仕方とかもう一度調べ直しましたが問題はそこではなさそうです。

わかる方ご教授ください。よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Answer 1

不具合の原因

• 配列の参照コピーをしてしまっているからです。
  • Bの空の要素全てにzeroという配列を代入している、つまり、全部同一の配列です。
  • 一つ変更したら、全て同一の配列なので、全て同じ変更がされます。

コード例

参照コピーせず、全部配列を作成しましょう。

function setup() {
  const n = 20;
  const arr = Array.from({length: n+2}, () => Array(n+22).fill(0));

  const rand_x = Math.trunc( (Math.random()*(n-10)) + 5 );
  const rand_y = Math.trunc( (Math.random()*(n-10)) + 5 );

  arr[rand_x][rand_y] = 1;
  console.log(arr);
}

setup();

Comments

[maya_u]

原因まで教えていただきありがとうございました。

Answer 2

自分も初心者なのであまり断言はできないですけど、
たぶん B[i] = zero; って、入門本によく書かれてる初心者あるある事項じゃないですかね…。
.slice() 使えとか、.concat() 使えとか、最近だと ary2 = [...ary1]; みたいにしろ、とか。

B[i] = zero;

を

B[i] = zero.slice();

にしたら出来たりしませんか。


そんなことより、
二次元配列はforループぐるぐるより下記一発で幸せになれるみたいです。

let array = Array.from(new Array(10), () => new Array(10).fill(0.0));

Comments

[maya_u]

あるあるなのですね…教えていただきありがとうございました。
slice()を使ったらできました。

また、forループぐるぐる以外のやり方も教えていただき、ありがとうございます。とても幸せです(笑)
上手く動かせたので今度からそちらを使うようにしたいと思います。