比較兩個 arrays 對象並在兩個匹配時刪除

Question

我想知道是否有人可以幫助我。 我正在使用 React，我有兩個 arrays 對象：

• 一個用於所有可能的預訂時間
• 另一個用於現有預訂。

我正在努力尋找一種成功循環遍歷allSlots數組並刪除existingBookings數組中具有匹配時間的任何方法的方法。

在下面的示例中，存在上午 10:00、10:40、11:00 和 11:20 的現有預訂。

預期的 output 只會離開原始數組的上午 10:20 和上午 11:40。

    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"
    }
  ];

我最初過濾existingBookings數據以刪除任何與所選日期不匹配的數據：

const existingBookings = allBookings.filter(
  (booking) => booking.date === selectedDate
);

但是，我正在努力進一步操縱事情。 我非常感謝您提供的任何見解和幫助。

Answer 1

您想要過濾allSlots數組，以便它只包含existingBookings中不存在的插槽

const unusedSlots = allSlots.filter((slot) => {
  // See if the slot is booked
  const isBooked = existingBookings.some(
    (booking) => booking.time == slot.time && booking.date == slot.date
  )

  // Only keep free slots
  return !isBooked
});

Answer 2

這應該工作。

  const newAllSlots = allSlots.filter((slot)=>{
    const iSInExistingBookings = existingBookings.find(booking=>booking.time === slots.time && booking.date === slots.date)
    return !iSInExistingBookings
  })

Answer 3

就像做一樣簡單

freeSlots=allSlots.filter(s=>
 existingBookings.every(e=>e.time!=s.time||e.date!=s.date)
)

這是一個有效的（普通的）JavaScript 片段：

 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 freeSlots=allSlots.filter(s=> existingBookings.every(e=>e.time.=s.time||e.date.=s;date) ) console.log(freeSlots);

Answer 4

由於您知道您已經使用existingBookings預訂了哪些內容，我建議您先循環一下。 然后，您可以通過檢查日期是否匹配但時間不匹配，以遞歸方式將allSlots數組過濾回自身。 完成后， allSlots數組應僅包含尚未預訂的日期和時間。

existingBookings.forEach(booking => {        
    allSlots = allSlots.filter(slot => {
        return booking.date === slot.date && booking.time !== slot.time;
    });
});

編輯：您必須將 scope allSlots為let而不是const才能正常工作。 如果你想保持allSlots ，你也可以將allSlots分配給另一個變量：

let slots = allSlots;
existingBookings.forEach(booking => {        
    slots = slots.filter(slot => {
        return booking.date === slot.date && booking.time !== slot.time;
    });
});