JavaScript如何按索引删除多层对象嵌套数组中的指定元素

原有代码问题说明 #

你写的逻辑本身符合JS引用类型修改规则，未得到预期结果大概率是两个变量未正确赋值：

• deleteId 未设置为目标值 'A1'
• delIndex 未设置为要删除的目标下标 0
  另外原逻辑缺少边界校验，当匹配的id不存在、或者下标越界时会直接报错。

推荐实现方案 #

原地修改方案（直接改动原数组，适合不需要保留原始数据的场景） #

使用find代替filter更高效，匹配到目标对象后直接操作子数组：

const targetId = 'A1';
const delIndex = 0; // 要删除的value数组元素下标

const targetItem = data.find(item => item.id === targetId);
// 增加边界校验，避免报错
if (targetItem && delIndex >= 0 && delIndex < targetItem.value.length) {
  targetItem.value.splice(delIndex, 1);
}

不可变修改方案（不改动原数组，生成新数组，适合React/Vue等框架的状态更新场景） #

不会产生副作用，原始数据保持不变：

const targetId = 'A1';
const delIndex = 0;

const newData = data.map(item => {
  // 非目标项直接返回
  if (item.id !== targetId) return item;
  // 目标项生成新对象，过滤掉指定下标的子数组元素
  return {
    ...item,
    value: item.value.filter((_, index) => index !== delIndex)
  };
});

两种方案执行后都能得到你给出的预期输出结果。

内容的提问来源于stack exchange，提问作者Pratap Penmetsa