JS数组实现分类统计实例代码


Posted in Javascript onSeptember 30, 2018

将水果数组中同类的水果合并为一条并求出总数

var fruits = 
[{
  name: 'apple',
  value: 1
}, 
{
  name: 'apple',
  value: 2
}, // 总计3个苹果
{
  name: 'banana',
  value: 2
}, 
{
  name: 'banana',
  value: 3
}]; // 总计5个香蕉

var fruitTotal = []; // 存最终数据结果

// 数据按照水果名称进行归类
var nameContainer = {}; // 针对键name进行归类的容器
fruits.forEach(item => {
  nameContainer[item.name] = nameContainer[item.name] || [];
  nameContainer[item.name].push(item);
});

console.log(nameContainer); // 按照水果名称归类完成:{ apple: Array(2), banana: Array(2) }

// 统计不同种类水果的数量
var fruitName = Object.keys(nameContainer); // 获取水果种类:["apple", "banana"]
fruitName.forEach(nameItem => {
  let count = 0;
  nameContainer[nameItem].forEach(item => {
    count += item.value; // 遍历每种水果中包含的条目计算总数
  });
  fruitTotal.push({'name': nameItem, 'total': count});
});

console.log(fruitTotal);
// 输出结果:
// [{ name: "apple", total: 3 },
// { name: "banana", total: 5 }]

总结

以上所述是小编给大家介绍的JS数组实现分类统计实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 #Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 #Javascript
vue使用v-for实现hover点击效果
Sep 29 #Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 #Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 #Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 #Javascript
iview同时验证多个表单问题总结
Sep 29 #Javascript
You might like
php连接oracle数据库的核心步骤
2016/05/26 PHP
功能强大的php文件上传类
2016/08/29 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
PHP实现计算器小功能
2020/08/28 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
js电话号码验证方法
2015/09/28 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python yield 小结和实例
2014/04/25 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
揭牌仪式主持词
2014/03/19 职场文书
产假请假条
2014/04/10 职场文书
施工安全汇报材料
2014/08/17 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js