計算陣列元素重複的個數，並把出現次數相同的統計一起。

嘩嘩的醬紫發表於2019-02-16
陣列

簡單的一點樣式

<style>
    label{display: block; margin-bottom: 10px;}
    input{width: 20px; line-height: 20px; padding: 5px;border: 1px solid #ccc;}
    textarea{width:95%; height: 100px; resize: unset; margin: 10px auto; padding: 5px; border: 1px solid #ccc;}
    button{display:block;}
    p{width: 100%; line-height: 24px;}
</style>

html結構

<label>
    輸入數字的分隔符：<input type="text" id="numSplit" value=",">
</label>
<label>
    計算結果數字的分隔符：<input type="text" id="countSplit" value=".">
</label>
<label> 
    輸入數字：<textarea type="text" id="num"></textarea>
</label>
<button type="button" onclick="getCount()">計算結果</button>
<p id="result"></p>

js程式碼

function getCount() {
    // 初始化
    document.getElementById(`result`).innerHTML = ``;
    var num = document.getElementById(`num`).value;
    var numSplit = document.getElementById(`numSplit`).value;
    var countSplit = document.getElementById(`countSplit`).value;
    var countObj = new Object();
    var resultObj = new Object();
    // 正則匹配數字間的任意符號並把分隔符替換成,
    var reg = /[`~!@#$%^&*()-+_=\;:`"<,.>?/|%·！￥……（）——【】、；：’“‘”，《》。？]/g;
    num = num.replace(reg, `,`);
    countSplit = countSplit || `/`;
    // 計算數字的重複個數
    if (num.indexOf(numSplit) !== -1) {
        var arr = num.split(numSplit);
        for (var i = 0; i < arr.length; i++) {
            // arr[i]數字值為key,出現的次數為value
            countObj[arr[i]] = countObj[arr[i]] ? countObj[arr[i]] + 1 : 1;
        }
    } else {
        alert(`請輸入正確的數字分隔符`);
    }
    // 計算重複個數相同的數字
    // countObj物件
    // 1 i :2 countObj[i],   
    // 2:2,
    // 3:1,
    // 4:2,
    // resultObj物件
    // 2 countObj[i]:1/2/4 i,
    // 1:3
    for (i in countObj) {
       // 出現的次數為key, 出現這些次數的數字為value. 
        resultObj[countObj[i]] = resultObj[countObj[i]] ? resultObj[countObj[i]] + countSplit + i : i;
    }
    var newkey = Object.keys(resultObj).reverse();
    for (var i = 0; i < newkey.length; i++) {
        document.getElementById(`result`).innerHTML += `出現的次數：` + newkey[i] + `,&nbsp;&nbsp;&nbsp;&nbsp;數字：` + resultObj[
        newkey[i]] +`<br/>`;
    }
}

執行結果：

輸入1,2,3,4,5,2,3,4 

出現的次數:2, 數字：`2/3/4`
出現的次數:1, 數字：`1/5`

相關文章