首页> JAVASCRIPT教程

js数组forEach实例用法详解

withpy 2021-10-29

简介在本篇文章里小编给大家整理了一篇关于js数组forEach实例用法详解内容,有需要的朋友们可以跟着学习参考下。

1、forEach()类似于map(),它还将每个元素依次作用于传入函数,但不会返回新的数组。

2、forEach()常用于遍历数组,用于调用数组的每一个元素,并将其传递给回调函数。传输函数不需要返回值。

实例

var arr=[7,4,6,51,1];
try{arr.forEach((item,index)=>{
      if (item<5) {
       throw new Error("myerr")//创建一个新的error message为myerr
      }
      console.log(item)//只打印7 说明跳出了循环
     })}catch(e){
            console.log(e.message);
      if (e.message!=="myerr") {//如果不是咱们定义的错误扔掉就好啦
       throw e
      }
     }

知识点扩展:

手写 forEach

forEach()方法对数组的每个元素执行一次提供的函数

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

callback

currentValue 数组中正在处理的当前元素。

index 可选 数组中正在处理的当前元素的索引。

array 可选 forEach() 方法正在操作的数组。

thisArg 可选 可选参数。当执行回调函数 callback 时,用作 this 的值。

没有返回值

如果提供了一个 thisArg 参数给 forEach 函数,则参数将会作为回调函数中的 this 值。否则 this 值为 undefined。回调函数中 this 的绑定是根据函数被调用时通用的 this 绑定规则来决定的。

let arr = [1, 2, 3, 4];
arr.forEach((...item) => console.log(item));
// [1, 0, Array(4)] 当前值
function Counter() {
 this.sum = 0;
 this.count = 0;
}
// 因为 thisArg 参数(this)传给了 forEach(),每次调用时,它都被传给 callback 函数,作为它的 this 值。
Counter.prototype.add = function(array) {
 array.forEach(function(entry) {
  this.sum += entry;
  ++this.count;
 }, this);
 // ^---- Note
};
const obj = new Counter();
obj.add([2, 5, 9]);
obj.count;
// 3 === (1 + 1 + 1)
obj.sum;
// 16 === (2 + 5 + 9)

每个数组都有这个方法

回调参数为:每一项、索引、原数组

Array.prototype.forEach = function(fn, thisArg) {
 var _this;
 if (typeof fn !== "function") {
  throw "参数必须为函数";
 }
 if (arguments.length > 1) {
  _this = thisArg;
 }
 if (!Array.isArray(arr)) {
  throw "只能对数组使用forEach方法";
 }
 for (let index = 0; index < arr.length; index++) {
  fn.call(_this, arr[index], index, arr);
 }
};

到此这篇关于js数组forEach实例用法详解的文章就介绍到这了,更多相关js数组forEach方法的使用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

相关文章

  • 详解vue3的沙箱机制

    这篇文章主要介绍了vue3的沙箱机制的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下

  • 原生js实现简单贪吃蛇小游戏

    这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  • Vue data的数据响应式到底是如何实现的

    这篇文章主要介绍了Vue data的数据响应式到底是如何实现的,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  • Python3 使用selenium插件爬取苏宁商家联系电话

    这篇文章主要介绍了Python3 selenium爬取苏宁商家联系电话,此处使用了selenium插件 使用的是火狐浏览器 信息存储到csv表格里面,需要的朋友可以参考下

  • Spring Boot项目中定制拦截器的方法详解

    这篇文章主要介绍了Spring Boot项目中定制拦截器的方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

  • 关于Yii中模型场景的一些简单介绍

    这篇文章主要给大家介绍了关于Yii中模型场景的一些简单介绍,文中通过示例代码介绍的非常详细,对大家学习或者使用Yii具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧