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实现可改变列宽的table实例
Jul 02 Javascript
删除节点的jquery代码
Jan 13 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 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调用三种数据库的方法(2)
2006/10/09 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
PDO::query讲解
2019/01/29 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
18岁生日感言
2014/01/12 职场文书
出国留学计划书
2014/04/27 职场文书
人民调解员培训方案
2014/06/05 职场文书
法语专业求职信
2014/07/20 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL