在JavaScript中嵌套循環條件

Question

我正在創建一個項目，我想通過我的day_schedule()創建一個名爲full_day[]的數組，其長度與數組time_plan[]完全相等。

這裏是我的代碼：

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個元素）中的每個元素，並且對於這些元素中的每一個，將time_plan（7個元素）中的每個元素的對象添加到full_day。 那麼你得到的是：

1. 首先element在day你day添加7個對象full_day（7元）
2. 塞康element你一個7個對象添加到full_day（14元）
3. 三element在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();

希望這有助於。

Answer 2

創建另一個函數來解析對象並解析它。

function parseObj(o){ 
 
    Str = "{<br />"; 
 
    var i=0; 
 
    while(i<Object.keys(o).length-1){ 
 
    Str += "&ensp;&ensp;"+Object.keys(o)[i]+" : "+o[Object.keys(o)[i]]+",<br />"; 
 
    i++; 
 
    } 
 
    Str += "&ensp;&ensp;"+Object.keys(o)[i]+" : "+o[Object.keys(o)[i]]+"<br />}"; 
 
    return Str; 
 
} 
 

 
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" 
 
    }]; 
 
    empty={" 
 
    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 == ' + parseObj(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();

Answer 3

首先，不要使用document.write。這隻適用於頁面的第一次渲染，是一種阻止操作，在頁面渲染後意外使用將會擦除頁面。考慮使用DOM操作。 document.createElement和node.appendChild將成爲你的朋友。如果可能的話，避免嵌套循環，這是一個壞習慣。儘可能使用相鄰的環路。

如果你最終的目標是找到了在你的time_plan發現day對象，那麼你可以做的是轉換成day使用array.reduce隨着時間的關鍵對象。這是唯一使您的day項目具有唯一性，以及唯一可以從time_plan識別它的數據。然後使用array.map將time_plan轉換爲一組主題。

這只是簡單的數組/對象轉換，沒什麼奇特的。

const 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"}]; 
 

 
const 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"}]; 
 

 
// Convert day into time-day element pairs 
 
// { "08:00-09:00": { "subject_name": "..." }, ... } 
 
const dayMap = day.reduce((c, v) => Object.assign(c, {[`${v.lesson_start}-${v.lesson_end}`] : v }), {}); 
 

 
// Convert time_plan to its corresponding day element using time 
 
// as key. 
 
const full_day = time_plan.map(v => dayMap[`${v.lesson_start}-${v.lesson_end}`]).filter(v => !!v); 
 

 
console.log(full_day);

有一個array.filter在full_day年底將不具有相應的day項目條目。