【Es6】forEach,for...in ,for...of专栏，让你通过项目案例快速分辨各种for语句的使用方式及区别（完整版）内部有详细注释

案例：数组，格式化对象，{name:'张三',birthday:'2020-10-09'} 格式化为 {name:'张三',birthday:'2020-10-09',age:20} （要求：将一组数据打印至页面中并且判断年龄小于20的对象也打印到页面中）

共同部分HTML内容：

        <ul>   

 
        </ul>

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

        <div>

     

       </div>

第一种：利用forEach去编写项目：

 //创建一个数组对象
             let newarray = [
                {name:'张三',birthday:'2000-10-10'} ,
                {name:'李四',birthday:'2010-10-10'} ,
                {name:'王五',birthday:'2001-10-10'} ,
                {name:'孙琦',birthday:'2000-10-10'} ,
             ]
             //定义一个连接字符，便于衔接
             let str='';
             //使用array.map（处理事件体又称加工）处理内部内容
            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)
            //通过上面的返回值，我面验证了是可以打印出来得
            //获取HTML页面中的标签属性
               let ul =document.querySelector('ul');
               //使用forEach遍历下面的内容
                mapnewarray.forEach(item => {
                //利用上面定义的连接字符将通过forEach循环衔接赋给页面中打印
                ul.innerHTML=str+=`<li>姓名:${item.name},出生年月日:${item.birthday},年龄:${item.times}</li>`;     
                })
              // Array filter() //筛选
              //通过筛选判断出年龄小于20的对象
                let temp = mapnewarray.filter(item=>item.times<=20);
                //定义一个连接字符，便于衔接
                let trs='';
                 //使用forEach遍历下面的内容
                temp.forEach(item=>{
                    //利用上面定义的连接字符将通过forEach循环衔接
                    trs=trs+`<li>姓名:${item.name},出生年月日:${item.birthday},年龄:${item.times}</li>`;
                }) 
                //在页面中显示其结果
                document.querySelector('div').innerHTML=trs;

 第二种：利用for...of去编写项目:

      //由于下面很多内容与上面的雷同，所以本内容只解释未讲解的内容
               let newarray = [
                  {name:'张三',birthday:'2000-10-10'} ,
                  {name:'李四',birthday:'2010-10-10'} ,
                  {name:'王五',birthday:'2001-10-10'} ,
                  {name:'孙琦',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);
              //这里利用for ... of 循环 第一个item是数组中的每个对象 of 后面的是接收者的名称
              for(let item of mapnewarray){
                 str+=`<li>姓名:${item.name},出生年月日:${item.birthday},年龄:${item.times}</li>`;
              }
              document.querySelector('ul').innerHTML=str;
               let temp = mapnewarray.filter(item=>item.times<=20);
               let trs='';
               //这里利用for ... of 循环 第一个item是数组中的每个对象 of 后面的是接收者的名称
               for(let item of temp){
                trs=trs+`<li>姓名:${item.name},出生年月日:${item.birthday},年龄:${item.times}</li>`
               }
               document.querySelector('div').innerHTML=trs;
               

  第三种：利用for...inf去编写项目:

 //由于下面很多内容与上面的雷同，所以本内容只解释未讲解的内容
               let newarray = [
                   {name:'张三',birthday:'2000-10-10'} ,
                   {name:'李四',birthday:'2010-10-10'} ,
                   {name:'王五',birthday:'2001-10-10'} ,
                   {name:'孙琦',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};
               })
               //这里利用for ... in循环 第一个item是数组中的每个对象 of 后面的是接收者的名称
              for(let index in mapnewarray){
                  str+=`<li>姓名:${mapnewarray[index].name},出生年月日:${mapnewarray[index].birthday},年龄:${mapnewarray[index].times}</li>`
              }
               document.querySelector('ul').innerHTML=str;
                let temp = mapnewarray.filter(item=>item.times<=20);
               let trs='';
               //这里利用for ... in循环 第一个item是数组中的每个对象 of 后面的是接收者的名称
               for(let index in temp){
                   trs=trs+`<li>姓名:${temp[index].name},出生年月日:${temp[index].birthday},年龄:${temp[index].times}</li>`
               }
               document.querySelector('div').innerHTML=trs;

实现效果（实现效果相同）：