使用lodash处理数据

lodash.reduce | Lodash中文文档 | Lodash中文网

原数据格式

const objdata = {
  otherPerson_otherCertNo_0: "4",
  otherPerson_otherCertNo_1: "44",
  otherPerson_otherCertNo_2: "777",
  otherPerson_otherName_0: "2",
  otherPerson_otherName_1: "55",
  otherPerson_otherName_2: "666",
  otherPerson_otherRelation_0: "3",
  otherPerson_otherRelation_1: "33",
  otherPerson_otherRelation_2: "883",
  breedingInformation_quantity_1: "t",
  breedingInformation_remarks_1: "g",
  breedingInformation_variety_1: "s",
  plantingInformation_area_2: "j",
  plantingInformation_plantingSpecies_2: "h",
  plantingInformation_remarks_2: "m",
  plantingInformation_area_1: "1",
  plantingInformation_plantingSpecies_1: "ggg",
  plantingInformation_remarks_1: "1",
};

期望格式

  • key格式为 objName_filedName_Index
{
    "otherPerson": [
        {
            "otherCertNo": "4",
            "otherName": "2",
            "otherRelation": "3"
        },
        {
            "otherCertNo": "44",
            "otherName": "55",
            "otherRelation": "33"
        },
        {
            "otherCertNo": "777",
            "otherName": "666",
            "otherRelation": "883"
        }
    ],
    "breedingInformation": [
        null,
        {
            "quantity": "t",
            "remarks": "g",
            "variety": "s"
        }
    ],
    "plantingInformation": [
        null,
        {
            "area": "1",
            "plantingSpecies": "ggg",
            "remarks": "1"
        },
        {
            "area": "j",
            "plantingSpecies": "h",
            "remarks": "m"
        }
    ]
}
  • 过滤null方法
/**
 * 过滤掉对象中值为 null 或 undefined 的属性
 * @param data 需要过滤的对象
 * @returns 过滤后的对象
 */
export const filterNull: (data: any) => OBJECT_NAME_TYPE = (
  data: T,
) => {
  return Object.keys(data).reduce((prev, key) => {
    const newValue = [...data[key]];
    prev[key] = newValue.filter((i) => i); // 过滤掉值为 null 或 undefined 的属性
    return prev;
  }, {});
};

蠢方法

/**
 * 处理字符串数据变化的对象
 * @param {Object} obj - 需要处理的对象
 * @returns {Object} - 处理后的对象
 */
export const handelStringDataChangeObj = (obj) => {
  const newData = {}; // 存储处理后的对象
  const newMap = new Map(Object.entries(obj)); // 将原对象转换为Map对象
  newMap.forEach((value, key) => {
    const [objName, fieldName, index] = key.split("_"); // 解构出对象名、字段名和索引
    if (Object.prototype.hasOwnProperty.call(newData, objName)) { // 如果对象已存在,则将新值添加到对应的数组中
      const copy = newData[objName];
      if (copy[index]!== undefined) { // 如果数组中已存在该索引,则将新值添加到该索引中
        copy[index] = {
        ...copy[index],
          [fieldName]: value,
        };
      } else { // 如果数组中不存在该索引,则创建一个新的数组,并将新值添加到该数组中
        copy[index] = {
          [fieldName]: value,
        };
      }
    } else { // 如果对象不存在,则创建一个新的对象,并将新值添加到该对象中
      newData[objName] = [];
      const copy = newData[objName];
      copy[index] = {
        [fieldName]: value,
      };
    }
  });
  return filterNull(newData); // 返回处理后的对象
};

使用lodash reduce优化后方法

/**
 * 将对象中的数据进行处理,返回处理后的结果
 * @param obj 需要处理的对象
 * @returns 处理后的结果
 */
import { reduce } from 'lodash';

export const handelStringDataChangeObj = (objData: T): Record => {
  // 使用 lodash 库中的 reduce 方法对对象进行处理
  const resultData = reduce(
    objData,
    // reduce 方法的回调函数,用于处理对象中的每个属性
    (result, value, key) => 
      const [objName, fieldName, index] = key.split('_');
      (result[objName] || (result[objName] = []))[index] = {
        // 将 fieldName 和 value 合并成一个对象,存储到 result 中
       ...result[objName][index],
        [fieldName]: value,
      };
      return result;
    // reduce 方法的初始值为一个空对象
   , {},
  );
  return filterNull(resultData);
};

你可能感兴趣的:(javascript,前端,typescript)