JavaScriptを条件に入れ子にしたループ

Question

私はday_schedule()を通過した後に配列time_plan[]と正確に等しい長さになるようにfull_day[]という名前の配列を作成したいプロジェクトに取り組んでいます。私は

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

の結果を期待していますが、私はそれを行う方法を見つけ出すカント

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();

：

は、ここに私のコードです。

Answer 1

full_dayのサイズをtime_planと一致させたい場合は、すべての処理が間違っています。 コードで何をしているのかは、各要素をday（3要素）に反復し、それぞれの要素に対して、（7要素）の各要素のオブジェクトをfull_dayに追加します。 は、だから何あなたが得ることである：dayで

1. まずelementはあなたが
2. サードelementfull_day（14要素）に、別の7つのオブジェクトを追加dayにfull_day（7要素）に
3. Secon elementを7つのオブジェクトを追加しますdayにfull_day（21個の要素）に7個のオブジェクトを追加します。

あなたが使用されるロジックを保つために、私はあなたがこのように周り、あなたのループ、他の方法を回すことをお勧めしたい：

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();

ご覧のように、これは、所望の出力を提供します。 今、私たちもそれをきれいにし、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();

・ホープ、このことができますようにいくつかの有用なJavaScriptのArray機能を使用するために、コードを少し修正することができます。

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の被験者を見つけることであれば、どのようなあなたができることはarray.reduceを使用して、鍵など、時間とともにオブジェクトにdayを変換です。 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は、対応するdayアイテムを持っていないエントリを削除するfull_dayの最後にあります。