TypeScript根据key路径查找修改任意深度嵌套对象数组元素

需求拆解 #

• 输入为未知嵌套深度的类目录结构数组：目录节点携带items子节点数组，所有节点包含name/size/__KEY__/isDirectory/dateModified属性
• 输入路径为各层级节点__KEY__组成的字符串数组，需要沿路径逐层向下匹配
• 最终目标：定位到路径最末端的目录节点，找到其items数组中最新添加的对象并完成修改
  注意：同层级或跨层级可能存在重复__KEY__值（如示例结构中就有重复key），遍历过程必须限定在当前父节点的直接子节点范围内匹配，禁止全局查找，避免匹配错位

前置TS类型定义 #

先明确节点类型，规避TS类型报错：

interface FileNode {
  name: string;
  size: number;
  __KEY__: string;
  isDirectory: boolean;
  dateModified: string;
  content?: string;
  items?: FileNode[]; // 仅目录节点存在该字段
}

实现思路 #

• 采用迭代而非递归的方式逐层遍历，避免极深嵌套下的栈溢出问题，遍历性能更稳定
• 初始查找范围设为根节点数组，每遍历一个路径key，就在当前查找范围内匹配对应key的目录节点
• 每找到一层匹配节点，就将下一轮的查找范围更新为该节点的items数组
• 遍历完所有路径key后，最后匹配到的节点就是目标父目录
• 从目标父目录的items数组中定位最新节点：如果业务保证数组尾部就是最新插入项，直接取最后一项即可（时间复杂度O(1)）；如果无法保证插入顺序，就遍历对比dateModified时间戳，取时间最大的节点
• 对定位到的最新节点执行修改逻辑，全流程加边界判断处理非法路径、空目录等异常场景

完整实现代码 #

/**
 * 沿key路径定位末端目录，修改其下最新节点
 * @param root 根目录节点数组
 * @param keyPath 层级__KEY__组成的路径数组
 * @param modifyFn 自定义修改逻辑，接收定位到的最新节点作为参数
 * @returns 修改后的最新节点，路径非法/目录为空时返回null
 */
function modifyLatestItemInTargetDir(
  root: FileNode[],
  keyPath: string[],
  modifyFn: (targetNode: FileNode) => void
): FileNode | null {
  if (!keyPath.length || !root.length) return null;

  let currentLevelNodes: FileNode[] = root;
  let targetDir: FileNode | null = null;

  for (let i = 0; i < keyPath.length; i++) {
    const currentKey = keyPath[i];
    const matchedNode = currentLevelNodes.find(
      node => node.__KEY__ === currentKey && node.isDirectory
    );

    if (!matchedNode) {
      console.error(`路径第${i + 1}层匹配失败，未找到key为${currentKey}的目录节点`);
      return null;
    }

    if (i === keyPath.length - 1) {
      targetDir = matchedNode;
      break;
    }

    if (!matchedNode.items?.length) {
      console.error(`路径第${i + 1}层节点为无效目录，无下级内容`);
      return null;
    }
    currentLevelNodes = matchedNode.items;
  }

  if (!targetDir?.items?.length) {
    console.error("目标目录为空，无内容可修改");
    return null;
  }

  // 两种取最新节点的逻辑二选一即可
  // 场景1：确认数组插入顺序为新元素追加到尾部，用这个（性能最优）
  // const latestNode = targetDir.items[targetDir.items.length - 1];

  // 场景2：无法确认插入顺序，按修改时间取最新
  const latestNode = targetDir.items.reduce((newest, node) => {
    return new Date(node.dateModified).getTime() > new Date(newest.dateModified).getTime()
      ? node
      : newest;
  }, targetDir.items[0]);

  modifyFn(latestNode);
  return latestNode;
}

调用示例 #

基于提供的示例结构和路径：

const pathKeys = ["29be61bd-3eee-7e5d-abb2-8791c02ab842", "19be61bd-3eee-7e8d-abb2-8791c02ab841", "19be61bd-3eee-7e8d-abb2-8791c02ab841"];

// 调用方法，比如修改最新节点的名称和大小
const modifiedNode = modifyLatestItemInTargetDir(rootData, pathKeys, (node) => {
  node.name = "已修改的文件名.gif";
  node.size = 10240;
});

console.log(modifiedNode);

方案优势 #

• 迭代遍历无递归深度限制，超深层级目录结构也能稳定运行
• 每层匹配严格限定在当前父节点的直接子节点范围内，重复key场景下不会出现匹配错误
• 查找逻辑和修改逻辑解耦，通过回调传入自定义修改规则，扩展灵活
• 全链路异常边界处理，非法路径、空目录等场景不会触发原生JS报错，可通过日志快速定位问题

内容的提问来源于stack exchange，提问作者Samith Basnayaka