循环结构（for each()语句）

正在修炼web的小芮

于 2022-08-11 16:24:39 发布

阅读量148

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/m0_71814235/article/details/126287878

版权

js 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

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+'&emsp;';
        })
    }

    </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输出预览效果