JS数组实现分类统计实例代码

将水果数组中同类的水果合并为一条并求出总数

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数组实现分类统计实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript 数组去重并统计重复元素出现的次数实例

    1.方法一 var arr = [1, 2, 3, 1, 2, 4]; function arrayCnt(arr) { var newArr = []; for(var i = 0; i < arr.length; i++) { if(newArr.indexOf(arr[i]) == -1) { newArr.push(arr[i]) } } var newarr2 = new Array(newArr.length); for(var t = 0; t < newarr2.length;

  • js数组方法扩展实现数组统计函数

    复制代码 代码如下: /*****************************************************CreateBy:joe zhou*Description:数组统计函数****************************************************/$.extend({    max: function (arr) {        return cacl(arr, function (item, max) {            if

  • JS数组实现分类统计实例代码

    将水果数组中同类的水果合并为一条并求出总数 var fruits = [{ name: 'apple', value: 1 }, { name: 'apple', value: 2 }, // 总计3个苹果 { name: 'banana', value: 2 }, { name: 'banana', value: 3 }]; // 总计5个香蕉 var fruitTotal = []; // 存最终数据结果 // 数据按照水果名称进行归类 var nameContainer = {}; //

  • jQuery Ajax向服务端传递数组参数值的实例代码

    jQuery Ajax向服务端传递数组参数值的实例代码

    在使用MVC时,向服务器端发送POST请求时有时需要传递数组作为参数值 下面使用例子说明,首先看一下Action [HttpPost] public ActionResult Test(List<string> model) { return Json(null, JsonRequestBehavior.AllowGet); } 方式一,构造表单元素,然后调用serialize()方法得到构造参数字符串 @{ Layout = null; } <!DOCTYPE html> <

  • 使用cropper.js裁剪头像的实例代码

    使用cropper.js裁剪头像的实例代码

    最近项目需要头像裁剪的功能,在网上找了一下,发现了github上的cropper项目还不错,借鉴了一下..用起来挺简单的,下面是我做的一个小例子: 开始先放个成品图: 下面给出前后端的代码 前端页面是一个单独的jsp页面,用来做弹出层来裁剪图片比较好. 关于jsp页面引用的两个关于cropper的 文件,我就不提供了.大家需要的可以去官方的github上去下载. 地址:https://github.com/fengyuanchen/cropper <%@ page language="ja

  • 原生js实现each方法实例代码详解

    jquery里面有个each方法,将循环操作简化.便捷. 随后es出了个forEach方法,两个虽然用法相近,但是不能处理对象类型.且无法通过return true达到continue效果. 此外还有个every方法,该方法虽然可以实现continue效果,但是在处理类数组与对象类型时,完全无用. 在不使用 jquery 的 each 方法时,该如何处理:或者说用原生如何来实现? 前些前写了个类库: jTool , 其中就实现了该方法. 简单实现: // 通过字面量方式实现的函数each var

  • 动态加载js、css的实例代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

  • Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.

  • SVG动画vivus.js库使用小结(实例代码)

    SVG动画vivus.js库使用小结(实例代码)

    SVG动画vivus.js库使用整理,具体实例代码如下所示: 使用方法如图: HTML例子代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta

  • 简单封装js的dom查询实例代码

    最近一直在啃犀牛书,有感,于是写了个简单的js的dom查询 $ = function (val) { switch(val.charAt(0)) { case '#' : return document.getElementById(val.substring(1)); break; case '.' : val = val.replace('.',''); if(document.getElementsByClassName) return document.getElementsByClas

  • react.js 翻页插件实例代码

    废话不多说了,下面给大家分享react.js翻页插件的代码,具体代码如下所示: var Page = React.createClass({ render:function() { //中间代码更新 var totalRows = this.props.totalRows; var listRows = this.props.listRows; var nowPage = this.props.nowPage>0?this.props.nowPage:1; var firstRow = this

  • js字符串倒序的实例代码

    1. var reverse = function( str ){ var newStr = '', i = str.length; for(; i >= 0; i--) { newStr += str.charAt(i); } return newStr; }; reverse('abcde') 2. var reverse = function( str ){ return str.split('').reverse().join(''); }; 3.(类似法2) var reverse =

随机推荐