一、前言

二、reduce方法详解

2.1 reduce方法的定义

2.2 reduce方法的使用

三、实用案例

3.1.案例一（数据处理实例）

3.2.案例二（数据处理实例）

3.3 案例三（实现数组去重）

3.4 案例四（统计元素在数组中出现的次数）

3.5 案例五（二维数组转为一维数组）

3.6 案例六（对象的合并）

四、小结

一、前言

在我们项目开发阶段，当后端传回来的数据不太理想或者不好直接使用的话，那么此时我们就必须对数据进行处理，这次我就遇到了一种情况，当后端返回如下格式的数据，我们要对其进行分组处理。如果我没没有很好的处理方法的话，我相信这是非常消耗时间的，如果我们有所谓的“巧方法”，那么这些问题就不会再难到我们。

二、reduce方法详解

2.1 reduce方法的定义

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

2.2 reduce方法的使用

array.reduce(function(prev, currentValue, currentIndex, arr), initialValue)

第一个参数的回调函数又接收四个参数，分别为（初始值或计算结束后的返回值，当前元素，当前元素的索引，当前元素所属的数组对象）

第二个参数是传给函数的初始值，非必传

示例:下面运用reduce 对下面数组进行了累加，reduce方法每次都返回相加后的结果，初始值未0,最终返回6。

let arr = [0, 1, 2, 3];
let value = arr.reduce((pre, cur) => {return pre + cur;
}, 0);
console.log(value); // 6

三、实用案例

3.1.案例一（数据处理实例）

当我们接收到后台传回来的数据，初始数据如下，对以下数据根据班级 class 进行分班

            const students = [{name: '张三',class: 1,math: 100,language: 80,english: 60,physics: 80,chemistry: 60,},{name: '李四',class: 1,math: 120,language: 60,english: 20,physics: 100,chemistry: 100,},{name: '王五',class: 1,math: 140,language: 90,english: 120,physics: 60,chemistry: 60,},{name: '苑博',class: 2,math: 140,language: 90,english: 120,physics: 60,chemistry: 60,},{name: '文轩',class: 2,math: 110,language: 60,english: 120,physics: 30,chemistry: 30,},{name: '聪健',class: 3,math: 110,language: 60,english: 120,physics: 30,chemistry: 30,},{name: '烨磊',class: 3,math: 88,language: 70,english: 100,physics: 45,chemistry: 56,},{name: '烨霖',class: 3,math: 120,language: 60,english: 100,physics: 50,chemistry: 60,},{name: '荣轩',class: 2,math: 90,language: 160,english: 120,physics: 50,chemistry: 50,},{name: '懿轩',class: 2,math: 100,language: 90,english: 120,physics: 90,chemistry: 90,},{name: '擎苍',class: 2,math: 100,language: 130,english: 120,physics: 10,chemistry: 40,},{name: '绍齐',class: 1,math: 100,language: 90,english: 120,physics: 60,chemistry: 60,},{name: '皓轩',class: 1,math: 100,language: 120,english: 120,physics: 50,chemistry: 50,},{name: '鹭洋',class: 1,math: 100,language: 80,english: 120,physics: 30,chemistry: 90,},{name: '潇然',class: 2,math: 110,language: 92,english: 114,physics: 56,chemistry: 74,},{name: '智宸',class: 1,math: 100,language: 100,english: 100,physics: 30,chemistry: 30,},{name: '风华',class: 1,math: 110,language: 60,english: 120,physics: 80,chemistry: 79,},{name: '雨泽',class: 1,math: 100,language: 68,english: 115,physics: 36,chemistry: 83,},{name: '浩然',class: 2,math: 105,language: 116,english: 120,physics: 90,chemistry: 60,},{name: '瑾瑜',class: 3,math: 110,language: 60,english: 120,physics: 99,chemistry: 98,},];

这时我们通过写一个函数对数据进行处理，这里我们巧妙使用了reduce数组方法

通过调用方法就可以对数据进行按班级分组，同时这种问题也可以使用for循环进行处理。

            function handleData(arr) {return arr.reduce((t, v) => {// 判断当前班级是否已经创建，如果已经创建，就直接 push 新数据，如果没有创建，就使用if (t[v.class]) {t[v.class].push(v);} else {t[v.class] = [v];}return t;}, {});}

打印结果如下，分为三个班级，班级里有所属该班级的所有成员

3.2.案例二（数据处理实例）

对下面的数据进行处理，最终达到 省 - 市 - 区 一层包裹一层的效果，根据pid增加到对象的父亲的child里面，使数据不在冗余。方便我们后面直接查找归属地。

      const regions = [{id: "51",name: "四川省",pid: "0",},{id: "5101",name: "成都市",pid: "51",},{id: "5103",name: "自贡市",pid: "51",},{id: "5104",name: "攀枝花市",pid: "51",},{id: "5105",name: "泸州市",pid: "51",},{id: "5107",name: "绵阳市",pid: "51",},{id: "510101",name: "市辖区",pid: "5101",},{id: "510104",name: "锦江区",pid: "5101",},{id: "510105",name: "青羊区",pid: "5101",},{id: "510106",name: "金牛区",pid: "5101",},{id: "510107",name: "武侯区",pid: "5101",},{id: "510108",name: "成华区",pid: "5101",},{id: "510112",name: "龙泉驿区",pid: "5101",},{id: "510113",name: "青白江区",pid: "5101",},{id: "510114",name: "新都区",pid: "5101",},{id: "510115",name: "温江区",pid: "5101",},{id: "510116",name: "双流区",pid: "5101",},{id: "510117",name: "郫都区",pid: "5101",},{id: "510118",name: "新津区",pid: "5101",},{id: "510121",name: "金堂县",pid: "5101",},{id: "510129",name: "大邑县",pid: "5101",},{id: "510131",name: "蒲江县",pid: "5101",},{id: "510181",name: "都江堰市",pid: "5101",},{id: "510182",name: "彭州市",pid: "5101",},{id: "510183",name: "邛崃市",pid: "5101",},{id: "510184",name: "崇州市",pid: "5101",},{id: "510185",name: "简阳市",pid: "5101",},{id: "510301",name: "市辖区",pid: "5103",},{id: "510302",name: "自流井区",pid: "5103",},{id: "510303",name: "贡井区",pid: "5103",},{id: "510304",name: "大安区",pid: "5103",},{id: "510311",name: "沿滩区",pid: "5103",},{id: "510321",name: "荣县",pid: "5103",},{id: "510322",name: "富顺县",pid: "5103",},{id: "510401",name: "市辖区",pid: "5104",},{id: "510402",name: "东区",pid: "5104",},{id: "510403",name: "西区",pid: "5104",},{id: "510411",name: "仁和区",pid: "5104",},{id: "510421",name: "米易县",pid: "5104",},{id: "510422",name: "盐边县",pid: "5104",},{id: "510501",name: "市辖区",pid: "5105",},{id: "510502",name: "江阳区",pid: "5105",},{id: "510503",name: "纳溪区",pid: "5105",},{id: "510504",name: "龙马潭区",pid: "5105",},{id: "510521",name: "泸县",pid: "5105",},{id: "510522",name: "合江县",pid: "5105",},{id: "510524",name: "叙永县",pid: "5105",},{id: "510525",name: "古蔺县",pid: "5105",},{id: "510701",name: "市辖区",pid: "5107",},{id: "510703",name: "涪城区",pid: "5107",},{id: "510704",name: "游仙区",pid: "5107",},{id: "510705",name: "安州区",pid: "5107",},{id: "510722",name: "三台县",pid: "5107",},{id: "510723",name: "盐亭县",pid: "5107",},{id: "510725",name: "梓潼县",pid: "5107",},{id: "510726",name: "北川羌族自治县",pid: "5107",},{id: "510727",name: "平武县",pid: "5107",},{id: "510781",name: "江油市",pid: "5107",},];

利用reduce方法对数据进行处理。

            function handleData(arr, rootId = '0') {return arr.reduce((newArr, item) => {if (item.pid == rootId) {item.children = handleData(regions, item.id);newArr.push(item);}return newArr;}, []);}console.log(handleData(regions));

最终实现了我们想要的链式效果，将子级包裹在父级里面。使我们操作数据更简单，当我们将数据渲染到页面上使用for--in 更方便。

3.3 案例三（实现数组去重）

        <script>let arr = [1, 2, 2, 3, 3, 4, 'a', null, null];let value = arr.reduce((pre, cur) => {return pre.includes(cur) ? pre : pre.concat(cur);}, []);console.log(value); // [1, 2, 3, 4, 'a', null]</script>

3.4 案例四（统计元素在数组中出现的次数）

            let arr = [1, 2, 1, 1, 2, 3, 4];let value = arr.reduce((pre, cur) => {// 判断当前元素是否在已经统计好的对象里if (cur in pre) {pre[cur]++;} else {pre[cur] = 1;}return pre;}, {});console.log(value); // {1: 3, 2: 2, 3: 1, 4: 1}

3.5 案例五（二维数组转为一维数组）

        <script>let arr = [[1, 2],[3, 4],[5, 6],];let value = arr.reduce((pre, cur) => {return pre.concat(cur);}, []);console.log(value); // [1,2,3,4,5,6]</script>

3.6 案例六（对象的合并）

       <script>let arr = [{ a: 1 }, { b: 2 }, { c: 3 }];let value = arr.reduce((pre, cur) => {return { ...pre, ...cur };}, {});console.log(value); // {a: 1, b: 2, c: 3}</script>

四、小结

reduce方法可以用于数值，字符串，对象等类型的数组，并且可以根据需要编写不同的回调函数来实现不同的功能，reduce对我们处理数据有很大帮助，往往能给我们带来惊喜。

感谢大家，欢迎评论区一起讨论学习。

JS reduce方法对后台数据的处理案例(秒解决)相关推荐

js的 ajax获取后台数据,如何通过js来获取后台数据
方法一后台方法: 复制代码代码如下: // 需要标识为WebMethod [System.Web.Services.WebMethod] // 注意,要让前台调用的方法,一定要是public和st ...
jquery中的ajax方法请求后台数据
首先要插入jQuery.js文件,我这里用的是2.2.4版本,也可以用最新的3.1版本案例提前和后台沟通好对应的网址接口,我这里是用node.js写的后台,同时因为保存在本地,所以协议名和域名省略 ...
js 拼写 html 调用后台数据，onclick调用函数
最近,项目开发发现有一些效果,需要自己在js下拼接html代码,做出想要的效果,但是分成两种:一种是html页面,这是多年前写静态页面时遇到一些问题,现在突然想起来,另一种是vue页面,这是最近遇到的 ...
c# webform ajax操作,C# WebForm开发前台请求后台数据的方法总结
说到前台请求后台数据,我们一般都是用到AJAX(异步JavaScript和XML) .AJAX 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...
大数据培训课程数据清洗案例实操-简单解析版
数据清洗(ETL) 在运行核心业务MapReduce程序之前,往往要先对数据进行清洗,清理掉不符合用户要求的数据.清理的过程往往只需要运行Mapper程序,不需要运行Reduce程序.大数据培训数据 ...
进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
js 调用C#.NET后台方法转载自：http://www.cnblogs.com/lizhao/archive/2010/11/23/1990436.html...
第一种: <script type="text/javascript"> $(document).ready(function() { sshow(); }); ...
python flask框架剖析_python flask框架实现传数据到js的方法分析
本文实例讲述了python flask框架实现传数据到js的方法.分享给大家供大家参考,具体如下: 首先要清楚后台和前端交互所采用的数据格式. 一般选JSON,因为和js完美贴合. 后台返回的数据进行 ...

JS reduce方法对后台数据的处理案例(秒解决)

一、前言

二、reduce方法详解

2.1 reduce方法的定义

2.2 reduce方法的使用

三、实用案例

3.1.案例一（数据处理实例）

3.2.案例二（数据处理实例）

3.3 案例三（实现数组去重）

3.4 案例四（统计元素在数组中出现的次数）

3.5 案例五（二维数组转为一维数组）

3.6 案例六（对象的合并）

四、小结

JS reduce方法对后台数据的处理案例(秒解决)相关推荐

最新文章

热门文章