深入forEach原理-并手动实现一个forEach函数

以你之姓@ 2023-09-28 08:34 14阅读 0赞

#### 实现一个自己的forEach函数 ####

##### forEach简单了解 #####

*  forEach: 可以帮助我们遍历数组
 *  forEach()要求传入一个函数fn作为参数, 内部会对传入的函数fn进行回调, 回调fn时会传入3个参数
 *  回调fn传入的三个参数分别是: 数组的元素, 数组元素的索引, 数组本身
 *      //forEach的使用
        var names = ["abc", "bca", "cab", "aaa"]
        names.forEach(function (item, index, names) {
              
        	console.log(item, index, names);
        });
 *

##### 手动实现自己的myForEach高阶函数 #####

###### 1.版本一: 把大致结构搭建出来, 封装一个雏形 ######

*      //定义一个数组用来测试
        var names = ["abc", "bca", "cab", "aaa"]
        //封装一个自己的函数maForEach 用来遍历数组
        function myForEach(fn) {
              
          //循环遍历数组
          for (var i = 0; i < names.length; i++) {
              
            //回调传入进来的函数fn, 并将数组的元素, 数组元素的索引, 数组本身作为三个参数传入
            fn(names[i], i, names)
          }
        }
        //调用myForEach函数
        myForEach(function(item, index, names) {
              
          //接收fn传出的三个参数 并打印
          console.log(item, index, names)
        })
 *  **版本一缺陷: myForEach大致雏形已经有了, 目前最大的问题是fn的第三的参数返回数组本身, 这个是写死的, 不具备通用性**

###### 2.版本二: 解决版本一缺陷, 让fn回调的数组不在固定 ######

*      var names = ["abc", "cba", "aaa", "ccc"];
        //要求不仅传入一个函数, 还要传入一个数组
        function myForEach(fn, arr) {
              
          for (var i = 0; i < arr.length; i++) {
              
            fn(arr[i], i, arr);
          }
        }
        myForEach(function (item, index, names) {
              
          console.log(item, index, names);
        }, names);
 *  **这样虽然解决了版本一的缺陷, 但是需要多传入一个数组, 会比较麻烦**

###### 3.版本三: 解决版本一缺陷的另一种思路 ######

*      var names = ["abc", "cba", "aaa", "ccc"];
        //向names数组对象中添加一个myForEach方法
        names.myForEach = function(fn) {
              
          for (var i = 0; i < this.length; i++) {
              
            //当names调用函数时this会指向name, 因此可以返回this(也就是数组本身)
            fn(this[i], i, this);
          }
        }
        names.myForEach(function (item, index, names) {
              
          console.log(item, index, names);
        });
 *  **版本三通过向数组添加一个names方法, 让this指向names解决了版本一缺陷**
 *  **目前就剩下最后一个问题没有解决, 那就是这个函数不具备通用性, 其他数组想要使用还需要添加一个maForEach方法**

###### 4.版本四: 向原型对象添加方法, 使代码具有通用性 ######

*      var names = ["abc", "cba", "aaa", "ccc"];
        var students = [
        	{
               id: 100, name: "why", age: 18 },
        	{
               id: 101, name: "kobe", age: 30 },
        	{
               id: 102, name: "james", age: 25 },
        	{
               id: 103, name: "why", age: 22 }
        ]
        
        //向数组数组的原型对象中 添加一个myForEach方法
        Array.prototype.myForEach = function(fn) {
              
          for (var i = 0; i < this.length; i++) {
              
            fn(this[i], i, this);
          }
        }
        
        //此时可以直接使用myForEach方法
        names.myForEach(function (item, index, names) {
              
          console.log(item, index, names);
        });
        students.myForEach(function(item, index, stu) {
              
          console.log(item, index, stu)
        })
 *  **这样就手动实现了高阶函数**