原⽣JS将数组的数据循环遍历到HTML中
由于我在学校是学安卓的然后实习期学前端⼜是直接上框架(不得不说vue的v-for是真的⾹)，所以原⽣JS的⼀些基本操作⽤着真难受下⾯是原⽣JS 将数组的数据循环遍历到HTML中的列⼦，是的，没有⽤框架的HTML⾥的循环是⽤JS将⼀串字符串标签通过DOM渲染到HTML中的。
▼传统易懂的for写法和字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>将数组的数据循环遍历到HTML中</title>
</head>
<body>
<div id="LoveID"></div>
</body>
<script>
// ⾃定义字符串,⽤于拼接标签
var loveStr ="";
// ⾃定义数组
var loveArr =['喜爱⼀个⼈需要理由吗？','需要吗？','不需要吗？'];
/****普通for循环****/
for(let i =0; i < loveArr.length; i++){
loveStr +='<div>'+ loveArr[i]+'</div>';
};
console.log(loveStr)
// 拼接完字符串数组后⽤innerHTML把它渲染到页⾯中
</script>
</html>
看下控制台的打印：
看下打印后的HTML：
可以看到⽤普通for循环和普通的字符串拼接是可实现遍历的，但是在实际项⽬开发中这是很不佳的，很耗费时间。所以我们要学习新的ECMAScript语法，其中循环我⽤的是ECMA5的forEach()和map()，处理字符串⽤的是ECMA6的模板字符串，如果这两样有不懂的⾃⼰去补习⼀下，箭头函数我相信⼤家都会，我这⾥不多说了。
▼⼀层循环⽤forEach()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>将数组的数据循环遍历到HTML中</title>
</head>
<body>
<div id="LoveID"></div>
</body>
<script>
// ⾃定义字符串,⽤于拼接标签
var loveStr ="";
// ⾃定义数组
var loveArr =['喜爱⼀个⼈需要理由吗？','需要吗？','不需要吗？'];
/****forEach循环****/
loveArr.forEach(e =>{
loveStr +=`<div>${e}</div>`;
})
console.log(loveStr)
// 拼接完字符串数组后⽤innerHTML把它渲染到页⾯中
</script>
</html>
这的输出和上⾯⼀样
▼多层嵌套循环⽤forEach()+map()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>将数组的数据循环遍历到HTML中</title>
</head>
<body>
<div id="LoveID">
<!-- <div class="row">
<div class="title">场景⼀</div>
<div class="text">
<span>1.喜爱⼀个⼈需要理由吗？</span>
<span>2.需要吗？</span>
<span>3.不需要吗？</span>
</div>
</div> -->
</div>
</body>
<script>
// ⾃定义字符串,⽤于拼接标签
var loveStr ="";
//⾃定义数组
var loveArr =[
{ title:'场景⼀', textArr:['喜爱⼀个⼈需要理由吗？','需要吗？','不需要吗？']}, { title:'场景⼆', textArr:['不上班⾏不⾏？','不上班你养你啊？','我养你啊？']}, ];
/**
* forEach+map循环
* forEach和map的第⼀个参数是当前元素，第⼆个是数组下标
* .join('')的作⽤是去掉map循环后返回多余的逗号
*/
loveArr.forEach(e =>{
loveStr +=`<div class="row">
<div class="title">${e.title}</div>
<div class="text">
${e.textArr.map((element, index)=>{
return`<span>${index +1}.${element}</span>`
}).join('')}
</div>
</div>`
})
console.log(loveStr)
/
/ 拼接完字符串数组后⽤innerHTML把它渲染到页⾯中
</script>
</html>
原生js和js的区别看下控制台的打印：
看下打印后的HTML：
以上便是我经过开发项⽬后，觉得⽐较舒服和简洁的⽤于处理遍历标签的⼀种⽅式。当然，如果你要⽤in、f也是可以的，或者有更好的选择也可以分享出来，哈哈( ´▽｀) ♪

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。