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的Tab选项框效果代码(插件)
Mar 01 Javascript
js读取cookie方法总结
Oct 31 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
js实现经典贪吃蛇小游戏
Mar 19 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判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
js获取url传值的方法
2015/12/18 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
koa源码中promise的解读
2018/11/13 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python抓取百度首页的方法
2015/05/19 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
先进个人事迹材料
2014/01/25 职场文书
房地产项目策划书
2014/02/05 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
工作岗位说明书模板
2014/05/09 职场文书
自荐信格式模板
2015/03/27 职场文书
《确定位置》教学反思
2016/02/18 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
Python中文纠错的简单实现
2021/07/07 Python
DSP接收机前端设想
2022/04/05 无线电
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js