美文网首页前端基础学习
数组之forEach()循环操作

数组之forEach()循环操作

作者: 小雪洁 | 来源:发表于2020-03-16 14:00 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>forEach循环操作</title>
        </head>
        <body>
            <ul>
                <li>hxj</li>
                <li>ydc</li>
            </ul>
        </body>
        <script>
            let families=[
                {name:"haoxuejie",age:30},
                {name:"yangdingchuan",age:28},
                {name:"haoweixv",age:34}
            ];
            //arr.forEach(function(item,index,arr){});
            //item是当前元素,必须参数;index是当前元素索引,arr即数组
            families.forEach(function(item){
                //console.log(item); 
            });
            families.forEach(function(item,index,arr){
                //console.log(index);
                //console.table(arr);
            });
            //使用forEach()对引用类型元素进行处理,可以改变原数组
            families.forEach(function(item,index){
                item.name=item.name.substr(3);
            });
            console.log(families);
            //console.table(families);
            //使用forEach()对基本类型元素处理,无法改变原数组
            let a=[1,2,3,4,5];
            let b =a.forEach(function(item,index){
                item++;
            });
            console.log(a);// [1, 2, 3, 4, 5]
            //使用forEach()可以直接操作dom节点,不用再通过点语法等将其转换成数组
            let lis=document.querySelectorAll("li");
            lis.forEach(function(item){
                //console.log(item);
                item.addEventListener("click",function(){
                    item.style.background="red";
                })
            });
        </script>
    </html>
    
    

    相关文章

      网友评论

        本文标题:数组之forEach()循环操作

        本文链接:https://www.haomeiwen.com/subject/musgehtx.html