目录
一、前言
在我们项目开发阶段，当后端传回来的数据不太理想或者不好直接使用的话，那么此时我们就必须对数据进行处理，这次我就遇到了一种情况，当后端返回如下格式的数据，我们要对其进行分组处理。如果我没没有很好的处理方法的话，我相信这是非常消耗时间的，如果我们有所谓的“巧方法”，那么这些问题就不会再难到我们。
二、案例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数组方法
reduce方法方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
array.reduce(function(prev, currentValue, currentIndex, arr), initialValue)第一个参数的回调函数又接收四个参数，分别为（初始值或计算结束后的返回值，当前元素，当前元素的索引，当前元素所属的数组对象）
第二个参数是传给函数的初始值，非必传
通过调用方法就可以对数据进行按班级分组，同时这种问题也可以使用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;
}, {});
}打印结果如下，分为三个班级，班级里有所属该班级的所有成员
三、案例二
对下面的数据进行处理，最终达到 省 - 市 - 区 一层包裹一层的效果，根据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));
这便是我们想要的数据格式。也可以实现三级联动效果。
四、小结
reduce对我们处理数据有很大帮助，往往能给我们带来惊喜。
感谢大家，欢迎评论区一起讨论学习。