计算数组中所有随机数的出现次数

编程问答 2022-04-25

问题描述

我编写了这段代码来使用 vanilla JavaScript 显示两个值之间的随机数表，我使用一个数组来存储随机值，然后我使用 tales 将它们显示在页面上。我想计算此表中每个数字的出现次数并显示该数字。我尝试使用 for 循环，但没有用。 有人可以帮忙吗？

//Variables Exercice 3
var dim = document.getElementById("dimensions");
var min = document.getElementById("min");
var max = document.getElementById("max");
var table = document.getElementById("table");
var btn = document.getElementById("btn");
//Function Exercice 3
btn.addEventListener("click",generate);

function generate() {
  if (dim.value == "" || min.value == "" || max.value == "") {
    alert("Merci de remplir tous les champs");
  } else if (
    Number(min.value) > Number(max.value) ||
    Number(min.value) == Number(max.value)
  ) {
    alert("La valeur minimale doit être inférieur à la valeur maximale");
  } else {
    for (var j = 0; j < Math.floor(dim.value / 10); j++) {
      var row = document.createElement("tr");
      for (var i = 0; i < 10; i++) {
        var arr = [];
        var cell = document.createElement("td");
        while (arr.length < dim.value) {
          var r = Math.floor(
            Math.random() * (Number(max.value) - Number(min.value)) +
            Number(min.value)
          );
          arr.push(r);
        }
        table.append(row);
        row.append(cell);
        cell.innerHTML = arr[i];
      }
    }
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8" />
  <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Examen 4 JavaScript</title>
</head>

<body>
  <div class="Ex1">
    <form>
      <h1>Exercice 3</h1>
      <div class="container">
        <div class="dimensions">
          <label for="dimensions">Dimension du tableau</label>
          <input type="text" name="dimensions" id="dimensions" pattern="[0-9]+" title="Merci de fournir que des numéros" />
        </div>
        <div class="min">
          <label for="min">La valeur minimale</label>
          <input type="text" name="min" id="min" pattern="[0-9]+" title="Merci de fournir que des numéros" />
        </div>
        <div class="max">
          <label for="max">La valeur maximale</label>
          <input type="text" name="max" id="max" pattern="[0-9]+" title="Merci de fournir que des numéros" />
        </div>
      </div>
      <button type="button" id="btn">Générez un tableau</button>
      <table id="table"></table>
    </form>
  </div>
  <script src="main.js"></script>
</body>

</html>

解决方法

问题是您在构建表格的同时尝试生成随机数。在编程中，通常更容易将您的过程分解为单独的步骤并一次执行一个。 所以你的程序可能是：

  1. 生成随机数。
  2. 计算数字出现的频率。
  3. 搭建桌子。

// Sample list of numbers.
const numbers = [1,1,4,6,3,5,2,2];

// Array.prototype.reduce iterates over an array 
// and turns it into something else,called the accumulator.
const frequency = numbers.reduce((acc,item) => {
  // This tertiary statement says to add one to whatever 
  // is at acc[item] if it exists,or just set acc[item] to one.
  acc[item] = acc[item] ? acc[item] + 1 : 1;
  return acc;
},{});

console.log(frequency);
const table = document.querySelector("table");
let i = 0;
for (let rowIndex = 0; rowIndex <= Math.floor(numbers.length / 10); rowIndex++) {
  const row = document.createElement("tr");
  for (let cellIndex = 0; cellIndex < 10; cellIndex++) {
    const cell = document.createElement("td");
    cell.innerText = numbers[i];
    const sub = document.createElement("sub");
    sub.innerText = frequency[numbers[i]];
    cell.append(sub);
    row.append(cell);
    i++;
    if (i >= numbers.length) {
      break;
    }
  }
  table.append(row);
}
<table></table>

数字是字符串类型还是数字类型都没有关系，只要全部相同即可。您可以使用表中的 querySelectorAll 或您在循环中设置的 arr 变量的结果填充数字数组。

arraysarraysfind-occurrencesjavascript