jQuery源码学习之 each迭代器_each jq mouseenter-优快云博客

本文链接：https://blog.youkuaiyun.com/blog_szhao/article/details/48827959

本文介绍了jQuery中each方法的两种使用方式及其内部实现原理，并通过示例展示了如何利用each方法进行集合迭代，包括数组和对象的遍历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 理解

jQuery的each方法从使用上要分为2种情况：

$.each();
$(selector).each();

$.each()函数和$(selector).each()是不一样的，后者是专门用来遍历一个jQuery对象的，是为jQuery内部服务的。

2. 实现

$.each()函数可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或数组。在迭代数组的情况下，回调函数每次传递一个数组索引和相对应的数组值作为参数，（该值也可以通过访问this关键字得到，但是JavaScript始终将this值作为一个Object，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，这是换代的对象。

jQuery的实例方法最终也是调用的静态方法，其中each的实例方法如下：

each: function(callback, args) {
  return jQuery.each(this, callback, args);
},

可见，内部是直接调用的静态方法，jQuery.each静态方法：

each: function(obj, callback, args) {
  var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike(obj);
  if(args) {
    if(isArray) {
      for(; i < length; i++) {
        value = callback.apply(obj[i], args);
 
        if(value === false) {
          break;
        }
      }
    } // end if(isArray)
    else {
        for(i in obj) {
          value = callback.apply(obj[i], args);
  
          if(value === false) {
            break;
          }
        }
    }
  } // end if(args)
}// end function

实现原理几乎一致，只是增加了对于参数的判断，对象用for in遍历，数组用for遍历。

jQuery可以是多个合集数组DOM，所以在处理的时候经常就针对每一个DOM都要单独处理，所以一般都需要调用this.each方法，如下：

dequeue: function(type) {
  return this.each(function() {
    jQuery.dequeue(this, type);
  });
},

迭代器除了单独的遍历，在jQuery内部的运用最多的就是接口的抽象合并，相同功能的代码合并处理：

例如一：

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

例如二：

jQuery.each({
  mouseenter: "mouseenter",
  mouseleave: "mouseout",
  pointerenter: "pointerover",
  pointerleave: "pointerout"
}, function(orig, fix) {
  // process code
});

可以看出上面的代码方法，针对相同的功能，节约了大量的代码空间。