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显示和隐藏div特效实例
Feb 27 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
详解JS模块导入导出
Dec 20 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
浅谈Vue的响应式原理
May 30 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
JavaScript实现网页动态生成表格
Nov 25 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定义函数代码
2015/02/26 PHP
PHP实现的购物车类实例
2015/06/17 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue 优化CDN加速的方法示例
2018/09/19 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python Socket使用实例
2017/12/18 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
python获取url的返回信息方法
2018/12/17 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
植树节标语
2014/06/27 职场文书
个人租房协议书样本
2014/10/01 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android