配列の中の配列の組み合わせをランダムにして被ることなく1つずつ取り出したい

配列の中に配列の組み合わせを作り、それをランダムにして被ることなく取り出したいのですが、HTMLで記述したボタンを押すごとにrand()関数が実行され、またシャッフルされて被ってしまいます。どうすれば解決できるでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>index</title>
6</head>
7
8<body>
9  <p><input type="button" value="ランダム" onclick="rand()"></p>
10
11  <script src="js/jquery-3.4.1.min.js"></script>
12  <script src="js/index.js"></script>
13</body>
14
15</html>
16

JavaScript
1//ランダムな値を取得
2function rand() {
3  var movieList = [0, 1, 2, 3, 4, 5, 6];
4
5  // 組み合わせの用意
6  var movieComb = [];
7  for (var i = 0; i < movieList.length; i++) {
8    for (var j = 0; j < movieList.length; j++) {
9      if (movieList[i] !== movieList[j]) {
10        movieComb.push([movieList[i], movieList[j]]);
11      }
12    }
13  }
14
15  movieComb = movieComb[Math.floor(Math.random() * movieComb.length)];
16  console.log(movieComb);
17}

結果は下記を参照ください

[1,4]が被ってます...

また、42個の組み合わせができますが、全ての組み合わせを表示させた後にalertを表示させたいのですが、どのようにすればよろしいでしょうか？

siruku6

2019/10/06 06:08

https://pisuke-code.com/js-create-non-overlap-randoms/ 重複なしで乱数を生成させる方法を検索したところ、こんな記事がありましたので、試してみてはいかがでしょう？

行動規範の内容に同意します

回答3件

ベストアンサー

こんにちは

ご質問に挙げられているコードの以下の部分

javascript
1var movieList = [0, 1, 2, 3, 4, 5, 6];
2
3// 組み合わせの用意
4var movieComb = [];
5for (var i = 0; i < movieList.length; i++) {
6  for (var j = 0; j < movieList.length; j++) {
7    if (movieList[i] !== movieList[j]) {
8      movieComb.push([movieList[i], movieList[j]]);
9    }
10  }
11}

までで作成した movieComb をシャッフル（要素の順番をランダムに入れ替え）した配列を作り、これの先頭要素から順に返していき、最後の要素を返したら、次からはもう返す要素がないことを示す何らかの値を返すような仕組みを作ればよいです。

そのような仕組みを実現する具体的なコードは色々な書き方ができそうですが、なるべく自分でコードを書かないで済ませる方法として、ジェネレーターを使う手があります。上記のコードで作成された movieComb をシャッフルした配列を、再度 movieComb に代入した後で、

javascript
1const combGenerator = (function*() { yield* movieComb;  })();

とすれば、 combGenerator.next() が返すオブジェクトの valueプロパティに要素（長さ２の配列）が入っており、もう返す要素がない場合は、done プロパティがtrue になります。

以下、これを使ったコード例を CodePen に作成しました。

動作確認用サンプル： https://codepen.io/jun68ykt/pen/wvvvyPo

上記のサンプルでは、

ボタンがクリックされるごとに、次の組み合わせを取得して表示します。
クリック回数が 43 回目のときには、表示する組み合わせはもう無いので、その旨をアラートで表示します。
配列をシャッフルするために lodash の _.shuffle を使用しています。

以上、参考になれば幸いです。

追記

上記の回答コードでは、配列全体をlodashの _.shuffle を使ってシャッフルし、シャッフルされた配列の先頭から順次、要素を取得するためにジェネレーターを使いましたが、これらを使わずに、ご質問のコードにあるように、配列ary の要素の中からランダムな１つを

javascript
1ary[Math.floor(Math.random() * ary.length)]

によって得ることを使ったコードを、以下に挙げます。

javascript
1  // 与えられた配列の要素を、同じ要素は返さないようにランダムに取得する関数を返す（高階）関数
2  const randomNextMaker = (ary) => {
3    // 引数のary のコピーを作成
4    ary = [...ary];
5        
6    return () => {
7      // 配列が空になっている場合
8      if (ary.length === 0)  return { done: true };
9      
10      // 0以上 ary.length-1以下の整数を取得
11      const randomIndex = Math.floor(Math.random() * ary.length);
12
13      // 返却すべき要素を取得
14      const value = ary[randomIndex];
15      
16      // randomIndexの位置の要素を除去
17      ary.splice(randomIndex, 1);
18     
19      return { value, done: false }
20    }
21  }
22  
23  // movieComb の重複無しランダム取得関数を得る。
24  const nextComb = randomNextMaker(movieComb);

上記のようにすると、 nextComb には関数が入ってきます。 nextComb() が返すのはオブジェクトで、先のジェネレータと同様に、まだ要素がある場合は、 value プロパティに次の要素が入り、要素がない場合は、 doneプロパティに true が入ってくるようにしています。randomNextMaker の返す関数の中では、ひとつ要素を返すごとに、その要素を元の配列から削除して、次に返される要素の候補から外されるようにしています。

上記を使ったコード例を以下のCodePen に作成しました。

動作確認用サンプル： https://codepen.io/jun68ykt/pen/vYYYjqP

投稿2019/10/06 06:57

編集2019/10/06 14:51

jun68ykt

総合スコア9058

取り出した組み合わせを記録しておき、かぶったら選び直せばよろしい

投稿2019/10/06 06:21

y_waiwai

総合スコア87774

javascript
1var len=7;
2var a=Array(len*len).fill(null)
3  .map((x,y)=>[parseInt(y/len),y%len])
4  .filter(x=>x[0]!==x[1])
5  .map(x=>[x,Math.random()])
6  .sort((x,y)=>x[1]-y[1])
7  .map(x=>x[0]);
8console.dir(a);