当前位置：首页 > JavaScript

js 实现 each

2026-03-14 13:37:40JavaScript

实现 each 方法

在 JavaScript 中，each 方法通常用于遍历数组或对象。以下是几种实现方式：

数组遍历

使用 forEach 方法可以轻松实现数组的遍历：

const arr = [1, 2, 3, 4];
arr.forEach((item, index) => {
  console.log(`Index: ${index}, Value: ${item}`);
});

对象遍历

使用 for...in 循环可以遍历对象的属性：

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`Key: ${key}, Value: ${obj[key]}`);
  }
}

自定义 each 函数

可以创建一个通用的 each 函数，适用于数组和对象：

function each(collection, callback) {
  if (Array.isArray(collection)) {
    for (let i = 0; i < collection.length; i++) {
      callback(collection[i], i, collection);
    }
  } else if (typeof collection === 'object' && collection !== null) {
    for (const key in collection) {
      if (collection.hasOwnProperty(key)) {
        callback(collection[key], key, collection);
      }
    }
  }
}

// 使用示例
each([1, 2, 3], (value, index) => {
  console.log(value, index);
});

each({ a: 1, b: 2 }, (value, key) => {
  console.log(key, value);
});

使用 jQuery 的 each 方法

如果项目中已经引入了 jQuery，可以直接使用其 each 方法：

$.each([1, 2, 3], function(index, value) {
  console.log(index, value);
});

$.each({ a: 1, b: 2 }, function(key, value) {
  console.log(key, value);
});

使用 Lodash 的 forEach 方法

Lodash 也提供了类似的 forEach 方法：

js 实现 each

_.forEach([1, 2, 3], function(value, index) {
  console.log(index, value);
});

_.forEach({ a: 1, b: 2 }, function(value, key) {
  console.log(key, value);
});