【问题标题】:Counting the number of occurrences of al the random numbers inside of an array计算数组内所有随机数的出现次数
【发布时间】:2021-06-08 20:15:51
【问题描述】:

我编写了这段代码来使用原始 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>

【问题讨论】:

  • 你在循环中声明arr,所以它在每次迭代中都会被覆盖。我认为你最好只在一个循环中创建数组,然后在另一个循环中将数组写入 HTML。
  • 我想了解用户添加的任何维度,您想生成 10 个相同长度的数组对吗?
  • 我希望表格的每一行只包含 10 个数字

标签: javascript arrays find-occurrences


【解决方案1】:

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

  1. 生成随机数。
  2. 计算数字的频率。
  3. 建表。

// Sample list of numbers.
const numbers = [1, 1, 4, 1, 6, 3, 1, 5, 4, 2, 2, 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);
}
&lt;table&gt;&lt;/table&gt;

数字是字符串类型还是数字类型无关紧要,只要它们都相同即可。您可以使用表中的 querySelectorAll 或您在循环中设置的 arr 变量的结果填充 numbers 数组。

【讨论】:

  • 对不起,但这不是我想做的,我想同时计算表格中每个数字的频率......
  • 我希望它像这样出来
  • 然后使用Array.from(document.querySelectorAll("td")).reduce(i =&gt; i.innerText)从表格中获取数字..
  • 你能再解释一下吗?谢谢
猜你喜欢
  • 2021-03-22
  • 1970-01-01
  • 2021-07-02
  • 2020-03-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-28
相关资源
最近更新 更多