Javascript数组的 forEach 方法详细介绍
前言
在JavaScript 中数组的遍历 有很多中方法， 其中有一种 使用 foreach 来遍历数组。
语法：
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
参数：
callback
为数组中每个元素执行的函数，该函数接收一至三个参数：currentValue数组中正在处理的当前元素。index 可选数组中正在处理的当前元素的索引。array 可选forEach() 方法正在操作的数组。
thisArg可选
可选参数。当执行回调函数 callback 时，用作 this 的值。
在forEach 中传入一个 callback 函数， 函数最多可以接收 三个值， 分别为当前正在遍历的值， 当前值对应的索引，以及当前数组本身
小试
现在有一个场景，我和我的室友们，现在在一个数组里面。 按照排行分别为: 老大，老二，老三, … ,老六, 小七.
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank', 'Guan laowu', 'Yang laoliu', 'Li xiaoqi'];
// 在 forEach 中 传入 一个function ，接收两个参数
arr.forEach(function(name,index){
console.log(name, ' - ',index);
})结果如下： 第一个参数就是 当前遍历的元素，第二参数为当前元素的索引
注意： forEach() 为每个数组元素执行一次 callback 函数 ，即每个元素都会执行一次callback 函数
来看看回调函数的第三个参数 ，表示 就是这个数组本身。
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan'];
arr.forEach(function(name,index,person){
console.log(name, ' - ',index);
console.log(person);
})
还有一个参数 thisArg 这个参数
当回调函数执行的时候， 回调函数中 使用this 就是这个值。来看一个例子
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan'];
// thisArg 此时传入 {'name':'frank'},当回调函数执行的时候，this 就是这个值。
arr.forEach(function(name,index){
console.log(this);
},{'name':'frank'})
如果省略了 thisArg 参数，或者其值为 null 或 undefined，this 则指向全局对象。
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan'];
// 没有传thisArg 参数
arr.forEach(function(name,index){
// 此时是window
console.log(this);
})
使用forEach注意事项
除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。
forEach 不支持 break这种语句退出循环。
如果你想在遍历数组的过程中想要 提前终止循环，就不要使用 forEach 遍历， 可以使用for 循环来遍历数组.
例如：我只想遍历到i==0 的时候，提前终止循环
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan'];
for (let i = 0; i < arr.length; i++) {
if (i === 1) {
break;
}
console.log(arr[i],'-', i);
}
// Liu laoda - 0到此这篇关于Javascript数组的 forEach 方法详细介绍的文章就介绍到这了,更多相关JS forEach内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
利用js实现选项卡的特别效果的实例，需要的朋友可以参考一下2013-03-03
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
今天主要给大家分享一段js和css代码组合实现鼠标点击按钮图片切换，图片自动切换，点击左右按钮图片切换三种效果，代码非常简单，需要的朋友一起来学习吧2015-09-09
这篇文章主要给大家介绍了关于JavaScript打开本地文件夹的4种方法,JavaScript在前端开发中是一种使用非常广泛的编程语言,常用于实现网页中的交互和动态效果,需要的朋友可以参考下2023-07-07
类似于JQuery的这样js库已经实现了很好的数据绑定机制的封装效果，但只知其然，不知其所以然还有会有种蒙在鼓里的感觉，亲自去分析一下具体的实现，会有一种豁然开朗的感觉2014-06-06
本文介绍了五种在JavaScript中获取表单数据的方法：使用FormData对象、手动提取表单数据、使用querySelector获取单个字段数据、序列化为查询字符串和配合AJAX提交表单数据,每种方法都有示例代码,帮助开发者更好地理解和应用2025-02-02
这篇文章主要介绍了JavaScript实现图片懒加载的方法,结合实例形式分析了javascript图片懒加载的原理、操作步骤与相关实现技巧,需要的朋友可以参考下2018-07-07
这篇文章主要给大家介绍了关于移动端H5页面返回并刷新页面（BFcache）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
then()方法用于指定当前实例状态发生改变时的回调函数。它返回一个新的Promise实例。下面这篇文章主要给大家介绍了关于JS中Promise函数then的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧2018-07-07
本文主要介绍了详解uniapp页面跳转URL传参大坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了JavaScript 计算笛卡尔积实例详解的相关资料,这里附有实例代码，需要的朋友可以参考下2016-12-12
最新评论