javascript - javascript中带条件的嵌套循环

Question

我正在做一个项目，我想创建一个名为 full_day[] 的数组，使其在通过后与数组 time_plan[] 的长度完全相等我的 day_schedule()。

这是我的代码:

function day_schedule(){

var time_plan = [{"lesson_start":"08:00","lesson_end":"09:00"},{"lesson_start":"09:00","lesson_end":"10:00"},{"lesson_start":"10:00","lesson_end":"11:00"},{"lesson_start":"11:00","lesson_end":"12:00"},{"lesson_start":"12:00","lesson_end":"13:00"},{"lesson_start":"13:00","lesson_end":"13:30"},{"lesson_start":"13:30","lesson_end":"14:30"}];

var day = [{"subject_name":"Math-1","lesson_start":"08:00","lesson_end":"09:00"},{"subject_name":"Phy","lesson_start":"11:00","lesson_end":"12:00"},{"subject_name":"Engl","lesson_start":"12:00","lesson_end":"13:00"}];

var key1 = 'lesson_start';
var key2 = 'lesson_end';
var full_day = [];


for (var d = 0; d < day.length; d++) {
                var start_time = day[d].lesson_start;
                var end_time = day[d].lesson_end;

                for (var i = 0; i < time_plan.length; i++) {
                        var search_key = time_plan[i][key1] == start_time && time_plan[i][key2] == end_time;
                        if (search_key == true) {
                            document.writeln('day matched == ' + day[d],'<br>');
                            full_day.push(day[d]);
                        } else {
                            full_day.push({ 
                                lesson_start: ' ',
                                lesson_end: ' ',
                                subject_name: ' '
                            });
                        }

                    }


                console.log('full day',full_day.length, full_day);


            }
}

day_schedule();

我期待的结果是

full day 7 [
  {
    "subject_name": "Math-1",
    "lesson_start": "08:00",
    "lesson_end": "09:00"
  },
  {
    "lesson_start": " ",
    "lesson_end": " ",
    "subject_name": " "
  },
  {
    "lesson_start": " ",
    "lesson_end": " ",
    "subject_name": " "
  },
  {
    "subject_name": "Phy",
    "lesson_start": "11:00",
    "lesson_end": "12:00"
  },
  {
    "subject_name": "Engl",
    "lesson_start": "12:00",
    "lesson_end": "13:00"
  },
  {
    "lesson_start": " ",
    "lesson_end": " ",
    "subject_name": " "
  },
  {
    "lesson_start": " ",
    "lesson_end": " ",
    "subject_name": " "
  }
];

但我不知道该怎么做。

Answer 1

如果您希望 full_day 大小与 time_plan 匹配，那么您的迭代都错了。 您在代码中所做的是迭代 day 中的每个元素(3 个元素)，并为这些元素中的每一个添加一个对象到 full_day 中的每个元素 time_plan(7 个元素)。 所以你得到的是:

1. day 中的第一个 元素 您将 7 个对象添加到 full_day(7 个元素)
2. day 中的第二个元素，您将另外 7 个对象添加到 full_day(14 个元素)
3. day 中的第三个元素，您再次将 7 个对象添加到 full_day(21 个元素)

如果你想保留你使用的逻辑，我建议你像这样把你的循环反过来:

function day_schedule(){
    var time_plan = [{"lesson_start":"08:00","lesson_end":"09:00"},
                     {"lesson_start":"09:00","lesson_end":"10:00"},
                     {"lesson_start":"10:00","lesson_end":"11:00"},
                     {"lesson_start":"11:00","lesson_end":"12:00"},
                     {"lesson_start":"12:00","lesson_end":"13:00"},
                     {"lesson_start":"13:00","lesson_end":"13:30"},
                     {"lesson_start":"13:30","lesson_end":"14:30"}];

    var day =[{
                  "subject_name":"Math1",
                  "lesson_start":"08:00",
                  "lesson_end":"09:00"
              },
              {
                  "subject_name":"Phy",
                  "lesson_start":"11:00",
                  "lesson_end":"12:00"
              },
              {
                  "subject_name":"Engl",
                  "lesson_start":"12:00",
                  "lesson_end":"13:00"
    }];

    var key1 = 'lesson_start';
    var key2 = 'lesson_end';
    var full_day = [];

    for (var tp = 0; tp < time_plan.length; tp++) {
        var start_time = time_plan[tp].lesson_start;
        var end_time = time_plan[tp].lesson_end;
        var lesson = { 
            lesson_start: ' ',
            lesson_end: ' ',
            subject_name: ' '
        };
        for (var i = 0; i < day.length; i++) {
            var search_key = day[i][key1] == start_time && day[i][key2] == end_time;
            if (search_key == true) {
                lesson = day[i]
            }
        }
        full_day.push(lesson)
    }
    console.log('full day',full_day.length, full_day);
}

day_schedule();

如您所见，这提供了所需的输出。 现在，我们还可以稍微修改代码以使其更漂亮，并使用一些有用的 JavaScript Array 函数，如 find()

function day_schedule(){
    var time_plan = [{"lesson_start":"08:00","lesson_end":"09:00"},
                     {"lesson_start":"09:00","lesson_end":"10:00"},
                     {"lesson_start":"10:00","lesson_end":"11:00"},
                     {"lesson_start":"11:00","lesson_end":"12:00"},
                     {"lesson_start":"12:00","lesson_end":"13:00"},
                     {"lesson_start":"13:00","lesson_end":"13:30"},
                     {"lesson_start":"13:30","lesson_end":"14:30"}
        ];
    var day =[{
                  "subject_name":"Math1",
                  "lesson_start":"08:00",
                  "lesson_end":"09:00"
              },
              {
                  "subject_name":"Phy",
                  "lesson_start":"11:00",
                  "lesson_end":"12:00"
              },
              {
                  "subject_name":"Engl",
                  "lesson_start":"12:00",
                  "lesson_end":"13:00"
        }];
    var full_day = [];

    // Use foreach instead of regular for when you iterate arrays
    for (tp in time_plan) {
        var plan = time_plan[tp]
        var start_time = plan.lesson_start;
        var end_time = plan.lesson_end;
        // Use this function to find a suitable lesson given start and end times
        var lesson = day.find(function(d) {
            var start_matches = d.lesson_start == start_time;
            var end_matches = d.lesson_end == end_time;
            var matches = start_matches && end_matches;
            return start_matches && end_matches;
        }) || { // ... or assing a default empty value
            lesson_start: ' ',
            lesson_end: ' ',
            subject_name: ' '
        };
        full_day.push(lesson)
    }
    console.log('full day',full_day.length, full_day);
}

day_schedule();

希望这对您有所帮助。