解释导致第二个 JavaScript 循环重复相同数字的随机化问题

Temp mail SuperHeros
解释导致第二个 JavaScript 循环重复相同数字的随机化问题
解释导致第二个 JavaScript 循环重复相同数字的随机化问题
Mauve Garcia
2024年10月17日星期四 上午8:44:40

JavaScript 循环中随机数的意外行为

生成 JavaScript 中的随机数 是使用数组时的常见任务。但是，使用循环进行此类操作时有时会出现意外结果。一个值得注意的问题是多次迭代生成相同或可预测的值。

本文研究了一个常见问题，即两个 for 循环应该从两个不同的数组生成随机数。虽然第一个循环运行正常，但第二个循环似乎每次都返回相同的值序列，特别是数字 30、29、28、27 和 26。

我们将探究这个问题的根本原因并了解为什么 第二个 for 循环无法产生真正的随机性。此外，本文将提供修复代码并确保每个循环独立运行的解决方案。

通过了解其中的陷阱 随机化逻辑 以及方法如何 数学.随机() 工作中，您将能够在未来的项目中处理类似的问题。让我们更深入地研究代码以找出错误并讨论改进方法。

命令 使用示例
Math.floor() 用于将小数向下舍入到最接近的整数。在随机化的背景下，它确保生成的随机索引保持在数组的有效范围内。
Math.random() 生成 0（含）和 1（不含）之间的伪随机十进制数。这是两个循环中使用的随机化逻辑的核心，用于从数组中选择随机元素。
array.splice() 从数组中删除元素并返回它们。在此脚本中，它确保一旦选择了某个元素，就会将其从原始数组中删除，以避免在后续迭代中重复。
array.at() 检索指定索引处的元素。即使索引为负，安全地访问元素在这里也特别有用，尽管对于该解决方案来说并不重要。
array.indexOf() 返回在数组中找到给定元素的第一个索引，如果该元素不存在，则返回 -1。该方法最初用于定位元素，但导致了逻辑问题。
new Set() 创建一个仅存储唯一值的新 Set 对象。在单元测试中，用于验证所有选定的随机数是否唯一。
assert() 用于测试的简单断言函数。如果不满足条件，它会引发错误，这有助于确保代码按预期运行。
throw new Error() 当断言失败时生成自定义错误消息。这确保测试在执行期间提供有意义的反馈。
const 使用块作用域声明变量。使用 const 声明的变量无法重新分配，这通过防止关键函数或数组的意外更改来增强代码稳定性。

分析 JavaScript 数组随机化背后的逻辑

所提供的解决方案解决了一个常见问题，即两个循环尝试从不同的数组生成随机数，但一个循环无法提供真正的随机结果。造成这个问题的主要原因在于如何 数学.随机() 被使用。在原始脚本中，确定随机索引时的计算包括+1。这个微妙的错误导致程序有时会选择无效索引，从而导致第二个循环产生非随机输出，例如从 30 到 26 的倒计时。

修正后的解决方案使用 Math.floor(Math.random() * array.length) 确保生成的索引有效。该公式背后的逻辑是将以下结果相乘 数学.随机() （介于 0 和 1 之间）除以数组的长度。这 数学.floor() 方法将结果向下舍入到最接近的整数，这确保索引始终在范围内。此更改解决了该问题，确保循环的每次迭代随机选择不同的元素。

改进的解决方案之一利用 数组.splice() 从数组中检索和删除元素。此方法通过直接修改原始数组来防止重复，确保先前选择的元素在后续迭代中不再可用。第一个循环可以按照此逻辑正常工作，现在，在应用类似的更正后，第二个循环的行为方式相同。每次调用 splice() 都会返回删除的元素，然后将其打印到控制台。

另一个关键改进涉及创建一个可重用的函数来选择随机元素。 getRandomFromArray 函数通过将逻辑封装到单个可重用块中来简化该过程。这种方法使代码更易于维护且更易于理解。此外，还增加了单元测试，以验证功能在不同环境下的正确性。使用 断言 语句有助于确认返回数组的长度符合预期，并且所有选定的元素都是唯一的。通过这种方式构建代码，解决方案不仅功能强大，而且健壮且易于适应不同的场景。

了解 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 中，使用 随机数生成 inside 循环需要仔细实施以避免常见的陷阱。当不正确的索引计算导致选择非预期或重复的元素时，就会出现一个关键问题。生成随机数时，开发人员必须确保索引保持在数组的有效范围内。在原来的代码中，添加 +1 随机公式中的长度意外超出了数组的边界，这导致第二个循环中出现不可预测的行为。

另一个被忽视的问题是数组操作方法的选择。尽管 splice() 对于删除元素而不留间隙是有效的，使用 indexOf() 错误地可能会破坏逻辑。如果在数组中找不到随机生成的值，该函数将返回 -1，可能会导致错误。通过直接使用生成的索引进行拼接 Math.floor()，代码完全避免了这个问题，因为只访问有效的索引。

此外，可重用性和模块化是专业发展的关键实践。将功能封装在可重用函数中可确保更好的可维护性。它还避免了代码重复并提高了可读性。使用单元测试是确保结果一致的另一种有效做法，尤其是在处理随机元素时。通过断言验证结果有助于及早发现意外行为。通过结合良好实践，开发人员可以编写健壮的 JavaScript 代码，不仅满足功能需求，而且能够在各种场景下高效执行。

有关 JavaScript 数组随机化的常见问题

  1. 为什么添加 +1 数组长度打破了逻辑？
  2. 添加 +1 可以生成超出数组长度的索引，从而导致无效选择或错误。
  3. 怎么样 splice() 确保元素不重复？
  4. 通过在选择元素时从数组中删除元素， splice() 确保先前选择的元素不可用于未来的迭代。
  5. 如果发生什么情况 indexOf() 回报 -1？
  6. 如果 indexOf() 回报 -1，这意味着在数组中没有找到该值，如果未经验证直接使用可能会导致错误。
  7. 怎么样 Math.random() 生成随机数的函数？
  8. Math.random() 生成 0（含）和 1（不含）之间的随机小数，可以使用乘法对其进行缩放以适应所需的范围。
  9. 将代码封装成函数有什么好处？
  10. 将逻辑封装在函数中可以提高可重用性、可读性和可维护性。它还可以防止代码重复并使测试更容易。

关于 JavaScript 数组随机化的最终想法

这个问题的关键要点是在使用随机数时正确计算索引的重要性 数组。诸如为长度添加额外值之类的小错误可能会导致不可预测的行为，从而导致重复的结果。使用精确的方法，例如 Math.floor() 确保有效的选择并防止此类错误。

此外，使用类似的方法 splice() 帮助删除选定的元素，避免重复。将逻辑包装在可重用函数中可以使代码更加高效和可维护。应用单元测试等最佳实践可以验证随机化逻辑是否可以在不同环境中工作，从而提高代码的整体可靠性。

JavaScript 数组随机化问题的来源和参考
  1. 解释如何 Math.random() 和 Math.floor() 通常用于在 JavaScript 中生成随机索引。阅读更多内容 MDN 网络文档 - Math.random() 。
  2. 提供对 JavaScript 的详细见解 Array.splice() 方法及其在随机选择过程中避免重复条目的重要性。访问 MDN 网络文档 - Array.splice() 。
  3. 涵盖在 JavaScript 中构建可重用函数的最佳实践，以提高可维护性并避免复杂代码库中的逻辑错误。查看 JavaScript.info - 函数 。
  4. 描述 JavaScript 中单元测试的作用，以确保处理随机输出时代码的可靠性。看 Jest - 单元测试入门 。