栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

从Array.forEach学习将函数作为参数

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

从Array.forEach学习将函数作为参数

1. 背景

JS语言中,Array数组类型有一个遍历方法forEach,经常使用却经常迷惑。

  		var array = [1, 2, 3, 4, 5];
 array.forEach(function (item, index) {
     console.log("index:%d,item:%d", index, item);
 });

输出如下:

index:0,item:1
index:1,item:2
index:2,item:3
index:3,item:4
index:4,item:5

我对这种用法非常熟悉,但是总感觉这种语法很别扭,所以今天要钻研一番。

2. 理论基础

其实这种写法的理论基础非常简单,即:JS函数也是一种数据类型,既然像整数这种数据类型可以作为函数参数,那函数类型也可以当参数了

当然这里面需要注意的是,函数跟数组、对象一样,属于引用类型,而不是值类型。

3. 入门示例

好的,我们先来看下一个简单的将函数作为参数的例子:

 // 对数字使用函数
 function useFuncOnNum(num, func) {
     var result = func(num);
     return result;
 }
 // 加1
 function plusOne(num) {
     num++;
     return num;
 }
 // 测试
 var re = useFuncOnNum(2, plusOne);
 console.log(re);

在上面的例子中,func参数即为传入的函数plusOne,然后调用func(num)其实就是调用plusOne(num),所以最终返回值为2++,即为3。

4. forEach实现解析

首先我们模拟Array类对象,定义一个myArray对象,其中必然有个区域存储了一组数据,然后还有一个forEach遍历方法,且遍历方法的参数是一个函数(method)。

	    var myArray = {
     data: [100, 101, 102, 103, 104],
     forEach: function (method) {
 
     }
 };

遍历方法的用途是遍历数组的每个元素,然后将每个元素和元素的下标作为参数传给method,所以添加方法体代码:

		var myArray = {
     data: [100, 101, 102, 103, 104],
     forEach: function (method) {
  var i = 0;
  for (i = 0; i < this.data.length; i++) {
      method(this.data[i], i);
  }
     }
 };

至此思路已经很清晰了,当调用forEach时,作为forEach参数的函数应有2个参数,而且每个数组的元素和下标会触发该函数一次。

所以我们定义一个函数,然后作为参数传递给forEach:

		function printItem(item, index) {
     console.log("index:%d,item:%d", index, item);
 }

 myArray.forEach(printItem);

当然也可以直接在调用时定义一个函数:

		myArray.forEach(function (item, index) {
     console.log("index:%d,item:%d", index, item);
 });

如此一来,我们完全自己写的一个方法,也实现了跟forEach一样的效果。

5. 小结

JS作为一门动态语言,确实是处处洒脱,不像Java那样往往还需要借助于反射实现函数意义的传递。

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号