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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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入门小知识
2008/03/24 PHP
获取远程文件大小的php函数
2010/01/11 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
js 内存释放问题
2010/04/25 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
vue--vuex详解
2019/04/15 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Python中fnmatch模块的使用详情
2018/11/30 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python设置环境变量的作用和实例
2019/07/09 Python
使用Python实现批量ping操作方法
2020/05/06 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
公司总经理岗位职责范本
2014/08/15 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang