jquery中的$.each遍历方法

介绍

最近在扣个老项目，主要使用jquery，就此打算研究下jquery中的源码，补补课。其中的$.each方法可跳出循环，遍历对象，让我们来一探究竟。

源码

each: function(obj, callback) {
  var length, i = 0;

  // 判断传入的obj是否为类数组，是则使用for循环
  if (isArrayLike(obj)) {
    length = obj.length;
    for (; i < length; i++) {
      // 调用传入的callback，传入当前值和索引，通过返回值来判断，false则跳出循环
      if (callback.call(obj[i], i, obj[i]) === false) {
        break;
      }
    }
  } else {
    // 对象类型，for in遍历属性
    for (i in obj) {
      if (callback.call(obj[i], i, obj[i]) === false) {
        break;
      }
    }
  }

  return obj;
},

可以看到，整体代码并不多，也不难看懂。主要通过判断是否为类数组类型，从而决定使用何种遍历的方式。在实际使用时通过return true来模拟continue的行为，使用return false来执行break。

isArrayLike方法

import toType from "./toType.js";
import isWindow from "../var/isWindow.js";

function isArrayLike(obj) {
  // 判断传入的obj的类型，是否含有length属性
  var length = !!obj && obj.length,
    type = toType(obj);

  // 判断是否为function类型或window对象
  if (typeof obj === "function" || isWindow(obj)) {
    return false;
  }

  // 如果类型为array 或 长度为0 或 长度为数值且大于0且length-1这个索引存在于obj
  return type === "array" || length === 0 ||
    typeof length === "number" && length > 0 && (length - 1) in obj;
}

export default isArrayLike;

判断类数组主要使用了jquery封装的类型判断方法toType和length属性。

补充

有这么一道面试题，问如何跳出类似map，forEach的循环？

function getItemById(arr, id) {
    var item = null;
    try {
        arr.forEach(function (curItem, i) {
            if (curItem.id == id) {
                item = curItem;
                throw Error();
            }
        })
    } catch (e) {
    }
    return item;
}

这种跳出循环的操作算是一种奇技淫巧，仅作参考学习，实际开发并不常用。

注意： 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

若你需要提前终止循环，你可以使用：

• 一个简单的 for 循环
• for…of / for…in 循环
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.find()
• Array.prototype.findIndex()

这些数组方法则可以对数组元素判断，以便确定是否需要继续遍历：

• every()
• some()
• find()
• findIndex()

译者注：只要条件允许，也可以使用 filter() 提前过滤出需要遍历的部分，再用 forEach() 处理。

参考链接

打赏