forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
例如:
<body>
<p>点击按钮列出数组的每个元素。</p>
<button id="btn">点我</button>
<p id="demo"></p>
<script>
// 抓取元素
let btn = document.querySelector('#btn');
let demo = document.querySelector('#demo');
console.log(btn,demo);
// 数组
let arr = [100,200,300,500,900];
// 单击按钮
btn.onclick = function(){
// 遍历 (逐一操作)
arr.forEach(function(item){
demo.innerHTML += item+' ';
})
}
</script>
</body>
console输出预览效果
例如:
<body>
<!-- 如果属性名写的是class,那么在输出是就用 . 是id就用 # -->
<ul class="tab"></ul>
<script>
var data = [
{
'cata':"最热团购",
},
{
'cata':"商城活动",
},
{
'cata':"名品推荐",
},
{
'cata':"缤纷活动",
},
];
//需求: 把数组中的每一项内容放置到页面中的ul无序列表中的列表项li里
// 抓取元素
var oTabUl = document.querySelector('.tab');
console.log(oTabUl);
// 遍历
data.forEach(function(item,index){
console.log(item.cata);
// console.log(index);
// 通过js脚本,向无序列表ul中去渲染 数据项
oTabUl.innerHTML += `<li><a href="javascript:;">${item.cata}</a></li>`
})
</script>
</body>
console输出预览效果