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

简介: 本文目录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);
        });
1
2
3
4
输出如下:
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) {
            }
        };
1
2
3
4
5
6
遍历方法的用途是遍历数组的每个元素,然后将每个元素和元素的下标作为参数传给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那样往往还需要借助于反射实现函数意义的传递。
相关文章
|
7月前
|
Python
使用array()函数创建数组
使用array()函数创建数组。
135 3
|
7月前
|
设计模式
ES6中新增Array.from()函数的用法详解
ES6中新增Array.from()函数的用法详解
75 1
|
4月前
|
JavaScript 前端开发 PHP
|
4月前
|
存储 关系型数据库 MySQL
|
7月前
|
SQL IDE Java
MyBatis【问题 01】mapper传入array\collection\list类型的参数时报BindingException:Parameter ‘xx‘ not found问题复现及解决
MyBatis【问题 01】mapper传入array\collection\list类型的参数时报BindingException:Parameter ‘xx‘ not found问题复现及解决
208 0
|
数据可视化 数据处理
解决 FAILED: UDFArgumentException explode() takes an array or a map as a parameter 并理解炸裂函数和侧视图
解决 FAILED: UDFArgumentException explode() takes an array or a map as a parameter 并理解炸裂函数和侧视图
92 0
|
JavaScript API
【Vue2.0源码学习】变化侦测篇-Array的变化侦测
【Vue2.0源码学习】变化侦测篇-Array的变化侦测
52 0
|
C++ 容器
STL容器篇之array与vector(学习篇)(下)
STL容器篇之array与vector(学习篇)(下)
|
C语言 C++ 容器
STL容器篇之array与vector(学习篇)(上)
STL容器篇之array与vector(学习篇)
|
PHP
php函数基础学习:array_chunk() 函数把一个数组分割为新的数组块
php函数基础学习:array_chunk() 函数把一个数组分割为新的数组块
60 0