React中如何对比两个对象数组，移除已有预约的时段？

你可以通过生成已预订时段的唯一标识集合来高效筛选可用时段，避免每次遍历都去查找整个预订记录数组，提升性能。

步骤说明： #

1. 先处理你已经筛选好的对应日期的预订记录（注意修正原代码中变量重复声明的问题）
2. 将已预订的date+time组合成唯一字符串，存入Set集合（查找效率远高于数组）
3. 用filter遍历allSlots，只保留不在已预订集合中的时段

完整代码示例： #

const allSlots = [
    { date: "28 Sept 22", time: "10:00am" },
    { date: "28 Sept 22", time: "10:20am" },
    { date: "28 Sept 22", time: "10:40am" },
    { date: "28 Sept 22", time: "11:00am" },
    { date: "28 Sept 22", time: "11:20am" },
    { date: "28 Sept 22", time: "11:40am" }
];

const existingBookings = [
    { time: "10:00am", propertyID: "XQPvl7MmLVNtxHdSRfDq", userID: "Bq4b3uz129aE2D5TCbaOiLQJrvC2", date: "28 Sept 22" },
    { time: "11:00am", propertyID: "XQPvl7MmLVNtxHdSRfDq", userID: "Ko2LdnQAdaE2OiLQJrvC2D5TCbA", date: "28 Sept 22" },
    { time: "10:40am", propertyID: "XQPvl7MmLVNtxHdSRfDq", userID: "Ko2LdnQAdaE2OiLQJrvC2D5TCbA", date: "28 Sept 22" },
    { time: "11:20am", propertyID: "XQPvl7MmLVNtxHdSRfDq", userID: "iLQJrKo2LdCbnQAdaE2OvC2D5TA", date: "28 Sept 22" }
];

// 你的日期筛选代码（修正变量重复声明问题）
const selectedDate = "28 Sept 22";
const filteredBookings = existingBookings.filter(
  (booking) => booking.date === selectedDate
);

// 生成已预订时段的唯一标识集合
const bookedSlots = new Set(
  filteredBookings.map(booking => `${booking.date}-${booking.time}`)
);

// 筛选出可用时段
const availableSlots = allSlots.filter(slot => {
  const slotKey = `${slot.date}-${slot.time}`;
  return !bookedSlots.has(slotKey);
});

console.log(availableSlots);
// 输出结果：
// [
//   { date: "28 Sept 22", time: "10:20am" },
//   { date: "28 Sept 22", time: "11:40am" }
// ]

关键细节： #

• 使用Set存储已预订标识，因为Set.has()的时间复杂度是O(1)，相比数组的find()或some()的O(n)，在数据量大时性能提升明显
• 用${date}-${time}作为唯一键，确保只有date和time同时匹配的时段才会被判定为已预订
• 修正了你原代码中const existingBookings重复声明的问题，避免变量覆盖导致的错误

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