为什么有些对象在这个 .splice() 中没有被删除，而有些是？

Question

我正在使用 .splice() 从包含时间戳的对象数组中删除对象，具体取决于 userDates 是否包含匹配的时间戳或对象时间戳之前或之后 45 分钟范围内的时间戳.本质上是使用 userDates 数组日期值删除所有具有重叠日期值的对象。

当您运行此代码时，您会注意到一些对象被删除，但其他对象没有。

JSFiddle：https://jsfiddle.net/jb2t3Lr9/1/ 和重现问题的代码：

let userDates = ["2020-11-20T22:00:00.000Z","2020-11-20T23:00:00.000Z","2020-11-21T00:00:00.000Z","2020-11-21T01:00:00.000Z","2020-11-22T02:15:00.000Z","2020-11-22T03:15:00.000Z","2020-11-22T01:00:00.000Z","2020-11-22T00:00:00.000Z","2020-11-21T23:00:00.000Z","2020-12-13T22:00:00.000Z","2020-12-14T22:00:00.000Z","2020-12-15T22:00:00.000Z","2020-12-16T22:00:00.000Z","2020-12-13T23:00:00.000Z","2020-12-14T23:00:00.000Z","2020-11-21T20:00:00.000Z","2020-11-22T20:00:00.000Z","2020-11-22T19:00:00.000Z","2020-11-21T19:00:00.000Z"];

let datesToUpdate = [
  { sessionInterval: 50, dateTime: '2020-11-22T20:00:00.000Z' },
  { sessionInterval: 50, dateTime: '2020-11-21T20:00:00.000Z' },
  { sessionInterval: 50, dateTime: '2020-11-21T19:00:00.000Z' },
  { sessionInterval: 50, dateTime: '2020-11-22T19:00:00.000Z' },
  { sessionInterval: 50, dateTime: '2020-11-22T17:30:00.000Z' },
  { sessionInterval: 50, dateTime: '2020-11-21T17:00:00.000Z' }
];


function removeOverlappingDates(userDates, datesToUpdate) {
  const FIFTEEN_MINUTES = 15 * 60 * 1000; // milliseconds
  datesToUpdate.forEach((toUpdate, index) => {
    userDates.forEach((date) => {
      let dateInMS = new Date("" + date).valueOf();
      const fifteenBefore = dateInMS - FIFTEEN_MINUTES;
      const thirtyBefore = dateInMS - FIFTEEN_MINUTES * 2;
      const fortyFiveBefore = dateInMS - FIFTEEN_MINUTES * 3;
      const fifteenAfter = dateInMS + FIFTEEN_MINUTES;
      const thirtyAfter = dateInMS + FIFTEEN_MINUTES * 2;
      const fortyFiveAfter = dateInMS + FIFTEEN_MINUTES * 3;
      let toUpdateInMS = new Date("" + toUpdate.dateTime).valueOf();
      if (
        toUpdateInMS == fifteenBefore ||
        toUpdateInMS == thirtyBefore ||
        toUpdateInMS == fortyFiveBefore ||
        toUpdateInMS == fifteenAfter ||
        toUpdateInMS == thirtyAfter ||
        toUpdateInMS == fortyFiveAfter ||
        toUpdateInMS == dateInMS
      ) {
        datesToUpdate.splice(index, 1);
      }
    });
  });

  return datesToUpdate;
}

console.log("datesToUpdate 1", datesToUpdate);
datesToUpdate = removeOverlappingDates(userDates, datesToUpdate);
console.log("datesToUpdate 2", datesToUpdate);

对我来说更奇怪的是，如果我只是将日期时间值数组相互比较（与对象数组包含的日期时间值相同），那么所有内容都会被正确删除。小提琴：https://jsfiddle.net/rc1mvzLq/

Answer 1

我将尝试使用最少的新方法来编写此代码，但正如 cmets 中所述，filter 非常适合此用例。

首先，永远不要更改您正在迭代的数组。这会导致难以调试的行为。但是，在这种情况下，开头的数组副本对您没有帮助，因为您正在使用 splice 删除数组中间的一个元素，这会导致一堆元素重新索引。

例如，如果您有[A,B,C,D,E] 并且您删除了索引1 处的元素，那么您现在有[A,C,D,E,F] 并且（因为该索引的迭代已经完成）您的索引增加并且现在是2 并且你永远不会在你的逻辑中测试值C。像这种情况还有一些情况，您可以看到多个元素是如何不受检查的。唯一可行的方法是，两个需要删除的元素永远不会彼此相邻。

为了保持这个简单并尽可能接近您的原始逻辑，我建议您计算已删除的元素数量并将索引偏移该数量。然而，也复制数组，这样你就不会改变你正在迭代的那个（注意：浅拷贝就足够了，你可以简单地使用spread syntax 创建一个具有 same 的新数组强> 对象）。

function removeOverlappingDates(userDates, datesToUpdate) {
  const FIFTEEN_MINUTES = 15 * 60 * 1000; // milliseconds
  const newDatesToUpdate = [...datesToUpdate];
  let deletedElementsCount = 0;
  datesToUpdate.forEach((toUpdate, index) => {
    // same code as before
      if (
        // check if this condition should maybe be toUpdateInMS >= fortyFiveBefore && toUpdateInMS <= fortyFiveAfter
      ) {
        const newIndex = index - deletedElementsCount;
        newDatesToUpdate.splice(newIndex, 1);
        deletedElementsCount = deletedElementsCount + 1;
      } 
    });
  });

  return newDatesToUpdate;
}

附带说明，我要更改副本是有原因的，这是因为 datesToUpdate 作为函数参数传递。如果datesToUpdate 数组在函数内部发生变化，它之后将保持变化。您不应该更改函数内部的参数对象（包括数组），除非您希望它保持这种状态。执行此操作的函数被认为具有side effects，如果不谨慎使用，也可能难以调试。在您的情况下，不需要做副作用，因为您正在返回结果。