JS实现手写 forEach算法示例

本文实例讲述了JS实现手写 forEach算法。分享给大家供大家参考，具体如下：

手写 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);
 }
};

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 关于JavaScript中forEach和each用法浅析

    本文主要给大家介绍了关于JavaScript中forEach和each的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: forEach是ES5中操作数组的一种方法,主要功能是遍历数组,例如: var arr = [1,2,3,4]; arr.forEach(alert); 等价于: var arr = [1, 2, 3, 4]; for (var k = 0, length = arr.length; k < length; k++) { alert(array[k]);

  • Javascript数组循环遍历之forEach详解

    1.js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2.forEach函数. Firefox 和Chrome 的Array 类型都有forEach的函数.使用如下: <!--Add by oscar999--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> &l

  • JavaScript forEach()遍历函数使用及介绍

    forEach()函数从头到尾把数组遍历一遍.有三个参数分别是:数组元素,元素的索引,数组本身(如果是一个参数就是数组元素,也就是数组的值. var data=[1,2,3,4,5,6]; var sum=0; data.forEach(function(v){//其中的v就是数组的值 123456 sum+=v;}) document.write(sum+"<br>");//打印出来是21 data.forEach(function(o,p,q){//分别对应:数组元素,

  • javascript forEach函数实现代码

    复制代码 代码如下: function forEach(object, block, context, fn) { if (object == null) return; if (!fn) { if (typeof object == "function" && object.call) { //遍历普通对象 fn = Function; } else if (typeof object.forEach == "function" &&

  • 详解JavaScript中的forEach()方法的使用

    JavaScript数组的 forEach()方法调用数组中的每个元素. 语法 array.forEach(callback[, thisObject]); 下面是参数的详细信息: callback : 函数测试数组的每个元素. thisObject : 对象作为该执行回调时使用. 返回值: 返回创建数组. 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需要添加下面的脚本代码的顶部: if (!Array.prototy

  • js中的for如何实现foreach中的遍历

    js中没有foreach这个关键字,但是可以用var v in array来实现遍历.但是需要注意的是, 拿到的是key而不是value.看例子: 复制代码 代码如下: <script type="text/javascript"> // 普通数组 var intArray = new Array(); intArray[0] = "第一个"; intArray[1] = "第二个"; for(var i = 0; i<intA

  • JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例

    本文实例讲述了JavaScript实现多叉树的递归遍历和非递归遍历算法操作.分享给大家供大家参考,具体如下: 演示之前的准备工作 演示项目的文件结构: index.html jsonData.js recurrenceTree.js noRecurrenceTree.js 解释一下各个文件: index.html 是用来演示的 HTML 文件. jsonData.js 里面存储着多叉树的JSON数据. recurrenceTree.js 递归算法遍历树. noRecurrenceTree.js

  • jsp简单自定义标签的forEach遍历及转义字符示例

    接着昨天的,如果<forEach>中的items类型是map或者Collection类型的,怎样使用增强for循环: 首先还是创建一个标签处理器类,定义两个属性,String var; Object items: 因为items要迭代各种集合,所以要使用Object; 然后重写setter方法: 声明一个成员变量,集合类型的, 和上面两个属性是不相同的,这个是用在类里的, 在items的setter方法中,判断items的类型 然后继承他的doTag方法: 复制代码 代码如下: public

  • JavaScript实现树的遍历算法示例【广度优先与深度优先】

    JavaScript实现树的遍历算法示例【广度优先与深度优先】

    本文实例讲述了JavaScript实现树的遍历算法.分享给大家供大家参考,具体如下: <script type="text/javascript"> var t = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]; //下面这段深度优先搜索方法出自Aimingoo的[JavaScript语言精髓与编程实践] var deepView = function(aTree,iNode) { (iNode in aTree)

  • jQuery each和js forEach用法比较

    本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js和jquery都有类似的方法,js用的是forEach而jquery用的是each,简单举例; var arr = new Array(["b", 2, "a", 4],["c",3,"d",6]); arr.forEach(function(item){ alert(item); //b, 2, a, 4

  • JavaScript树的深度优先遍历和广度优先遍历算法示例

    本文实例讲述了JavaScript树的深度优先遍历和广度优先遍历算法.分享给大家供大家参考,具体如下: 1.深度优先遍历的递归写法 function deepTraversal(node) { var nodes = []; if (node != null) { nodes.push(node); var children = node.children; for (var i = 0; i < children.length; i++) deepTraversal(children[i]);

  • javascript forEach通用循环遍历方法

    复制代码 代码如下: var forEach = (function(){ //数组与伪数组的遍历 var _Array_forEach = function (array, block, context) { if (array == null) return; //对String进行特殊处理 if(typeof array == 'string'){ array = array.split(''); } var i = 0,length = array.length; for (;i < l

随机推荐