计算数组中的数字然后将它们写出来

Question

对于学院的新手来说，这仍然是老派的 JS 周。

我创建了一个输入，使用户可以在输入中输入一些数字来写出一个数组。

现在我接下来要做的是写一段，每个数字都有一个计数器，比如这个数字被使用了多少次。

如果数组是 [0,0,1,1,1,2,2,2,2];

我想让它写成这样：

"How many times does your number appears in your array:"
0: 2
1:3
2:4

到目前为止，我已经可以打印出输入中的数字，但我找不到像上面那样写出来的方法。

    var numbers = [];
    
    function numbarray() {
        numbers.push(document.getElementById("box").value);
    
        document.getElementById("text1").innerHTML = "";
        document.getElementById("text1").innerHTML += numbers.join(", ");
    
        }

       <input type="text" id="box" placeholder="0-9 with comma" />
       <input type="button" value="Click" onclick="numbarray()" />
       <br>
       Your array:<span id="text1"></span><br>

自从昨天早上以来，在修补、失败和谷歌搜索之后，我想我再次尝试了 SO，因为我从这个网站学到了比我想象的更多的东西。

非常感谢您

Answer 1

function numbarray() {
    var nums = {}; // Use a dictionary for tallying numbers
    var numStrings = document.getElementById("box").value.split(","); // Split by commas
    // Just tally up each number
    for (var i = 0; i < numStrings.length; i++){
        var num = numStrings[i];
        if (num in nums){
            nums[num]++;
        }
        else {
            nums[num] = 1;
        }
    }
    var keys_ = Object.keys(nums); // Get the keys and sort them
    keys_.sort();
    document.getElementById("text1").innerHTML = "<br>"; // Reset the html
    for (var key in keys_){
        // Print out each number and its tally
        document.getElementById("text1").innerHTML = key + ": " + nums[key] + "<br>";
    }
}

Answer 2

不确定我是否完全理解你想要做什么，但如果你想显示每个数字的计数，你应该首先获取每个数字的计数，然后将它们放在你的 DOM ，通过一个函数，例如：

var numbers = [];

var numbersObject = {};

function numbarray() {

  numbers.push(document.getElementById("box").value);

//put numbers in object to get count of each
    for(i=0; i<numbers.length; i++){
       if(numbersObject[numbers[i]]){
           numbersObject[numbers[i]]++
       }else{
           numbersObject[numbers[i]] = 1
       }
    }

 //prepare HTML

   var content = '';

    for(var key in numbersObject){
      content += key + ':' + numbersObject[key] + '<br>';
    }

    document.getElementById("text1").innerHTML = content

}

Answer 3

    var numbers = [];
    
    function numbarray() {
        numbers = [];
        numbers = numbers.concat(document.getElementById("box").value.split(','));
        var hash = {};
        for(var i=0; i<numbers.length; i++) { 
           if (typeof hash[numbers[i]] === 'undefined') hash[numbers[i]] = 0;
           hash[numbers[i]] ++;
        }
    
        document.getElementById("text1").innerHTML = "";
        for(var k in hash) {
           document.getElementById("text1").innerHTML += k + ': ' + hash[k] + '\n';
        }
        }

       <input type="text" id="box" placeholder="0-9 with comma" />
       <input type="button" value="Click" onclick="numbarray()" />
       <br>
       Your array:<span id="text1"></span><br>

Answer 4

此解决方案具有一个对象，用于计算数字出现的频率。

function count() {
    var numbers = document.getElementById("box").value
            .split(',')
            .map(Number)
            .filter(isFinite),
        distribution = numbers.reduce(function (r, a) {
            r[a] = (r[a] || 0) + 1;
            return r;
        }, {});

    document.getElementById("text1").innerHTML = numbers.join(", ");
    document.getElementById("distribution").innerHTML = Object.keys(distribution)
        .sort(function (a, b) {
            return distribution[b] - distribution[a];
        })
        .map(function (k) {
            return k + ': ' + distribution[k];
        }).join('<br>');
}

<input type="text" id="box" placeholder="0-9 with comma" />
<input type="button" value="Click" onclick="count()" /><br>
Your array: <span id="text1"></span><br>
How many times does your number appears in your array:<br>
<div id="distribution"></div>

计算数组中的数字然后将它们写出来

Count the numbers in an array then write them out

javascript

arrays

count