关于JavaScript---forEach

给大家带来一个JavaScript的forEach方法分享

关于forEach
在JavaScript中我们除开使用for循环之外还会用到的另一个循环- - -forEach
forEach是啥?
虽然很想这么问,但是想了想实在是太蠢了。
那就直接介绍一下forEach吧
forEach可以说是for的强化版本,也可以说是简化版
forEach是不用考虑循环次数的,在这一点上他就可以很完美的适用于需要很复杂的操作才能计算出循环次数的情况,或者在需要操作DOM的节点情况下,forEach能提供很大的便利也能提升代码的效率。

首先来看一个简单的forEach

var arr = [1,"2",3];
arr.forEach(function(ele,index){
    console.log(ele + " " + index);
})

以上代码输出结果
在这里插入图片描述
一个简单的forEach就完成了
ele对应的就是数组中的某一项,而index则是索引值

下面介绍一下forEach的另外几个参数
我们先来看一个参数完整的forEach

var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1.forEach(function(ele,index,thisObj){
    
},arr2);

我们可以看到ele,index,thisObj都是属于一个回调函数的参数
这个回调函数呢,就会循环的操作数组中的每一项。
ele对应的就是当前的值
index对应的就是当前值的索引值
thisObj呢,对应的就是数组本身,也就是arr1他自己

我们还可以看到在forEach的回调函数后面还可以传递一个参数arr2
这个arr2所代表的含义是
传递 callback(回调函数) 的值一般用this值
这个解释或许使你有点懵,他的意思呢,就是在forEach的回调函数中的this指向改变为传递的参数(在上面代码中的含义是,原本 callback (回调函数) 中的 this 是指向 window 的,而我传递进去一个arr2,那么 callback (回调函数) 中的 this 指向由 window 变为 arr2 了)。

来看一段代码理解一下吧

var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1.forEach(function(ele,index,thisObj){
    console.log(this);
});
arr1.forEach(function(ele,index,thisObj){
    console.log(this);
},arr2);

看一下输出结果
在这里插入图片描述

你可以清楚的看到不传递arr2与传递arr2的区别
接下来给大家说几个坑
快拿出你们的小本本记下来

  1. forEach不能用beack,return停止。
    这里分享一个forEach停止的方法

通过try catch 实现

var arr = [1,2,3];
try{
    arr.forEach(function(num,index){
        if(num == 2){
            throw ""
        }
        console.log(num);
    })
}catch(e){
    console.log("forEach已停止");
}
  1. forEach是数组的方法,对象,类数组是不可以使用的
    下面提供一个关于我使用document.getElementByClassName获取到的类数组之后还想使用forEach的方法
var liList = document.getElementsByClassName("my-li");
Array.prototype.forEach.call(liList,function(ele,index){
});

好了,本次分享结束,如果对您有帮助那就很nice

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值