Tabla de contenido
I. Introducción
En nuestra etapa de desarrollo del proyecto, cuando los datos enviados desde el backend no son ideales o no son fáciles de usar directamente, entonces debemos procesar los datos en este momento. Esta vez me encontré con una situación, cuando el backend devolvió los siguientes datos de formato, queremos agruparlo. Si no tengo una buena manera de lidiar con eso, creo que lleva mucho tiempo. Si tenemos la llamada "manera inteligente", entonces estos problemas ya no serán difíciles para nosotros.
2. Caso 1
Cuando recibimos los datos enviados desde el fondo, los datos iniciales son los siguientes, y los siguientes datos se dividen en clases de acuerdo con la clase de clase
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,
},
];En este momento, procesamos los datos escribiendo una función, aquí usamos inteligentemente el método de reducción de matriz
El método reduce recibe una función como un acumulador , y cada valor en la matriz (de izquierda a derecha) se reduce inicialmente y finalmente se calcula en un valor.
array.reduce(function(prev, currentValue, currentIndex, arr), initialValue)La función de devolución de llamada del primer parámetro recibe cuatro parámetros, que son (valor inicial o valor devuelto después del cálculo, elemento actual, índice del elemento actual, objeto de matriz al que pertenece el elemento actual)
El segundo parámetro es el valor inicial pasado a la función, no requerido
Al llamar al método, los datos se pueden agrupar por clase, y este tipo de problema también se puede manejar usando el bucle 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;
}, {});
}Los resultados impresos son los siguientes, que se dividen en tres clases, y todos los miembros de la clase están en la clase
3. Caso 2
Procese los siguientes datos y finalmente logre el efecto de envolver provincia-ciudad- distrito capa por capa, y agréguelo al hijo del padre del objeto de acuerdo con el pid , para que los datos no sean redundantes. Nos conviene buscar directamente el lugar de atribución más adelante.
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",
},
];Use reduce para procesar los datos.
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));
Este es el formato de datos que queremos. También se puede lograr un efecto de vinculación de tres niveles.
Cuatro Resumen
reduce es de gran ayuda para nosotros en el procesamiento de datos y muchas veces nos puede sorprender.
Gracias a todos, bienvenidos a discutir y aprender juntos en el área de comentarios.