当前位置:首页 > JavaScript

js 实现 each

2026-03-14 13:37:40JavaScript

实现 each 方法

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

数组遍历

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

js 实现 each

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 函数,适用于数组和对象:

js 实现 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 方法:

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

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

标签: jseach
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(func,…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 const…