如何使用JavaScript从嵌套数组中删除指定日期的指定时段元素

我有一个嵌套数组结构（如下JSON示例），需要删除日期为2022-07-25的条目下，所有staffSlots中businessHours的availableSlots1数组里的09:30时段。主数组可能包含更多日期条目，示例仅展示部分。我尝试用splice方法写了代码，但误删了非目标元素，求正确实现方法。

示例数组结构 #

[
  {
    "day": "2022-07-22",
    "daykey": "Friday",
    "dayNumber": 5,
    "staffSlots": [
      {
        "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113",
        "businessHours": {
          "dayKey": "friday",
          "dayNumber": 5,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      },
      {
        "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1",
        "businessHours": {
          "dayKey": "friday",
          "dayNumber": 5,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      }
    ]
  },
  {
    "day": "2022-07-25",
    "daykey": "Monday",
    "dayNumber": 1,
    "staffSlots": [
      {
        "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113",
        "businessHours": {
          "dayKey": "monday",
          "dayNumber": 1,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      },
      {
        "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1",
        "businessHours": {
          "dayKey": "monday",
          "dayNumber": 1,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      }
    ]
  },
  {
    "day": "2022-07-26",
    "daykey": "Tuesday",
    "dayNumber": 2,
    "staffSlots": [
      {
        "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113",
        "businessHours": {
          "dayKey": "tuesday",
          "dayNumber": 2,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      },
      {
        "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1",
        "businessHours": {
          "dayKey": "tuesday",
          "dayNumber": 2,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      }
    ]
  },
  {
    "day": "2022-07-27",
    "daykey": "Wednesday",
    "dayNumber": 3,
    "staffSlots": [
      {
        "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113",
        "businessHours": {
          "dayKey": "wednesday",
          "dayNumber": 3,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      },
      {
        "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1",
        "businessHours": {
          "dayKey": "wednesday",
          "dayNumber": 3,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      }
    ]
  }
]

尝试的错误代码 #

var dayIndex = availableSlotsForAMonth.findIndex(o => o.day === '2022-07-25');
if (dayIndex != -1) {
  var staffIndex = availableSlotsForAMonth[dayIndex].staffSlots.findIndex(o => o.staffID === staffID);
  if (staffIndex != -1) {
    var slotIndex = availableSlotsForAMonth[dayIndex].staffSlots[staffIndex].businessHours.availableSlots1.findIndex(o => o === "09:30")
    if (slotIndex != -1) {
      availableSlotsForAMonth[dayIndex].staffSlots[slotIndex].businessHours.availableSlots1.splice(slotIndex, 1);
    }
  }
}

错误原因分析 #

• 索引混淆：最后一行错误使用slotIndex访问staffSlots数组，正确应该用staffIndex定位目标员工，这会导致修改完全不相关的员工条目。
• 仅处理单个员工：findIndex仅返回第一个匹配的员工索引，而需求是处理该日期下所有员工，因此需要遍历整个staffSlots数组。

正确实现方法 #

方法1：直接修改原数组 #

适合不需要保留原始数据的场景，操作更直接：

// 定位目标日期的条目
const targetDay = availableSlotsForAMonth.find(item => item.day === '2022-07-25');
if (targetDay) {
  // 遍历该日期下所有员工的时段列表
  targetDay.staffSlots.forEach(staffSlot => {
    const slots = staffSlot.businessHours.availableSlots1;
    // 找到目标时段的索引并删除
    const slotIndex = slots.findIndex(slot => slot === '09:30');
    if (slotIndex !== -1) {
      slots.splice(slotIndex, 1);
    }
  });
}

方法2：生成新数组（纯函数方式） #

不修改原数组，返回全新的数组，适合需要保留原始数据的场景：

const updatedSlots = availableSlotsForAMonth.map(dayItem => {
  // 非目标日期直接返回原对象
  if (dayItem.day !== '2022-07-25') {
    return dayItem;
  }
  // 复制目标日期对象并修改员工时段
  return {
    ...dayItem,
    staffSlots: dayItem.staffSlots.map(staffSlot => ({
      ...staffSlot,
      businessHours: {
        ...staffSlot.businessHours,
        // 过滤掉目标时段生成新数组
        availableSlots1: staffSlot.businessHours.availableSlots1.filter(slot => slot !== '09:30')
      }
    }))
  };
});

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