Case study ： A set of personnel information , Output to the page to display .

HTML Framework content ：

      <table border="1">
          
        </table>

js Implementation content ：

let newarray = [
                {realname:' Zhang San ',scroe:60},
                {realname:' Li Si ',scroe:70},
                {realname:' Wang Wu ',scroe:80},
                {realname:' Zhao Liu ',scroe:98},
                {realname:' Sun Qian ',scroe:57},
                {realname:' Sun Lin ',scroe:30},
            ]
            let str = '';
            let jg;
            let tbody = document.querySelector('table');
                
            let tonewarray = newarray.map((item)=>{
                if(item.scroe>=60){
                    jg=' pass ';
                }else{
                    jg=' fail, ';    
                }
                return {...item,jg};
            })        
        
            tonewarray.forEach(item=>{
            tbody.innerHTML    =str +=`<tr><td> full name :${item.realname}</td><td> achievement :${item.scroe}</td><td>${item.jg}</td> </tr>`    ;    
            })

case analysis ： 

    // case analysis ： First create an array object , Define a connection variable and store information about students' grades （ Pass and fail ） Content . Get the tag elements in the page ,
            // By using machining array.map() Put the judged content inside and return its value ( Ternary operators can also be used here : Friends can try to write , If there are fans who don't understand, you can
            // Private Blogger , Answer for you ).
            // Through the above judgment, two values are returned , One is the object in the array , The other is the result given by judgment  
            // adopt forEach() loop Use the previously defined connection variable to insert the relevant attributes in the table

  Show the effect ：