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

偏执的太偏执、 2022-11-05 06:23 102阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 背景
 *  2. 理论基础
 *  3. 入门示例
 *  4. forEach实现解析
 *  5. 小结

# 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，所以添加方法体代码：

至此思路已经很清晰了，当调用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那样往往还需要借助于反射实现函数意义的传递。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926