两个循环遍历日期答案

【问题标题】：Two loops iterating through dates两个循环遍历日期
【发布时间】：2018-04-05 11:02:04
【问题描述】：

我尝试创建某种由 javascript (jQuery + moment.js) 生成的日历。开始日期是项目的iso周代码开始，结束日期是项目的iso周代码结束。我试图通过日期迭代两次，从开始日期开始，到结束日期结束。

问题是第一次迭代后，第二次没有执行，我不知道为什么。有什么想法吗？

$(function(){
				var startAt = moment(("2017-02-15 00:00:00").substring(0,10), "YYYYMMDD");
        var finishAt = moment(("2017-12-28 00:00:00").substring(0,10), "YYYYMMDD");
        
        var startAtWeekCode = startAt.isoWeek();
        var finishAtWeekCode = finishAt.isoWeek();
        
        var startAtYear = startAt.year();
        var finishAtYear = finishAt.year();
        
        var startAtDay = startAt.startOf('isoWeek');
        var finishAtDay = finishAt.endOf('isoWeek');
        
        var daysLength = finishAtDay.diff(startAtDay, 'days');
        
        $(".week-grid").css({
            width: daysLength*15
        });

    for(var i=startAtDay; i<finishAtDay; i.add(1, "month")){
      console.log("MONTH");
      var $monthItem = $('<div class="month"></div>');
      $monthItem.text(i.format("MMMM"));
      $monthItem.css({
        width: i.daysInMonth()*15
      });

      $(".line-calendar.project-calendar-months").append($monthItem);
    }
    
    for(var j=startAtDay; j<finishAtDay; j.add(1, "day")){
            console.log("day");
            var classSat = "";
            var classSun = "";
            var classHoli = ""; 
            
            
            if(j.day() == 6){
                classSat = " sat ";
            }
            if(j.day() == 0){
                classSun = " sun ";
            }
            $(".line-calendar.project-calendar-days").append('<div data-day-of-week="'+ j.day() +'" class="day' + classSat + classSun + classHoli + '">' + j.date() + '</div>');
        }
});

.overflow-x{
position: absolute;
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}

.month {
    color: #666;
    height: 15px;
    display: inline-block;
    float: left;
}

.day {
    width: 15px;
    height: 15px;
    line-height: 14px;
    font-size: 9px;
    font-weight: normal;
    float: left;
    color: #333;
}

.sat {
    background-color: #f9f9f9;
    color: #000;
}

.sun {
    background-color: #f4aab5;
    color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-x">
  <div class="week-grid">
  <!-- MONTHS -->
    <div class="line-calendar separator-row header noselect project-calendar-months">

    </div> 
    <!-- DAYS -->
    <div class="line-calendar separator-row  header noselect project-calendar-days">

    </div> 
  </div>
</div>

Link to JSFiddle

【问题讨论】：

我假设问题是您将 startAtDay 分配给i，因此i 和startAtDay 都指向同一个元素。然后您正在调整 i，这也会调整 startAtDay 值。因此，第二个循环条件将始终为假，因为它与第一个条件相匹配，其中 startAtDay 将为假。
@Taplar 谢谢你，现在我明白了:)

标签： javascript jquery loops iteration momentjs

【解决方案1】：

您将startAtDay 分配给i 和j 作为引用，这两个变量将引用相同的startAtDay，它在每个循环中都会发生变化。

你需要在改变它之前克隆值：https://momentjs.com/docs/#/parsing/moment-clone/

这里是更新的 plunker：https://jsfiddle.net/kfwxrv3o/

【讨论】：

【解决方案2】：

因为您在第一个循环中更改了 startAtDate。当您在 javascript 中进行分配时，您不会复制对象，而只是在内存中创建一个指向对象的新链接。所以，当你描述第一个循环时，你说这个对象现在有了一个新的引用，叫做i，这个对象应该被这个规则i.add(1, "month"))改变，所以，一步一步，startAtDate已经不小于finishAtDay -- 这就是问题所在，为什么第二个循环甚至没有开始

【讨论】：