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