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 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
js事件委托和事件代理案例分享
Jul 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中上传大体积文件时需要的设置
2006/10/09 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python日志syslog使用原理详解
2020/02/18 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
大学专科生推荐信范文
2013/11/23 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
财政局长个人总结
2015/03/04 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
大学生读书笔记范文
2015/07/01 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
升职自荐书
2019/05/09 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python