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 相关文章推荐
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
javascript中的Function.prototye.bind
2015/06/25 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
Python上下文管理器和with块详解
2017/09/09 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Django中使用Celery的方法示例
2018/11/29 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
python中xlutils库用法浅析
2020/12/29 Python
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
项目合作计划书
2014/01/09 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
任长霞观后感
2015/06/16 职场文书
党校团干班培训心得体会
2016/01/06 职场文书