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获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
Vue中的字符串模板的使用
May 17 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
浅谈微信页面入口文件被缓存解决方案
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
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
django中的数据库迁移的实现
2020/03/16 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python使用re模块验证危险字符
2020/05/21 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
后备干部推荐材料
2014/12/24 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers