由于我在学校是学安卓的然后实习期学前端又是直接上框架(不得不说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
也是可以的,或者有更好的选择也可以分享出来,哈哈(ノ´▽`)ノ♪