JS遍历数组的方法

1.forEach()遍历数组 : 没有返回值!

<script>
        // 1.forEach()遍历数组
        let arr = [5,1,3,2,4,6,8,7];
        arr.forEach(function(item,index){
            console.log(item);//打印输出的是每一个元素对象
            console.log(index);//打印输出的是每一个元素对象的索引值
        });
</script>

2.map()遍历数组 : 返回一个新数组,数组由参数里的返回值组成.必须使用return!

<script>
        // 2.map()遍历数组 
        let arr = [5,1,3,2,4,6,8,7];
        let arrs = arr.map(function(item,index){
            // return item; //获取遍历元素对象
            // return index; //获取遍历元素对象的索引值
            return {key:item,value:index};
            //参数为一个函数,函数的形参1代表数组元素对象,形参2代表元素对象的索引值
        })
        console.log(arrs);//获取的结果为每对数组
</script>

3.indexOf()遍历数组 :返回元素在数组中第一次出现的索引值 

<script>
        // 3.indexOf()遍历数组
        let arr = [5,1,3,2,4,6,8,7];
        //里面接收2个参数.参数1是要查找的元素,参数2是开始查找的下标
        console.log(arr.indexOf(2,1));
        //输出结果 3
</script>

4.filter遍历数组 : 返回一个新数组:新数组由参数里条件为true的元素组成

<script>
        // 4.filter遍历数组 
        let arr = [5,1,3,2,4,6,8,7];
        let arrs = arr.filter(function(item,index){
            
            return item > 3;//遍历出大于3的元素对象
        })
        console.log(arrs);
</script>

5.some() 遍历数组  : 返回参数函数里符合条件的元素,只要检测到有一个元素符合条件就return

<script>
        // 5.some() 遍历数组
        let arr= [5,1,3,2,4,5,6];
        let arrs = arr.some(function(item,index){
            //参数为一个函数,函数的形参1代表数组元素对象,形参2代表元素对象的索引值
           return item>5;//遍历出大于5的元素对象即返回true
        })
        console.log(arrs);
</script>

6.every() 遍历数组 :判断数组元素是否全部符合函数参数里的条件,全部满足返回true,否则false

<script>
        // 6.every() 遍历数组 
        let arr= [5,9,3,2,4,5,6];
        let arrs = arr.every(function(item,index){
            //参数为一个函数,函数的形参1代表数组元素对象,形参2代表元素对象的索引值
            // return item>1;//true
            return index>3;//false
        })
        console.log(arrs);
</script>

7.reduce() 遍历数组 : 分为两种情况 ↓

 <script>
        // 7.reduce() 遍历数组
            // 情况1.只有一个函数作为参数1时,函数的形参1代表数组的第一个元素,形参2代表剩余所有元素
                let arr= [5,1,3,2,4,5,6];
                let arrs = arr.reduce(function(firstitem,item){
                    return firstitem += item;
                })
                console.log(arrs);//输出结果为 26
            // 情况2.参数1是一个函数,参数2代表函数的形参1的值,此时函数的形参2就代表数组所有元素
                let arr= [5,1,3,2,4,5,6];
                let arrs = arr.reduce(function(firstitem,item){
                    console.log(item);
                },0);
                console.log(arrs);//输出结果为 5 1 3 2 4 5 6 undefined
</script>

8.for of 遍历数组/字符串

<script>
        // 8.for of 遍历数组/字符串
            // 1.遍历数组
            let arr = [5,1,3,2,4,5,6];
            for(const item of arr){
                console.log(item);//输出值 5 1 3 2 4 5 6 
            }

            // 2.遍历字符串
            let str ="1,5,4,6,7,9,3";
            // 先将字符串转数组
            let stra = str.split(",")
            for (const item of stra) {
                console.log(item);//输出值 1 5 4 6 7 9 3
            }
</script>

9.for in遍历数组/字符串/对象 

<script>
        // 9.for in遍历数组/字符串/对象
            // 1.遍历数组
            let arr1= [5,1,3,2,4,5,6];
            for(let item in arr1){
                console.log(arr1[item]);//输出值 5 1 3 2 4 5 6 
            }//for in 能遍历对象

            // 2.遍历字符串
            let  str = "1,5,4,6,7,9,3";
            // 先将字符串转数组
            let stra = str.split(",");
            for(let item in stra){
                console.log(stra[item]);//输出值 1 5 4 6 7 9 3
            }

            // 3.遍历对象
            let obj = {
                name:"张三",
                age:18,
                occupation:"金牌律师"
            }
            for(let item in obj){
                console.log(obj[item]);//输出结果 张三 18 金牌律师
            }
</script>

综述:相信看到这里,大家应该了解并学会数组应该如何进行遍历了,前端道路漫漫而远兮。

祝大家都有所突破,达到自己心目中的成就!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值