终极干货,数组去重且显示每一个数据重复的次数
正常请求到数据后,如果我们想把统计数据制成图表就非常的麻烦。
今天给大家带来比较实用的两个方法,把数组去重且显示每一个数据重复的次数
---本文章为原创文章,转载请注明出处---
下文代码有详细的注释,再次就不做赘述了直接上代码
**方法一(使用对象记录重复的元素,以及出现的次数)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 首先声明一个数组稍后使用 var _arr = ['旅行箱', '旅行箱', '小米', '大米', '大米', '大米', '大米']; // 创建一个空数组存放数据 var _res = []; // // 先对数组进行排序,相同的字符会排在一起 _arr.sort(); // 对整个数组进行遍历 for(var i = 0; i < _arr.length;) { // 默认出现次数为0 var count = 0; // 声明一个变量J,让J等于I,如果下一个字符等于当前索引,就把count的值加1 for(var j = i; j < _arr.length; j++) { if(_arr[i] == _arr[j]) { count++; } } // 然后把当前索引I保存下来,依旧count的值存起来 _res.push([_arr[i], count]); i += count; } //_res 二维数维中保存了 值和值的重复数 var _newArr = []; for(var i = 0; i < _res.length; i++) { // console.log(_res[i][0] + "重复次数:" + _res[i][1]); _newArr.push(_res[i][0] + 'x' + _res[i][1]); } console.log(_newArr) </script>G </body> </html>
**方法二(set方法去重且显示每一个数据重复的次数)
<script> // 声明一个数组测试 var arr = ['张三', '张三', '8月7号', '8月7号']; function arrayCnt(arr) { // 声明一个空数组用来装载数据 var newArr = []; //使用set进行数组去重,得到一个不重复的数组 newArr = [...new Set(arr)]; // 新建一个数组长度等于newArr长度的空数组 var newarr2 = new Array(newArr.length); // 以去重后数组的数组,为索引,赋默认值0 for(var t = 0; t < newarr2.length; t++) { newarr2[t] = 0; console.log(newarr2) } // 通过对newArr和arr遍历,如果arr中的值有重复数值,则newarr2的相应索引下值 +1 for(var p = 0; p < newArr.length; p++) { for(var j = 0; j < arr.length; j++) { if(newArr[p] == arr[j]) { newarr2[p]++; } } } // 遍历显示重复次数 for(var m = 0; m < newArr.length; m++) { console.log(newArr[m] + "重复的次数为:" + newarr2[m]); } } arrayCnt(arr); </script>