javascriptで配列にwhileで代入するとループが抜けられなかった。

Question

二次元配列にmarkを5個入れようと思ったら、下記のコードではループが抜けられなかったのです。console.logで出力すると、全部markで埋まった配列が出力されるんですが、なんでそうなるのかが、よく分かりません。どこに問題があるのでしょうか？

let mark = "O";
let length = 3;
function makeArray(){
	let i = 0;
	let x;
	let y;
	let markArray = (new Array(length)).fill((new Array(length)).fill(""));
	while(i < 5){
		x = Math.floor(Math.random()*length);
		y = Math.floor(Math.random()*length);
		if(!markArray[x][y]){
			markArray[x][y] = mark;
			i++;
		}
		console.log(markArray);
	}
	return markArray;
}
let markArray = makeArray();
console.log(markArray);

Comments

[m.ts10806]

変数markはどこで定義されて何が入っているのでしょうか。このまま実行すると未定義エラーが出ます。

[liflect]

書き忘れました。'O'が入っています

[m.ts10806]

ゴールの形がよく見えてないですが、抜けられないのはiがカウントアップされていないに他なりません。i,x,yをwhileの中で出力してもらえれば分かるかと。そもそも何をしているか分かっていますか？ >let markArray = (new Array(length)).fill((new Array(length)).fill(mark));

[liflect]

訂正します。markArray = (new Array(length)).fill((new Array(length)).fill(""));

[m.ts10806]

既に書いていますが、ゴールを明記してください。「二次元配列にmarkを5個入れようと思った」だけでは最終形が見えません。無限ループが抜けさえすれば良いのか、それともやりたい形があるのか。やりたい形があるならそれは何なのか。無限ループを抜けたいだけならiのカウントアップが行われていないだけなのでそこを見れば良いですし。

[liflect]

ループを抜けてmarkが5個入った二次元配列を返すことです。

[m.ts10806]

文字での説明ではなく例えば配列をコンソールで出力した結果のような形とかそういう意味です。「５個はいった二次元配列」だけではほぼ無限に答えがあります。

[m.ts10806]

解決されたんですね。良かったです。今後は「確実に伝わる表現」を心掛けてください。文章で伝えるには限界があることも多いです。

Answer 1

面白いことに、markArray[0]とmarkArray[1]は同一オブジェクトになっています。

let markArray = (new Array(length)).fill((new Array(length)).fill(""));

console.log(markArray[0] === markArray[1]); // true
console.log(markArray[0] === markArray[2]); // true

↑なので、

markArray[x][y] = mark;

↑この処理はxの値に関係なく、yの値にのみ依存して実行されます。
その結果、

if(!markArray[x][y]){
    markArray[x][y] = mark;
    i++;
}

↑このブロック内に到達できるのは最大3回。
whileループの継続条件「while(i<5)」からは絶対に抜け出せない、ということになります。

let markArray = (new Array(length)).fill((new Array(length)).fill(""));

↑「Array.fill(object)」を実行すると配列の各要素に「object」そのものを埋め込むようです。
（stackoverflowでもトピックに上がってました）
一度、空要素で埋めてからmapするとobjectのコピーが埋め込まれます。

let markArray = (new Array(length)).fill().map(v=>(new Array(length)).fill(""));

console.log(markArray[0] === markArray[1]); // false
console.log(markArray[0] === markArray[2]); // false

Comments

[liflect]

分かりやすく教えてくれてありがとうございました。

Answer 2

一応参考までに

let mark = "O";
let length = 3;
let tmp = makeArray(mark,length);
console.dir(tmp);
function makeArray(mark,length){
  let i = 0;
  let ret = (new Array(length)).fill(null).map(function(x){return new Array(length).fill("")});
  while(i < 5){
    let x = Math.floor(Math.random()*length);
    let y = Math.floor(Math.random()*length);
    ret[x][y] =mark;
    i++;
  }
  return ret;
}

Answer 3

多次元配列の宣言がよくなかったようです。
書きか出たら、おそらく意図しているような動作になりました。

改修前

    let markArray = (new Array(length)).fill((new Array(length)).fill(""));
    

改修後

    let markArray= new Array(length);
    for(let i=0;i<length;i++){
      markArray[i]=new Array(length).fill("");
    }

改修後(全体)

let mark = "O";
let length = 3;
function makeArray(){
    let i = 0;
    let x;
    let y;
    //let markArray = (new Array(length)).fill((new Array(length)).fill(""));
    let markArray= new Array(length);
    for(let i=0;i<length;i++){
      markArray[i]=new Array(length).fill("");
    }
    while(i < 5){
        x = Math.floor(Math.random()*length);
        y = Math.floor(Math.random()*length);
        if(!markArray[x][y]){
            markArray[x][y] = mark;
            i++;
        }
        console.log(markArray);
    }
    return markArray;
}
let markArray = makeArray();
console.log(markArray);

出力結果

(3) ["", "", "O"]
(3) ["O", "O", "O"]
(3) ["", "O", ""]

Comments

[liflect]

確かに動くようになりました。

Answer 4

ただ単に

if(!markArray[x][y]){
            markArray[x][y] = mark;
            i++;
}

この部分が実行できていないだけでは？
if文の条件を見直すと解決すると思います

Comments

[liflect]

console.logで全部markで埋まった配列が出力されるのでその部分は実行されているはずだと思ってるんですが？

[yuyabu]

ソースを確認したところ件のブロックは3回しか実行できていないようです。つまりiが3で止まりi>5とならない。

[yuyabu]

おそらくジャグ配列の使い方が間違っています

```
et mark = "O";
let markArray = (new Array(length)).fill((new Array(length)).fill(""));
markArray[2][0] = mark;
console.log(markArray)
```

上記のコードを実行したところ

```
(3) [Array(3), Array(3), Array(3)]
0
:
(3) ["O", "", ""]
(3) ["O", "", ""]
(3) ["O", "", ""]
```

となってしまいました。
多分`markArray[2][0] = mark;`で2,0を指定しているから

```
(3) ["", "", ""]
(3) ["", "", ""]
(3) ["O", "", ""]
```

となってほしいはずですよね

3回の書き込みで全ての要素がmarkになってしまい、それ以上、件のifブロックを通らないことによりiが5以上にならないことが原因で無限ループになっているようです。