您将获得一个包含shop.opens和shop.closes的时间范围。这是一个非常好的起点。您可以从中生成约会的其他时间范围。请这样考虑：

function generateAppointments(shop) {
    let appointments = [];
    let [hoursOp, minutesOp] = shop.opens.split(":"); //here you retrieve hours and minutes from your input string
    let [hoursCl, minutesCl] = shop.closes.split(":");
    let timeRange = Number.parseInt(hoursCl) - Number.parseInt(hoursOp);

    for (let i = 0; i < timeRange; i++) { //here you iterate for the whole range of hours you are given
        const appHourStart = Number.parseInt(hoursOp) + i;
        //here you check if the appointment is already booked
        //this is a lot of iteration, maybe you could find a better way to approach this
        //I made it what with came to my mind first
        const firstHalfBooked = shop.appointments.some(a => a.start === `${appHourStart}:00`); 
        const secondHalfBooked = shop.appointments.some(a => a.start === `${appHourStart}:30`);

        //here, you only create a array element if the spot isn't booked
        if(!firstHalfBooked) appointments.push(`${appHourStart}:00 - ${appHourStart}:30`);
        if(!secondHalfBooked) appointments.push(`${appHourStart}:30 - ${appHourStart+1}:00`);
    }

    console.log (appointments);
    return appointments;
}

希望这对你有帮助，你也能理解。
编辑：我保留了“开门”和“关门”字段的会议记录，这样你就可以预料到如果一家商店在8：30开门。

如果你有一个预留插槽的数组，并想得到一个可用插槽的数组，你需要一个所有插槽的数组无论如何（预留和可用的）。可以迭代所有插槽的数组，过滤掉另一个数组中的预留插槽，但这似乎不是很有效。
我想建议一个不同的方法：我有一个包含所有插槽的数组（默认情况下所有插槽都可以保留），然后使用一个简单的标志来指示插槽是否被保留。这将允许我们轻松地过滤原始数组，并获得一个包含空闲插槽或保留插槽的数组，这取决于您当前需要哪一个：

const shop = {
  user: "fakeid123",
  title: "Barber Shop",
  description: "fake description",
  opens: new Date('2010-01-01T08:00:00Z'),
  closes: new Date('2010-01-01T21:00:00Z'),
  slotDuration: 30 * 60000
};

shop.slots = generateSlots(shop.opens, shop.closes, shop.slotDuration);

reserveSlot("14:00-14:30", 'Customer 1');
reserveSlot("10:00-10:30", 'Customer 2');
reserveSlot("15:30-16:00", 'Customer 3');
reserveSlot("19:00-19:30", 'Customer 4');

console.log('RESERVED', getFilteredSlots(true));
console.log('AVAILABLE', getFilteredSlots(false));

function generateSlots(startTime, endTime, duration) {
  const allSlots = [];
  let slotStart = startTime;

  do {
    const slot = {
      start: slotStart,
      end: new Date(slotStart.getTime() + duration),
      reserved: false
    };
    slot.id = `${slot.start.getUTCHours()}:${slot.start.getUTCMinutes() || '00'}-${slot.end.getUTCHours()}:${slot.end.getUTCMinutes() || '00'}`;
    
    allSlots.push(slot);
    slotStart = slot.end;
  } while (slotStart < endTime);

  return allSlots;
}

function reserveSlot(slotId, customerName) {
  const result = shop.slots.map(slot => slot.id === slotId ? {...slot, customerName, reserved: true} : slot);
  shop.slots = result;
}

function getFilteredSlots(isReserved) {
  return shop.slots.filter(slot => slot.reserved === isReserved);
}

注：我还使用了日期类型而不是常规字符串，因为它更容易生成类似于generateSlots函数的列表。

最简单的方法是使用lodash库，它提供了许多数组函数。
您要查找的是_.xor
https://lodash.com/docs/4.17.15#xor

var timeTable = [];
for(let i = 8; i < 21; i++){
    timeTable.push(`${i}:00-${i}:30`);
    timeTable.push(`${i}:30-${i+1}:00`);
}

var myAppointments = ['8:00-8:30', '8:30-9:00', '9:00-9:30', '9:30-10:00', '10:00-10:30', '10:30-11:00', '11:00-11:30', '11:30-12:00', '12:30-13:00', '13:30-14:00', '14:30-15:00', '15:00-15:30', '15:30-16:00', '16:00-16:30', '16:30-17:00', '17:30-18:00', '18:00-18:30', '18:30-19:00', '19:00-19:30', '19:30-20:00', '20:00-20:30', '20:30-21:00'];

var myFreeTime = _.xor(myAppointments, timeTable);

myFreeTime.forEach((time) => document.getElementById("time").insertAdjacentHTML('beforeend', `${time}<br />`))

参见示例：https://jsfiddle.net/domus71/1n0voakc/
科斯季斯