当前位置:首页 > JavaScript

js 实现 each

2026-02-01 14:41:53JavaScript

实现 each 方法

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

js 实现 each

数组遍历的实现

function each(array, callback) {
  for (let i = 0; i < array.length; i++) {
    callback(array[i], i, array);
  }
}

对象遍历的实现

function each(object, callback) {
  for (let key in object) {
    if (object.hasOwnProperty(key)) {
      callback(object[key], key, object);
    }
  }
}

通用实现(同时支持数组和对象)

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

使用示例

// 数组遍历示例
each([1, 2, 3], function(item, index) {
  console.log(index, item);
});

// 对象遍历示例
each({a: 1, b: 2}, function(value, key) {
  console.log(key, value);
});

注意事项

  • 回调函数的参数顺序通常遵循 (value, key/index, collection) 的约定
  • 对象遍历时需要使用 hasOwnProperty 检查,避免遍历原型链上的属性
  • 可以使用 Array.isArray 判断是否为数组,确保正确处理不同类型的数据

标签: jseach
分享给朋友:

相关文章

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js jquery

js jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

实现继承js

实现继承js

实现继承的方式 在JavaScript中,实现继承可以通过多种方式完成,每种方式都有其优缺点。以下是几种常见的实现继承的方法: 原型链继承 原型链继承是最基本的继承方式,通过将子类的原型指向父类的实…

js实现 拖动

js实现 拖动

实现拖动的步骤 HTML 结构 创建一个可拖动的元素和一个放置区域: <div id="draggable" draggable="true">拖动我</div> <d…