1. 程式人生 > >關於陣列去重、統計次數、排序的小案例介紹

關於陣列去重、統計次數、排序的小案例介紹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>陣列去重-統計次數-排序案例</title>
<style>
#div1{width:375px;height: 525px;background: #ccc;margin: 0 auto;}
#div1 .prompt{text-align: center;}
#div1 .text1{width: 305px;height: 205px;margin-left:30
px
;margin-top: 10px;}
#div1 .btn1{width: 100px;margin-left: 135px;margin-top: 10px;}
</style> <script> window.onload=function (){ var oT1=document.getElementById('txt1'); var oT2=document.getElementById('txt2'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function()
{
var str = oT1.value; var arr = str.split(' '); var json={}; for (var i = 0; i < arr.length; i++) { var key = arr[i]; if (json[key]) { json[key]++; }else{ json[key]=1; } } var
arr2=[]; for(var key in json){ arr2.push({name:key,count:json[key]}) } arr2.sort(function(n1,n2){return n2.count-n1.count}) var str=''; for (var i = 0; i < arr2.length; i++) { str=str+arr2[i].name+'('+arr2[i].count+')'+'\n' } oT2.value = str; } }
</script> </head> <body> <div id="div1"> <div class="prompt">輸入原始文字(空格隔開):</div> <textarea id="txt1" class="text1"></textarea> <input id="btn1" class="btn1" type="button" value="變"> <div class="prompt">這裡輸出結果</div> <textarea id="txt2" class="text1"></textarea> </div> </body> </html>

例如在原始文字框輸入:跑步鞋 休閒鞋 休閒鞋 休閒鞋 板鞋 帆布鞋 籃球鞋 拖鞋 訓練鞋 乒羽網鞋 足球鞋 專項運動鞋 跑步鞋 休閒鞋 板鞋 籃球鞋 籃球鞋 拖鞋 訓練鞋 休閒鞋 板鞋 休閒鞋 板鞋
經過去重過濾、統計並且排序後得到:
休閒鞋(6)
板鞋(4)
籃球鞋(3)
跑步鞋(2)
拖鞋(2)
訓練鞋(2)
帆布鞋(1)
乒羽網鞋(1)
足球鞋(1)
專項運動鞋(1)
陣列去重、統計次數、排序的小案例介紹