时间戳

首页 > 解决方案 > 如何编辑此代码以使结果显示在页面的“部分”中

javascript - 如何编辑此代码以使结果显示在页面的“部分”中

问题描述

我根据以下要求获取以下代码的输出：

当我使用 DOM 将结果输出到页面时。如果数组元素的数量不能被部分变量数整除，我会将所有余数放入最后一部分，如下图所示。我无法正确完成整个任务。

（注意：在提到创建“部分”时，我并不是指 div。下面的所需输出应该使事情更清楚。）

示例数组输入 [4,4,4,4,2,4,4,4,4,4,2,2,2,3,2,2,2,2,3,3,3,7,3, 3,3,1,6,6,1,1,1,1,1,7,7,7,7,6,6]

电流示例输出：4-9次、2-8次、3-7次、1-6次、7-5次、6-4次

所需输出：示例 1（部分变量 = 3）：

4 - 9 次
2 - 8 次

3 - 7 次
1 - 6 次

7 - 5 次
6 - 4 次

所需输出：示例 2（部分变量 = 2）：

4 - 9 次
2 - 8 次
3 - 7 次

1 - 6 次
7 - 5 次
6 - 4 次

所需输出：示例 3（部分变量 = 4）：

4 - 9 次

2 - 8 次

3-7次

1 - 6 次
7 - 5 次
6 - 4 次

到目前为止我的代码：

const duplicateArr2 = [1, 1, 1, 1, 1, 100, 3, 5, 2, 5, 2, 23, 23, 23, 23, 23];

 const getStringOfDuplicated = array => {
          const hash = array.reduce((a, c) => (a[c] = ++a[c] || 1, a), {});
          return Object.entries(hash)
            .filter(([k, v]) => v > 1)
            .sort(([ak, av], [bk, bv]) => bv - av)
            .reduce((a, [k, v]) => [...a, `${k} - ${v} times`], [])
            .join(',   ');

        };


       document.getElementById("jsresultsoutput").innerHTML=getStringOfDuplicated(duplicateArr2);
			<p id="jsresultsoutput"></p>

标签： javascript

解决方案

您可以使用模运算符检查数组元素的数量是否可以被部分的数量整除%。

下面是一个工作实现。在这里，我将节数设置为全局变量，并使用<br>（HTML 中的换行元素）分隔节。

编辑：将分组计算和格式化分成两个不同的功能。修改后的实现，以便将最大数量的元素放入第一nGroups-1部分（而不是仅将一个元素放入第一nGroups-1部分）。

const duplicateArr2 = [4,4,4,4,2,4,4,4,4,4,2,2,2,3,2,2,2,2,3,3,3,7,3,3,3,1,6,6,1,1,1,1,1,7,7,7,7,6,6,55,55,67,67,45,54,45,54,100,100,200,200,300,300];

const getArrayOfDuplicated = array => {
	const hash = array.reduce((a, c) => (a[c] = ++a[c] || 1, a), {});
  return Object.entries(hash)
    .filter(([k, v]) => v > 1)
    .sort(([ak, av], [bk, bv]) => bv - av)
    .reduce((a, [k, v]) => [...a, `${k} - ${v} times`], [])
 };

// given a number of items to be sectioned into a certain number of groups
// returns a list of length nGroups with the number of items in each group
// such that at least (nGroups - 1) groups contain an equal number of items
// eg. getGrouping(10, 2) -> [5, 5]
// eg. getGrouping(10, 6) -> [1, 1, 1, 1, 1, 5]
const getGrouping = (nItems,nGroups) => {
	if (nGroups > nItems)
    return Array(nItems).fill(1);
  else if (!(nItems % nGroups))
    return Array(nGroups).fill(parseInt(nItems / nGroups));
  else {
    let numberOfEqualGroups = nGroups-1;
    var itemsPerEqualGroup;
    if (!(nItems % (nGroups-1)))
      itemsPerEqualGroup = parseInt(nItems / (nGroups - 1)) - 1;
    else
      itemsPerEqualGroup = parseInt(nItems / (nGroups - 1));
    equalGroups = Array(numberOfEqualGroups).fill(parseInt(itemsPerEqualGroup));
    remainder = nItems - itemsPerEqualGroup * numberOfEqualGroups;
    return equalGroups.concat(remainder);
  }
}
 
// takes an array and formats it into sections according to grouping
// returns a string with a newline after each line and two new lines between sections
const formatGrouping = (array,grouping) => {
  var outputString = ""
  var linesDone = 0;
  for (var section = 0; section < grouping.length; section++) {
  	for (var line = 0; line < grouping[section]; line++) {
  		outputString += array[linesDone] + '<br>';
      linesDone += 1;
    }
    outputString += '<br>';
  }
  return outputString;
};

var numberOfSections = 3;
result = getArrayOfDuplicated(duplicateArr2);
document.getElementById("jsresultsoutput").innerHTML = formatGrouping(result,getGrouping(result.length,numberOfSections));
<p id="jsresultsoutput"></p>

推荐阅读