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 相关文章推荐
关于js datetime的那点事
Nov 15 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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
收音机的保养
2021/03/01 无线电
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
php实现头像上传预览功能
2017/04/27 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
中间件分为哪几类
2012/03/14 面试题
监察建议书范文
2014/03/12 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
导游欢迎词范文
2015/01/23 职场文书
python字符串常规操作大全
2021/05/02 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技