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源文件
Nov 08 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
php MessagePack介绍
2013/10/06 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
php如何连接sql server
2015/10/16 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
javascript中floor使用方法总结
2019/02/02 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
Python 对象中的数据类型
2017/05/13 Python
python处理csv中的空值方法
2018/06/22 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
详解Python IO口多路复用
2020/06/17 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
国窖1573广告词
2014/03/21 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
仙境之桥观后感
2015/06/16 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL