案例:一组人员信息,输出到页面上显示。
HTML框架内容:
<table border="1">
</table>
js实现内容:
let newarray = [
{realname:'张三',scroe:60},
{realname:'李四',scroe:70},
{realname:'王五',scroe:80},
{realname:'赵六',scroe:98},
{realname:'孙倩',scroe:57},
{realname:'孙林',scroe:30},
]
let str = '';
let jg;
let tbody = document.querySelector('table');
let tonewarray = newarray.map((item)=>{
if(item.scroe>=60){
jg='及格';
}else{
jg='不及格';
}
return {...item,jg};
})
tonewarray.forEach(item=>{
tbody.innerHTML =str +=`<tr><td>姓名:${item.realname}</td><td>成绩:${item.scroe}</td><td>${item.jg}</td> </tr>` ;
})
案例分析:
//案例分析:先创建一个数组对象,定义一个连接变量及存储学生成绩的信息(及格与不及格)内容。获取页面中的标签元素,
//通过使用加工array.map()将判断的内容放置内部并进行返回其值(这里也可以使用三元运算符:小伙伴可以尝试去编写,若有不明白的粉丝朋友可以
//私信博主,为您解答)。
//通过上面的判断返回两个值,一个是数组中的对象,另一个是通过判断所赋给的结果
//通过forEach()循环 使用之前定义的连接变量将表格中的相关属性进行插入
实现效果展示: