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

seven_ • 2023年3月1日上午10:41 • 后端笔记 • 阅读 222

实现一个自己的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)
})