实现jQuery中的each

2018-06-23

摘要：学习冴羽的博客实现jQuery中的each

$.each

$.each方法可以遍历对象和数组，语法：

1	$.each(object, callback)

回调函数有两个参数，第一个参数为对象的键名或数组的索引，第二个参数就是对应的键值或数组元素。回调函数返回false时可以跳出循环

$.each([0, 1, 2, 3, 4, 5], function(index, item){
  if (index > 2) {
    return false;
  }
  console.log(index + ": " + item );
});
// 0: 0
// 1: 1
// 2: 2

模拟实现

需要将普通的对象和（类）数组分开处理，如果是普通对象，使用for...in循环；如果是（类）数组，使用for循环。因而要先判断传入的事数组还是普通的对象。判断方法isArrayLike见JavaScript检测复杂类型，当回调函数返回false时跳出循环

function _each(obj, callback) {
  var i = 0, length;
  if (isArrayLike(obj)) {
    for (length = obj.length; i < length; i++) {
      if (callback(i, obj[i]) === false) {
        break;
      }
    }
  } else {
    for (i in obj) {
      if (callback(i, obj[i]) === false) {
        break;
      }
    }
  }
  return obj;
}

this

有时候需要用到 this，使用 call 或 apply 来指定 this，但是这样会导致性能损失

function _each(obj, callback) {
  var i = 0, length;
  if (isArrayLike(obj)) {
    for (length = obj.length; i < length; i++) {
      if (callback.call(obj[i], i, obj[i]) === false) {
        break;
      }
    }
  } else {
    for (i in obj) {
      if (callback.call(obj[i], i, obj[i]) === false) {
        break;
      }
    }
  }
  return obj;
}