2 番目の JavaScript ループで同じ数値を繰り返す原因となるランダム化の問題の説明

JavaScript 配列の反復乱数を理解する

配列のランダム化の問題を解決し、一意のランダム選択を保証するための JavaScript フロントエンド スクリプト

// Solution 1: Correcting the Random Selection Logic
let col1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
let col2 = [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

for (let i = 0; i < 5; i++) {
  const random = Math.floor(Math.random() * col1.length);
  const number = col1.splice(random, 1)[0];
  console.log(number);
}

for (let i = 0; i < 5; i++) {
  const random = Math.floor(Math.random() * col2.length);
  const number = col2.splice(random, 1)[0];
  console.log(number);
}

関数型プログラミングによる一意の乱数の確保

配列操作を強化し、再利用性を向上させるための JavaScript フロントエンド関数型プログラミング

// Solution 2: Functional Approach with Reusable Functions
const getRandomFromArray = (array, count) => {
  const result = [];
  for (let i = 0; i < count; i++) {
    const random = Math.floor(Math.random() * array.length);
    result.push(array.splice(random, 1)[0]);
  }
  return result;
};

const col1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const col2 = [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

console.log(getRandomFromArray(col1, 5));
console.log(getRandomFromArray(col2, 5));

さまざまな環境向けのソリューションのテスト

単体テストを追加して、さまざまなブラウザーにわたるランダム化ロジックを検証する

// Solution 3: Simple Unit Test to Verify Random Output
const assert = (condition, message) => {
  if (!condition) {
    throw new Error(message || "Assertion failed");
  }
};

const testRandomFunction = () => {
  const array = [1, 2, 3, 4, 5];
  const result = getRandomFromArray([...array], 5);
  assert(result.length === 5, "Result length should be 5");
  assert(new Set(result).size === 5, "All numbers should be unique");
};

testRandomFunction();
console.log("All tests passed!");

JavaScript 配列のランダム化に関するよくある質問

1. なぜ追加するのか +1 配列の長さにするとロジックが壊れますか?
2. 追加 +1 配列の長さを超えるインデックスが生成され、無効な選択やエラーが発生する可能性があります。
3. どのようにして splice() 要素が繰り返されていないことを確認しますか?
4. 選択された要素を配列から削除することで、 splice() 以前に選択した要素が今後の反復で使用できないようにします。
5. どうなるか indexOf() 返品 -1?
6. もし indexOf() 返品 -1、これは値が配列内に見つからないことを意味し、検証せずに直接使用するとエラーが発生する可能性があります。
7. どのようにして Math.random() 乱数を生成する機能?
8. Math.random() 0 (両端を含む) と 1 (両端を含まない) の間のランダムな 10 進数を生成します。これは、乗算を使用して目的の範囲に合わせてスケーリングできます。
9. コードを関数にカプセル化する利点は何ですか?
10. ロジックを関数にカプセル化すると、再利用性、可読性、保守性が向上します。また、コードの重複が防止され、テストが容易になります。

JavaScript 配列のランダム化に関する最終的な考え方

この問題から得られる重要な点は、乱数を扱うときにインデックスを正しく計算することが重要であるということです。 配列。長さに余分な値を追加するなどの小さな間違いにより、予期しない動作が発生し、結果が繰り返し発生する可能性があります。などの正確な方法を使用して、 Math.floor() 有効な選択を保証し、そのようなエラーを防ぎます。

さらに、次のようなメソッドを使用すると、 splice() 選択した要素を削除し、重複を避けるのに役立ちます。再利用可能な関数でロジックをラップすると、コードがより効率的で保守しやすくなります。単体テストなどのベスト プラクティスを適用すると、ランダム化ロジックがさまざまな環境で機能することが検証され、コードの全体的な信頼性が向上します。