重複しない乱数の数値を一つずつ取り出すにはどうしたらよろしいでしょうか？

Question

前提・実現したいこと

例えば、
let num = Math.floor(Math.random() * 5 );とするとランダムな数値を一つずつ
取り出すように、重複しないランダムな数値を一つずつ取り出して使いたいのですが、
どうしたらよろしいでしょうか？
どなたか詳しい方ご教示お願いいたします。

■■な機能を実装中に以下のエラーメッセージが発生しました。

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

shift()を使うと、ランダムな重複しない配列から最初の方の数値を削除するため、
ひとつずつ表示できても、デバッグしていくとword = words[nums.shift()];のnumsの
要素数自体減ってしまいます。

エラーメッセージ

該当のソースコード

const words = [
    'dream',
    'sky',
    'blue',
    'middle',
    'cloud',
  ];

  const nums = [0,1,2,3,4];
  
  let word;
  let r;
  
  function question() {
    for (let i = nums.length -1; i > 0; i--) {
      r = Math.floor(Math.random() * (i + 1));

      let tmp = nums[i];
      nums[i] = nums[r];
      nums[r] = tmp;
    }
      let i;
      word = words[nums.shift()];
    }

試したこと

shift()以外のメソッドを探したのですが、ほとんど要素を返すものではなかったため、うまくいきませんでした。

ここにより詳細な情報を記載してください。

Comments

[yambejp]

> 重複しないランダムな数値

重複しない連続する０からはじまる整数をランダムにほしいのでしょうか？

[whitehorse85921]

yambejpさん。
ありがとうございます。
０から始まる重複しないランダムな数値は出来ているので、その数値を一つずつ取り出して使いたいです。
分かりにくくてすみません。

[ozwk]

真の目的はwordsから1つずつランダムに値を取り出すことではありませんか?

[whitehorse85921]

ozwkさん。
ありがとうございます。
はい、仰る通りでございます。

Answer 1

そんなあなたにジェネレータはいかがですか？

  function* question_g() {
    for (let i = nums.length -1; i > 0; i--) {
      r = Math.floor(Math.random() * (i + 1));

      let tmp = nums[i];
      nums[i] = nums[r];
      nums[r] = tmp;
    }
    for (let x of nums) {
      yield words[x];
    }
  }
  


  let question = question_g();
  console.log(word = question.next().value); // question.next().value を取り出すごとに新しい値が取れる。
  console.log(word = question.next().value);
  console.log(word = question.next().value);
  console.log(word = question.next().value);
  console.log(word = question.next().value);
  console.log(question.next().done); // もう値がない時には、question.next().done がtrueになる。

Comments

[whitehorse85921]

Lhankor_Mhyさん、ありがとうございました。
ジェネレーター初めて見ました。勉強になります。

Answer 2

こういうことじゃないかな思うんですが…

const words = [
    'dream',
    'sky',
    'blue',
    'middle',
    'cloud',
  ];

  let word;
  let r;
  let cnt = 0;
  
  // 最初にこれを呼び出しておく
  function init(){
    for (let i = words.length -1; i > 0; i--) {
      r = Math.floor(Math.random() * (i + 1));

      let tmp = words[i];
      words[i] = words[r];
      words[r] = tmp;
    }
  }


  function question() {
    word = words[cnt];
    cnt++; // cntが5になった場合の処理は別途何か書いてください
  }

※今テストする環境がないので動くかわからないまま打っています

おそらく
同じ単語が出てこないのは、shift()の挙動で一回使った数値が消えているからです。
で、全単語打つと止まるのはnumsが空になってしまったからではないでしょうか？

シャッフルについては、numsを挟まなくてもwordsを直接並び替えて頭からとっていけばいいと思います。

Comments

[whitehorse85921]

q_sane_qさん、ありがとうございます。
最後まで単語を打つことができましたし、タイプミスなく打つとperfectと出したかったのですが、それもできました。私のつたない質問の真意を読み取って下さり、また、修正コードも出して下さり、とても有難いです。

まだまだ私のプログラムは問題多いですが、難所はq_sane_qさんのおかげでクリアできたと思います。
ありがとうございました。

Answer 3

var num=5;
const nums = Array(num).fill(null).map((x,y)=>[y,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
console.log(nums);

Comments

[whitehorse85921]

ありがとうございます。
これは重複しない乱数の数値を一つずつ出しているのでしょうか？

[yambejp]

連続した0以上の整数をランダムに格納していますので
あとは先頭から順番に取り出してください

[whitehorse85921]

ありがとうございます。
このnumsを
words = [
'dream',
'sky',
'blue',
'middle',
'cloud',
];
words[]の四角かっこの中に入れて、word[1],word[0]などのようにしたいのですが
word = words[nums];とするとこのタイピングゲームが動きませんでした。難しいです。

[yambejp]

一つずつとりだすって自分で書いてませんでしたか？
forで回すならforEachするなり好きにしてください
いまのままだと最低でも
word = words[nums[0]]

[whitehorse85921]

すみません。forやforEachではうまくいきませんでした。
words[ここを動的に数値を変えたい]をやりたいので、words[nums[0]];でもうまくいきませんでした。
おいそがしいところすみませでした。。。

[yambejp]

なにが詰まっているのさっぱりわかりませんが・・・
const words = ['dream','sky','blue','middle','cloud',];
var nums = Array(words.length).fill(null).map((x,y)=>[y,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
while((num=nums.shift())!==undefined){
console.log(words[num]);
}

[whitehorse85921]

説明が下手ですみません。。。
一度にすべての単語を出すのではなくて、一つずつ単語をブラウザ上に出していってタイピングしていくイメージでした。
このソースをポートフォリオとして出したかったので、すべてのコードをお見せできずず見ません。
ありがとうございましたm(_ _)m

[yambejp]

何に引っかかっているのでしょうか？
一つだけ取りだすなら、すでに回答したとおり
console.log(words[nums[0]]);
でできますよね？

[whitehorse85921]

言葉足らずですみません。コンソール画面ではないブラウザ上の画面のことです。

[q_sane_q]

多分ですけど
question()
を一回呼ぶ度に
nums[0]、nums[1]...
と取って行きたいってことじゃないでしょうか
それをshift()使ってるせいでnumsが先頭要素から削れていってしまってるのが意図していない挙動という…

[yambejp]

HTMLどこに、どのタイミングで表示するのですか？
一番雑なのはbody要素のinnerHTMLを書き換える
ちゃんとやるなら表示用のHTML要素を予め用意しておき
そのtextContentを書き換える

[whitehorse85921]

q_sane_qさん。
ありがとうございます。
仰る通りでございます。

[whitehorse85921]

yambejpさん、何度もお付き合いくださりありがとうございます。
ozwkさんや、q_sane_qさんが仰って下さったことをやりたいです。
誤解を与えてしまいすみません。

[q_sane_q]

その前に
question()　の中にあるforでnumsの順番をシャッフルしてるんだと想いますが
question()呼ぶたびにシャッフルしてたらnumsの末尾に行くまでに同じ数字が複数回出る可能性あると思うのですが
それはその挙動でいいのでしょうか？

[yambejp]

ご提示のquestion()がHTMLに出力するような仕様にはなっていませんが？

[whitehorse85921]

q_sane_qさん、ありがとうございます。
デバッグしてみてシャッフル後のnumsを見てみたのですが、同じ数字が出ることはありませんでした。ただ、shift()をしているためnumsの要素数自体は減っています。

[whitehorse85921]

yambejpさん、ありがとうございます。
別のところで、target.textContent = word;と出力しておりますので、question()が直接HTMLに出力するような仕様にはなってございません。

[whitehorse85921]

q_sane_qさん、何度もすみません。
タイピングゲームをしてるうちは同じ単語が出てくることはありませんでしたが、全単語を全部正しく打つとプログラムが止まってしまうことがあります。

[yambejp]

> 別のところで、target.textContent = word;と出力しております

であればword = words[nums[0]] なのですから、ただしく表示されるはずです。
書かれていないところの仕様を説明することは難しいです

[whitehorse85921]

yambejpさん、ありがとうございます。
仰る通りだと思います。
困らせるような質問をしてしまいすみません。