由于我在学校是学安卓的然后实习期学前端又是直接上框架(不得不说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把它渲染到页面中
document.getElementById("LoveID").innerHTML = loveStr;
</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把它渲染到页面中
document.getElementById("LoveID").innerHTML = loveStr;
</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把它渲染到页面中
document.getElementById("LoveID").innerHTML = loveStr;
</script>
</html>
看下控制台的打印：
看下打印后的HTML：
以上便是我经过开发项目后，觉得比较舒服和简洁的用于处理遍历标签的一种方式。当然，如果你要用for...in、for...of也是可以的，或者有更好的选择也可以分享出来，哈哈(ﾉ´▽｀)ﾉ♪
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
