【Es6】forEach,for... in ,for... Of column, which allows you to quickly distinguish the usage and differences of various for statements through project cases (full version). There are detailed notes ins

Case study ： Array , Formatting objects ,{name:' Zhang San ',birthday:'2020-10-09'} Formatted as  {name:' Zhang San ',birthday:'2020-10-09',age:20} （ requirement ： Print a set of data into the page and judge that the age is less than 20 The object of is also printed on the page ）

The common part HTML Content ：

        <ul>   

 
        </ul>

        <hr style="border:5px solid red;">

        <div>

     

       </div>

The first one is ： utilize forEach To write the project ：

 // Create an array object
             let newarray = [
                {name:' Zhang San ',birthday:'2000-10-10'} ,
                {name:' Li Si ',birthday:'2010-10-10'} ,
                {name:' Wang Wu ',birthday:'2001-10-10'} ,
                {name:' Sun Qi ',birthday:'2000-10-10'} ,
             ]
             // Define a concatenation character , Easy to connect
             let str='';
             // Use array.map（ Processing event body is also called processing ） Deal with internal content
            let  mapnewarray = newarray.map((item)=>{
                // Get the current year  
                let newyear = new Date().getFullYear();
                // Get the year of creation , Get the value by intercepting and assign it to a variable
                let newbirthday = item.birthday.substr(0,4);
                // According to the above two times, after assigning a variable , Put the current time （ year ） Subtract the value of the known year created and assign a variable to the current age
                let times = newyear - newbirthday;
                // Returns two values   One is the value of each object in the array   The other is the current age value we obtained
                return {...item,times:times};
            })
            // console.log(mapnewarray)
            // Through the above return value , I have verified that it can be printed
            // obtain HTML Tag properties in the page
               let ul =document.querySelector('ul');
               // Use forEach Traverse the following
                mapnewarray.forEach(item => {
                // Using the connecting characters defined above, you will pass forEach Cyclic cohesion is assigned to print in the page
                ul.innerHTML=str+=`<li> full name :${item.name}, Date of birth :${item.birthday}, Age :${item.times}</li>`;     
                })
              // Array filter() // Screening
              // Through screening, it is judged that the age is less than 20 The object of
                let temp = mapnewarray.filter(item=>item.times<=20);
                // Define a concatenation character , Easy to connect
                let trs='';
                 // Use forEach Traverse the following
                temp.forEach(item=>{
                    // Using the connecting characters defined above, you will pass forEach Circular connection
                    trs=trs+`<li> full name :${item.name}, Date of birth :${item.birthday}, Age :${item.times}</li>`;
                }) 
                // Display the results in the page
                document.querySelector('div').innerHTML=trs;

  The second kind ： utilize for...of To write the project :

      // Because many of the following contents are the same as those above , Therefore, this content only explains the content that has not been explained
               let newarray = [
                  {name:' Zhang San ',birthday:'2000-10-10'} ,
                  {name:' Li Si ',birthday:'2010-10-10'} ,
                  {name:' Wang Wu ',birthday:'2001-10-10'} ,
                  {name:' Sun Qi ',birthday:'2000-10-10'} ,
               ]
               let str='';
              let  mapnewarray = newarray.map((item)=>{
                  let newyear = new Date().getFullYear();
                  let newbirthday = item.birthday.substr(0,4);
                  let times = newyear - newbirthday;
                  return {...item,times:times};
              })
              // console.log(mapnewarray);
              // Here use for ... of loop first item Is every object in the array of Next is the name of the recipient
              for(let item of mapnewarray){
                 str+=`<li> full name :${item.name}, Date of birth :${item.birthday}, Age :${item.times}</li>`;
              }
              document.querySelector('ul').innerHTML=str;
               let temp = mapnewarray.filter(item=>item.times<=20);
               let trs='';
               // Here use for ... of loop first item Is every object in the array of Next is the name of the recipient
               for(let item of temp){
                trs=trs+`<li> full name :${item.name}, Date of birth :${item.birthday}, Age :${item.times}</li>`
               }
               document.querySelector('div').innerHTML=trs;
               

   The third kind of ： utilize for...inf To write the project :

 // Because many of the following contents are the same as those above , Therefore, this content only explains the content that has not been explained
               let newarray = [
                   {name:' Zhang San ',birthday:'2000-10-10'} ,
                   {name:' Li Si ',birthday:'2010-10-10'} ,
                   {name:' Wang Wu ',birthday:'2001-10-10'} ,
                   {name:' Sun Qi ',birthday:'2000-10-10'} ,
                ]
                let str='';
               let  mapnewarray = newarray.map((item,index)=>{
                   let newyear = new Date().getFullYear();
                   let newbirthday = item.birthday.substr(0,4);
                   let times = newyear - newbirthday;
                   return {...item,times:times,index};
               })
               // Here use for ... in loop first item Is every object in the array of Next is the name of the recipient
              for(let index in mapnewarray){
                  str+=`<li> full name :${mapnewarray[index].name}, Date of birth :${mapnewarray[index].birthday}, Age :${mapnewarray[index].times}</li>`
              }
               document.querySelector('ul').innerHTML=str;
                let temp = mapnewarray.filter(item=>item.times<=20);
               let trs='';
               // Here use for ... in loop first item Is every object in the array of Next is the name of the recipient
               for(let index in temp){
                   trs=trs+`<li> full name :${temp[index].name}, Date of birth :${temp[index].birthday}, Age :${temp[index].times}</li>`
               }
               document.querySelector('div').innerHTML=trs;

Realization effect （ The effect is the same ）：