前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >终极干货,数组去重且显示每一个数据重复的次数

终极干货,数组去重且显示每一个数据重复的次数

作者头像
Tz一号
发布2020-09-10 15:55:43
6340
发布2020-09-10 15:55:43
举报
文章被收录于专栏:Tz一号Tz一号Tz一号

正常请求到数据后,如果我们想把统计数据制成图表就非常的麻烦。

今天给大家带来比较实用的两个方法,把数组去重且显示每一个数据重复的次数

---本文章为原创文章,转载请注明出处---

下文代码有详细的注释,再次就不做赘述了直接上代码

**方法一(使用对象记录重复的元素,以及出现的次数)

<!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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档