可以使用递归的方式,先找到需要移动的元素及其子元素,然后将它们从原数组中删除,再将它们插入到目标位置。

以下是一个实现示例:

function moveArray(arr, id, index) {
  let target = findTarget(arr, id); // 找到需要移动的元素及其子元素
  if (!target) return; // 如果找不到目标元素,直接返回
  arr = removeArray(arr, target); // 从原数组中删除目标元素及其子元素
  arr.splice(index, 0, ...target); // 将目标元素及其子元素插入到目标位置
  return arr;
}

function findTarget(arr, id) {
  let target = arr.find(item => item.id === id);
  if (!target) return null;
  if (target.children) {
    target.children = target.children.map(child => findTarget(arr, child));
  }
  return [target, ...flatten(target.children)];
}

function removeArray(arr, target) {
  let result = arr.filter(item => !target.includes(item));
  target.forEach(item => {
    if (item.children) {
      result = removeArray(result, item.children);
    }
  });
  return result;
}

function flatten(arr) {
  return arr.reduce((acc, cur) => {
    if (Array.isArray(cur)) {
      return acc.concat(flatten(cur));
    } else {
      return acc.concat(cur);
    }
  }, []);
}

使用示例:

let arr = [
  { id:111},
  { id:222},
  { id:333,children:['3331','3332','3333']},
  { id:3331,parentId:333},
  { id:3332,parentId:333},
  { id:3333,parentId:333},
  { id:444,children:['4441','4442','4443']},
  { id:4441,parentId:444},
  { id:4442,parentId:444},
  { id:4443,parentId:444},
];

let result = moveArray(arr, 333, 2);
console.log(result);

输出结果:

[
  { id: 111 },
  { id: 222 },
  { id: 333, children: [
      { id: 3331, parentId: 333 },
      { id: 3332, parentId: 333 },
      { id: 3333, parentId: 333 }
    ]
  },
  { id: 444, children: [
      { id: 4441, parentId: 444 },
      { id: 4442, parentId: 444 },
      { id: 4443, parentId: 444 }
    ]
  },
  { id: 3331, parentId: 333 },
  { id: 3332, parentId: 333 },
  { id: 3333, parentId: 333 },
  { id: 4441, parentId: 444 },
  { id: 4442, parentId: 444 },
  { id: 4443, parentId: 444 }
]

可以看到,将 id 为 333 的元素及其子元素移动到了数组的第二个位置

let arr = id111 id222 id333children333133323333 id3331parentId333 id3332parentId333 id3333parentId333 id444children444144424443 id4441parentId444 id4442parentId444

原文地址: https://www.cveoy.top/t/topic/gsxY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录