js实现 $.each

$.each 的实现方法

在 JavaScript 中实现类似 jQuery 的 $.each 方法，可以通过以下方式完成。$.each 主要用于遍历数组或对象，并对每个元素执行回调函数。

实现数组和对象的遍历

function each(collection, callback) {
  if (Array.isArray(collection) || isArrayLike(collection)) {
    for (let i = 0; i < collection.length; i++) {
      if (callback.call(collection[i], i, collection[i]) === false) {
        break;
      }
    }
  } else {
    for (let key in collection) {
      if (collection.hasOwnProperty(key)) {
        if (callback.call(collection[key], key, collection[key]) === false) {
          break;
        }
      }
    }
  }
}

function isArrayLike(obj) {
  return typeof obj === 'object' && obj.length !== undefined;
}

使用示例

const arr = [1, 2, 3];
each(arr, function(index, value) {
  console.log(`Index: ${index}, Value: ${value}`);
});

const obj = { a: 1, b: 2 };
each(obj, function(key, value) {
  console.log(`Key: ${key}, Value: ${value}`);
});

实现链式调用

如果需要支持链式调用，可以在 each 方法中返回传入的集合：

function each(collection, callback) {
  if (Array.isArray(collection) || isArrayLike(collection)) {
    for (let i = 0; i < collection.length; i++) {
      if (callback.call(collection[i], i, collection[i]) === false) {
        break;
      }
    }
  } else {
    for (let key in collection) {
      if (collection.hasOwnProperty(key)) {
        if (callback.call(collection[key], key, collection[key]) === false) {
          break;
        }
      }
    }
  }
  return collection;
}

支持 this 绑定

$.each 允许在回调函数中使用 this 指向当前元素。上述实现已经通过 callback.call 确保了这一点。

提前终止遍历

如果回调函数返回 false，遍历会提前终止。这在某些场景下非常有用，比如在查找特定元素时。

each([1, 2, 3], function(index, value) {
  console.log(value);
  if (value === 2) {
    return false; // 终止遍历
  }
});

通过以上方法，可以实现一个功能接近 jQuery $.each 的遍历工具函数。