终极干货,数组去重且显示每一个数据重复的次数
时间:2022-07-24
本文章向大家介绍终极干货,数组去重且显示每一个数据重复的次数,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
正常请求到数据后,如果我们想把统计数据制成图表就非常的麻烦。
今天给大家带来比较实用的两个方法,把数组去重且显示每一个数据重复的次数
---本文章为原创文章,转载请注明出处---
下文代码有详细的注释,再次就不做赘述了直接上代码
**方法一(使用对象记录重复的元素,以及出现的次数)
<!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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode 20200601 打卡 1431. 拥有最多糖果的孩子
- 剑指Offer LeetCode 面试题24. 反转链表
- 剑指Offer LeetCode 面试题22. 链表中倒数第k个节点
- 剑指Offer LeetCode 面试题18. 删除链表的节点
- 剑指Offer LeetCode 面试题06. 从尾到头打印链表
- 最详细的docker中安装并配置redis
- 剑指Offer LeetCode 面试题59 - I. 滑动窗口的最大
- 剑指Offer LeetCode 面试题58 - II. 左旋转字符串
- 剑指Offer LeetCode 面试题58 - I. 翻转单词顺序
- 剑指Offer LeetCode 面试题56 - II. 数组中数字出现的次数 II
- 站在软件工程的角度重新思考面向对象(含高清图谱)
- 剑指Offer LeetCode 面试题57. 和为s的两个数字
- 白嫖Layui树型可折叠,可自定义,可搜索表格的实例
- 剑指Offer LeetCode 面试题53 - II. 0~n-1中缺失的数字
- 聊聊dubbo-go的DubboPackage