Question

所以我正在做一项工作，我不能为我的生活找出如何完成最后一部分。

我有一系列数字，我必须对那些数字进行排序，然后我必须根据每个数字对它们进行分组。那就是我被困住的部分。

我在一份文件中为这项任务做了所有这些：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Arrays For Days</title>
<style>
    body {
        line-height: 1;
        font-family: 'Lato', sans-serif;
        letter-spacing: 0.08em;
    }
    p.headings {
        font-style:italic;
        font-size: 20px;
    }
</style>
</head>

<body>
    <h1 style="text-decoration: underline;">Sorting and Grouping Arrays</h1>
    <br>
    <p class="headings">Starting List of Numbers:</p>
    <p id="startNumbers"></p>
    <br>
    <p class="headings">Numbers Sorted:</p>
    <p id="arraySorted"></p>
    <br>
    <p class="headings">Array Sorted and then Grouped:</p>
    <p id="arrayGrouped"></p>

    <script>

        var numbers = [1, 5, 17, 4, 9, 3, 1, 17, 32, 5, 3, 27, 9, 18, 3, 12, 67, 18, 32, 1, 19, 21, 1, 17];
            //printed original numbers to HTML element using document.getElementById
        document.getElementById("startNumbers").innerHTML = numbers;
            //used .sort method, with a comparative function using a-b, so if a is less than b then the result...
            //should be a sorting of lesser to greater.
        numbers.sort (
            function(a, b) {
                return a - b;
        });
            //then I printed the now sorted numbers to matching HTML element using document.getElementById
        document.getElementById("arraySorted").innerHTML = numbers;




        document.getElementById("arrayGrouped").innerHTML = output;

    </script>
</body>
</html>

只是想让我的页面上显示的数字如下：

1：4,3：3,4：1,5：2,9：2,12：1,17：3,18：2,19：1,21：1,27：1,32：2 ，67：1

这是可能的，但我只是发现不完全像这样的例子，并且不得不处理一堆其他的数组，我不需要这个任务。谢谢任何人的帮助： - ）

Nathan L。

Answer 1

您可以使用.map()和.filter()来获取从原始数组中过滤的当前元素的.length。从结果数组中删除重复项的一个选项是将数组传递给Set构造函数，将Set转换回带Array.from()的数组。

document.getElementById("arraySorted")
.innerHTML = Array.from(new Set(numbers.map(n => `${n}:${numbers.filter(_n => _n === n).length}`)));

Answer 2

我的解决方案是仅使用Array.prototype.reduce函数。要对数字进行分组，需要将元素添加到新数组，并将每个数字与新数组的最后一项进行比较。如果它是相同的，您只需将1添加到最后一项的累加器，否则您为新数字创建一个新元素。我希望以下代码能说明一点：

var groupedNumders = numbers.reduce(function(ac, currentValue) {  // ac for accumulator
    if (currentValue === ac[ac.length - 1][0])
      ac[ac.length - 1][1] += 1;
    else 
      ac.push([currentValue, 1])
    return ac
  }, [[numbers[0], 0]])

如果您对Array.prototype.reduce的内容感到困惑，请参阅MDN。

要创建可打印的字符串，可以再次减少数组：

var output = groupedNumbers.reduce(function(s, a) {return s + a[0] + ":" + a[1] + ", "}, "")

对整数数组进行分组

2 个答案: