将日期添加到数组的 JavaScript for 循环会卡住某些 PC 上的页面

Question

在运行我创建的 ASP 页面之一时，我遇到了一个奇怪的问题。我在几台电脑上测试了该网页，只有少数电脑能够正常显示该页面。对于我测试过的大多数电脑，页面完全加载并且功能齐全。对于某些人来说，页面会卡住，Chrome 显示正在等待缓存或等待服务器 - 所有输入字段都 不可点击。另一方面，该页面在 Edge 上运行得非常好。有一台电脑的页面在 Chrome 和 Edge 上均无法运行。每台电脑都装有相同版本的 Windows 10、相同版本的 Chrome 和 Edge。

注释掉一些代码后，我发现有一个特定的 for 循环会导致某些 PC 上的崩溃。基本上，我想做的是显示特定日期范围内的一些数据，如果该日期范围内的日期没有数据，通常会丢失，因此，我将其添加到下面的 for 循环中然后为该日期分配 0 值，这样我就有一个具有漂亮布局和连续日期的表格。

// Checking if there are no missing dates in the date range. This could happen if the date doesn't exist in the SQL database.
for (var i = 0; i < dateArray.length - 1; i++) {
    // Checking if the next date is only incremented by 1
    var currentDate = GetDate(dateArray[i]);
    var nextDate = GetDate(dateArray[i + 1]);
    var shouldBeNextDate = GetNextDayDate(currentDate);

    // Adding the date that is missing. If the date won't be found later the quantities will be set to 0.
    if (convertDateToString(shouldBeNextDate) != convertDateToString(nextDate)) {
        dateArray.splice(i + 1, 0, convertDateToString(shouldBeNextDate));
    }
}

// Returns Date() from string
function GetDate(date){
    var numbers = date.match(/\d+/g);
    return new Date(numbers[2], numbers[1] - 1, numbers[0]);
}

// Returns the next day of the Date() passed as an argument
function GetNextDayDate(date){
    var numbers = convertDateToString(date).match(/\d+/g);
    return new Date(numbers[2], numbers[1] - 1, parseInt(numbers[0]) + 1);
}

// Returns Date() converted to string 
function convertDateToString(strDate){
    // Setting to MM/dd/YYYY format
    strDate = new Date(strDate).toLocaleDateString();
    var firstDash = strDate.indexOf("/");
    var secondDash = strDate.indexOf("/", firstDash + 1);
    var tempMM = strDate.substr(0, firstDash);
    var tempDD = strDate.substr(firstDash + 1, secondDash - firstDash - 1);
    var tempYYYY = strDate.substr(strDate.length - 4, 4);

    return tempDD + "/" + tempMM + "/" + tempYYYY;
}

当上面的 for 循环被注释掉时，页面就为每个人成功加载了。有什么想法可能导致这些问题吗？我缺少什么简单的东西吗？

Answer 1

问题出在这段代码上:

strDate = new Date(strDate).toLocaleDateString();

尽管您在注释中声明这将给出 MM/dd/YYYY 格式的字符串表示形式，但这并不能保证。 如 mdn 上所述(斜体是我的):

The toLocaleDateString() method returns a string with a language sensitive representation of the date portion of this date.

例如，当我在浏览器的控制台中键入以下内容时:

new Date().toLocaleDateString()

...然后在 FireFox 中我得到:

"10/29/2019"

这就是你所期望的，但在 Chrome 中我得到:

"29-10-2019"

显然，我的区域设置的实际情况有些困惑。但重要的是，采用任何格式都是错误的(除非您将参数传递给 toLocaleDateString 使其独立于当前的区域设置)。

假设您将 Date 对象 10/29/2019 传递给 convertDateToString:在后一种情况下它会 在 .toLocaleDateString 返回的字符串中甚至找不到任何斜杠，因此它返回的字符串本身将是 “//2019”。当 GetNextDayDate 尝试从中创建 Date 对象时，它会返回无效的 Date。

因此，循环中的 if 条件将始终为 true，并且新条目将被拼接到数组中， 使数组的长度更大，因此循环永远不会结束。

解决方案是仅在确实必要时才执行日期到字符串的转换， 当您这样做时，使用 Date 方法来提取日期部分，而不是 toLocaleDateString。

这是更正后的代码:

for (var i = 0; i < dateArray.length - 1; i++) {
    var currentDate = GetDate(dateArray[i]);
    var nextDate = GetDate(dateArray[i + 1]);
    var shouldBeNextDate = GetNextDayDate(currentDate);

    // No need to convert to String
    if (shouldBeNextDate < nextDate) {
        dateArray.splice(i + 1, 0, convertDateToString(shouldBeNextDate));
    }
}
console.log(dateArray);

function GetDate(date){
    var numbers = date.match(/\d+/g);
    return new Date(numbers[2], numbers[1] - 1, numbers[0]);
}

function GetNextDayDate(date) { // Don't convert to string here.
    date = new Date(date); // clone the date
    date.setDate(date.getDate() + 1); // add one day to it
    return date;
}

function convertDateToString(date) {
    // Get the date parts directly
    let tempMM = date.getMonth() + 1;
    let tempDD = date.getDate();
    let tempYYYY = date.getFullYear();

    // Pad with zeroes where needed
    return (tempDD + "/" + tempMM + "/" + tempYYYY).replace(/\b\d\b/g, "0$&");
}