如何在嵌套数组中指定对象前插入新元素

心靈之曲 2025-12-26 00:00:00 次阅读

本文介绍一种递归遍历嵌套对象数组的方法，精准定位目标对象（按 `name` 字段匹配），并在其所在 `children` 数组中**在其前方插入新对象**，适用于任意深度的树形结构。

在处理树状结构数据（如菜单、分类、组织架构）时，常需动态向某节点的子列表中插入新项。关键难点在于：目标对象可能位于任意嵌套层级，且插入位置必须严格为「该目标对象之前」，而非父级 children 数组末尾或任意位置。

以下是一个健壮、可复用的解决方案：

function addObjectBefore(arr, targetName, newObj) {
  if (!Array.isArray(arr)) return;

  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];

    // ✅ 优先检查当前层级的 children 是否包含目标对象
    if (Array.isArray(item.children)) {
      const targetIndex = item.children.findIndex(obj => obj.name === targetName);
      if (targetIndex !== -1) {
        item.children.splice(targetIndex, 0, newObj); // 在目标前插入
        return; // ✅ 找到即终止，避免重复插入
      }
    }

    // ❌ 未在当前 children 中找到 → 递归搜索更深层的 children
    if (Array.isArray(item.children)) {
      addObjectBefore(item.children, targetName, newObj);
    }
  }
}

使用示例

const data = [
  {
    name: 'Fruit',
    children: [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Fruit loops' }],
  },
  {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [{ name: 'Broccoli' }, { name: 'Brussels sprouts' }],
      },
      {
        name: 'Orange',
        children: [{ name: 'Pumpkins' }, { name: 'Carrots' }],
      },
    ],
  },
];

addObjectBefore(data, 'Pumpkins', { name: 'new name' });

console.log(JSON.stringify(data, null, 2));
// 输出中，'Orange'.children 将变为：
// [{ name: 'Pumpkins' } → 前插入 → { name: 'new name' }, { name: 'Pumpkins' }, { name: 'Carrots' }]