前端开发中，数据的处理

一、前言

• 我们在前端开发者，后端返回的数据，有时候并不是我们想要的数据，这时候就需要我们对数据进行处理了。此篇文章单纯记录在前端开发中，对数据的处理，大佬请绕路

二、tree数据的处理

1. 数据处理为tree

• 数据处理前：

• 数据处理后：

1. 代码方法一

         const arr = [
           { id: 1, name: "部门A", parentId: 0 },
           { id: 2, name: "部门B", parentId: 1 },
           { id: 3, name: "部门C", parentId: 1 },
           { id: 4, name: "部门D", parentId: 2 },
           { id: 5, name: "部门E", parentId: 2 },
           { id: 6, name: "部门F", parentId: 3 },
         ];
   
         // 解题思路: 遍历数组方式  效果较慢
         function convert(arr) {
           const map = {};
           const tree = [];
   
           // 将每个节点以 id 为键存储到 map 对象中
           arr.forEach((item) => {
             map[item.id] = { ...item, children: [] };
           });
   
           // 遍历数组，将每个节点添加到其父节点的 children 数组中
           arr.forEach((item) => {
             if (item.parentId !== 0) {
               map[item.parentId].children.push(map[item.id]);
             } else {
               tree.push(map[item.id]);
             }
           });
           return tree;
         }
         console.log(convert(arr));
   

2. 代码方法二

         const arr = [
           { id: 1, name: "部门A", parentId: 0 },
           { id: 2, name: "部门B", parentId: 1 },
           { id: 3, name: "部门C", parentId: 1 },
           { id: 4, name: "部门D", parentId: 2 },
           { id: 5, name: "部门E", parentId: 2 },
           { id: 6, name: "部门F", parentId: 3 },
         ];
   
         // 解题思路: 使用一个Map来维护关系,便于查找  广度优先遍历
         function convert(arr) {
           const nodeParent = new Map();
           const result = [];
   
           // 构建映射关系
           arr.forEach((node) => {
             node.children = [];
             nodeParent.set(node.id, node);
           });
   
           // 构建树形结构
           arr.forEach((node) => {
             const parentId = node.parentId;
             const parentNode = nodeParent.get(parentId);
             if (parentNode) {
               parentNode.children.push(node);
             } else {
               result.push(node);
             }
           });
           return result;
         }
         console.log(convert(arr));
   

   

2. tree数据扁平化

const flattenTree = tree => {
  return tree.reduce((acc, item) => {
    acc.push({ ...item });
    if (item.children) {
      acc = acc.concat(flattenTree(item.children));
    }
    return acc;
  }, []);
};

三、数据字段的处理

• 有些时候，后端返回来的字段并不是我们想要的字段，这时候需要我的对数据进行处理

• 代码的实现

        let list = [
          { attendanceId: 1, attendanceName: "就餐" },
          { attendanceId: 2, attendanceName: "道闸" },
          { attendanceId: 3, attendanceName: "门禁" },
          { attendanceId: 4, attendanceName: "课堂" },
        ];
  
        let newList = list.map((item) => {
          return {
            key: item.attendanceId,
            name: item.attendanceName,
          };
        });
  
        console.log(newList);
  

  

• 目前自己只遇到这两种需要处理的数据，再后续开发者，如果遇到再继续更新