JavaScript 中的 forEach 源码

maochunguang 发布于2019-08-23 17:54 / 2867人阅读

摘要：我们只能通过一些公开的参考一些浏览器内核公开代码。但思路就在那了，更完善的代码待大家来补充，一起交流。原创不简单，码字不易，点个赞，行不行

在日常 Coding 中，码农们肯定少不了对数组的操作，其中很常用的一个操作就是对数组进行遍历，查看数组中的元素，然后一顿操作猛如虎。

就好像我们去买水果，在一堆水果中，一个一个看好坏。这个好，嗯，要，放入袋中；这个不好，不要，放回；这个好，嗯，呀 …

在我认识的众多计算机语言中，如 Java、Python、JS，都有对 forEach 的实现，今天暂且简单地说说在 JavaScript 中 forEach。

学习或研究语言提供的函数 API，一般都会有这么几步：

看函数原型，理解参数

撸！实战，不断验证

深入源码，看优秀的代码，实现方式

学习思想，模式

代码很重要，但思维、认知更重要！

那么，不多说，先来看看 forEach 函数的原型：

/**
* currentValue : 遍历到的当前元素
* index : 当前元素的索引值 (可选)
* arr : 当前元素所属的数组对象，即 array (可选)
* thisValue : 当执行回调函数时用作 this 的值(参考对象) (可选)
* 
* 返回值: undefined
*/
1. array.forEach(function(currentValue, index, arr), thisArg);
2. arr.forEach(callback[, thisArg]);

这里有两种函数原型的表达方式，第一种看起来稍微清楚明白点，第二种偏高大上，Linux 上很常见。看个人所接触的语言及习惯，哪种适合自己，哪种能让自己更容易理解、明白就看哪种就好，不必纠结！

适合自己的才是最好的！

其中 currentValue 就是遍历到的当前元素，拿买苹果作例子，我们从一堆苹果中，一个个挑，而 currentValue 就是我们从水果堆中拿到的那个苹果；

index 是当前元素的索引，也就是我们手中的苹果是拿过的苹果中是第几个，比如这个是拿的我第二个，那 index 就是 1。为什么是 1 不是 2 呢？因为计算机语言是从 0 开始的，这是一个哲学问题；

arr 是当前元素所属的数组对象，说白了就是那一堆苹果。

而 thisArg，就很难解释了。还是看例子吧，说千遍，不如做一步，自己敲一下，运行后，理解可能更深。

后面三个参数都是可选的，可有可无，估计他们很想哭。

来个栗子：

var array1 = ["a", "b", "c"];
var array2 = ["1","2","3"];
array1.forEach(function(currentValue, index, arr) {
    console.log(currentValue, index, arr, this);
},array2);

# 输出
// 如果给 forEach() 传递了 thisArg 参数，当调用时，它将被传给 callback 函数，作为它的 this 值。否则，将会传入 undefined 作为它的 this 值
> "a" 0 ["a", "b", "c"] ["1", "2", "3"] 
> "b" 1 ["a", "b", "c"] ["1", "2", "3"]
> "c" 2 ["a", "b", "c"] ["1", "2", "3"]

我们看到，数组的每一个元素及他们对应的索引被依次输入，而 arr 就是它自己，而 this 则是 array2，是我们在调用 forEach 时传进去的，在里面被当作 this 了。

源码呢？

说到这，JavaScript 不像 Java 一样，它提供的函数的源码并不是用本身自己这种语言编写的，而是用 C 或 C++ 写的。这些函数，其实只是一种对外公开的规范，就像是向开发提供的接口一样。所以严格讲，JavaScript 不是一门语言，而是一套规范，一套 API。
这与很多语言有着很大的不同。

对同一个函数，或者说同一个 API，也有多种不同的方式实现，因此，我们很难像 Java 一样查看 forEach 的源码，一个函数，在同一个版本，源码一致。

我们只能通过一些公开的参考一些浏览器内核公开代码。

例如，mozilla 的 forEach 源码：

/* ES5 15.4.4.18. */
function ArrayForEach(callbackfn/*, thisArg*/) {
  var O = ToObject(this);
  var len = ToLength(O.length);
 if (arguments.length === 0)
   ThrowTypeError(JSMSG_MISSING_FUN_ARG, 0, "Array.prototype.forEach");
  if (!IsCallable(callbackfn))
   ThrowTypeError(JSMSG_NOT_FUNCTION, DecompileArg(0, callbackfn));
  var T = arguments.length > 1 ? arguments[1] : void 0;

  for (var k = 0; k < len; k++) {
   if (k in O) {
   callContentFunction(callbackfn, T, O[k], k, O);
   }
  }
  return void 0;
}

那我们能不能根据实际用途效果，参照前面的源码，自己用 JavaScript 手写一个 forEach 呢？
当然，可以！

我这里写了两种不同的 forEach 的实现，如果你有更好的方式，欢迎贴代码交流。

1.使用 call 方式

Array.prototype.forEach = function(callback,thisArg){
  var len = this.length;
  for(var i = 0; i < len; i++){
   // callback(this[i], i, this);
   callback.call(thisArg,this[i], i, this);
  }
}

2.使用 bind 方式

Array.prototype.forEach = function(callback,thisArg){
 var len = this.length;
 callback = callback.bind(thisArg);
 for(var i = 0; i < len; i++){
  callback(this[i], i, this);
 }
}

当然，代码只给了关键性代码，里面少了很多合理性判断，特殊处理等。但思路就在那了，更完善的代码待大家来补充，一起交流。

原创不简单，码字不易，点个赞，行不行！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104338.html

读 Zepto 源码之操作 DOM

摘要：辅助方法这个方法递归遍历的子节点，将节点交由回调函数处理。对集合进行遍历，调用方法，如果为函数，则将回调函数返回的结果作为参数传给否则，如果为，则将也即包裹元素的副本传给，否则直接将传给。这篇依然是跟 dom 相关的方法，侧重点是操作 dom 的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的源码为 zepto...

beita 2019-08-20 17:00 评论0 收藏0
koa-router源码学习

摘要：源码架构图调用链路请求调用流程存放方法指定的参数的中间件存放实例存放路径参数的一些属性，存放该路由的中间件如果支持请求，一并支持请求将路由转为正则表达式给实例挂载方法如果指定了路由属性路由注册实例数组，初始为空数源码架构图 showImg(https://segmentfault.com/img/bVbgy2f?w=1159&h=1495); 调用链路-routes() showIm...

qpwoeiru96 2019-08-23 11:49 评论0 收藏0
看Zepto如何实现增删改查DOM

摘要：先看下图，我们以删除元素，插入元素复制元素，包裹元素和替换元素几个模块分别探究如何一一将其实现。遍历当前集合中的元素，当该元素的父节点存在的时候，使用删除该元素。接下来我们来看如何将中创建好的节点插入到目标位置。前言 dom也就是文档对象模型，是针对HTML和XML的一个api，描绘了一个层次化的节点树。虽然浏览器原生给我们提供了许多操作dom的方法，使我们可以对dom进行查找，复制...

lookSomeone 2019-08-01 17:45 评论0 收藏0
看Zepto如何实现增删改查DOM

摘要：先看下图，我们以删除元素，插入元素复制元素，包裹元素和替换元素几个模块分别探究如何一一将其实现。遍历当前集合中的元素，当该元素的父节点存在的时候，使用删除该元素。接下来我们来看如何将中创建好的节点插入到目标位置。前言 dom也就是文档对象模型，是针对HTML和XML的一个api，描绘了一个层次化的节点树。虽然浏览器原生给我们提供了许多操作dom的方法，使我们可以对dom进行查找，复制...

Clect 2019-08-21 16:52 评论0 收藏0
看Zepto如何实现增删改查DOM

摘要：先看下图，我们以删除元素，插入元素复制元素，包裹元素和替换元素几个模块分别探究如何一一将其实现。遍历当前集合中的元素，当该元素的父节点存在的时候，使用删除该元素。接下来我们来看如何将中创建好的节点插入到目标位置。前言 dom也就是文档对象模型，是针对HTML和XML的一个api，描绘了一个层次化的节点树。虽然浏览器原生给我们提供了许多操作dom的方法，使我们可以对dom进行查找，复制...

VioletJack 2019-08-30 15:53 评论0 收藏0