react字符串路径获取/修改数据

功能描述：

提示：根据一个字符串寻找数组对象内的数据：

支持举例：obj.arr[0].name，obj.arr[0].obj.arr[1].name，obj.arr[0].obj.arr[1].obj.arr[2].name

---

获取数据方法

提示：获取/修改数据使用方法统一说明

function get(obj, path, defaultValue) {
    const keys = splitPath(path)
    let result = obj;
    for (let key of keys) {
      if (result === undefined || result === null) {
        return defaultValue;
      }
  
      const isIndex = /^\d+$/.test(key);
      if (isIndex) {
        result = result[parseInt(key, 10)];
      } else {
        result = result[key];
      }
    }
  
    return result === undefined ? defaultValue : result;
}
function splitPath(path) {
  return path.replace(/\[(\d+)\]/g, '.$1').split('.').map((part) => {
    return isNaN(part) ? part : parseInt(part, 10);
  });
}
export default get;

修改数据方法

提示：获取/修改数据使用方法统一说明

function set(object, path, value) {
  // const keys = Array.isArray(path) ? path : path.split('.');
  const keys = splitPath(path)
  let lastKeyIndex = keys.length - 1;
  let current = object;

  for (let i = 0; i < lastKeyIndex; i++) {
    const key = keys[i];
    const isIndex = !isNaN(key);

    if (isIndex) {
      const index = parseInt(key, 10);
      if (!Array.isArray(current)) {
        current[index] = current[index] || [];
        current = current[index];
      } else {
        current = current[index];
      }
    } else {
      if (current[key] === undefined) {
        current[key] = {};
      }
      current = current[key];
    }
  }

  const lastKey = keys[lastKeyIndex];
  const isLastIndexIndex = !isNaN(lastKey);

  if (isLastIndexIndex) {
    const index = parseInt(lastKey, 10);
    if (!Array.isArray(current)) {
      current[index] = value;
    } else {
      current[index] = value;
    }
  } else {
    current[lastKey] = value;
  }
  return object;
}
function splitPath(path) {
  return path.replace(/\[(\d+)\]/g, '.$1').split('.').map((part) => {
    return isNaN(part) ? part : parseInt(part, 10);
  });
}
export default set;

方法使用

提示：提前在使用的页面内引入使用的方法

使用参数说明：
get(目标数据对象,字符串地址,默认值)
set(目标数据对象,字符串地址,要修改的值)
全局状态管理方法链接

import React, { useState, useEffect } from "react";
//借用一个Input组件说明使用方法
import { Input } from "@alifd/next";
//我分了两个文件，也可以放到一个文件内引入
import get from '../../toolJs/lodashGet';
import set from '../../toolJs/lodashSet';
function InputsComStr(props){
  //这里是上篇文章使用的全局状态管理方法 userData是需要修改的状态对象
  const { userData, setData } = useAppContext();
  //path 为字符串地址 例如name，obj.arr[0].name，obj.arr[0].obj.arr[1].name
  const path = 'name';
  const dxchan = (e:string)=>{
      let newuserData=userData;
      //根据path修改newuserData的值后替换全局数据
      set(newuserData,path,e);
      //修改全局状态
      setData({...userData,...newuserData})
  };
  return <div className="InputDiv">
    <Input className="w100"
      placeholder="输入替换path内数据"
      aria-label="Medium" 
      // 从全局状态内获取相应的path携带的参数
      defaultValue={get(userData,path)}
      value={get(userData,path)}
      onChange={(e:string)=>dxchan(e)}/>
  </div>
}
export default InputsComStr;

---

提示：欢迎提出修改意见