当前位置:首页 > JavaScript

js 实现each

2026-04-04 02:38:04JavaScript

JavaScript 实现 each 方法

在 JavaScript 中,可以通过多种方式实现类似 jQuery 的 each 方法,用于遍历数组或对象。

遍历数组的 each 方法

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

// 使用示例
const arr = [1, 2, 3];
each(arr, function(item, index) {
  console.log(`元素: ${item}, 索引: ${index}`);
});

遍历对象的 each 方法

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

// 使用示例
const obj = { a: 1, b: 2, c: 3 };
eachObject(obj, function(value, key) {
  console.log(`键: ${key}, 值: ${value}`);
});

通用的 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 (let key in collection) {
      if (collection.hasOwnProperty(key)) {
        callback(collection[key], key, collection);
      }
    }
  }
}

// 使用示例
each([1, 2, 3], function(item) {
  console.log(item);
});

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

在原型上扩展 each 方法

可以在数组和对象的原型上扩展 each 方法:

js 实现each

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

Object.prototype.each = function(callback) {
  for (let key in this) {
    if (this.hasOwnProperty(key)) {
      callback(this[key], key, this);
    }
  }
};

// 使用示例
[1, 2, 3].each(function(item) {
  console.log(item);
});

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

注意事项

  • 使用 hasOwnProperty 检查可以避免遍历到原型链上的属性
  • 在原型上扩展方法可能会与其他库冲突,需谨慎使用
  • 回调函数的参数顺序可以自定义,通常为 (value, index/key, collection)

标签: jseach
分享给朋友:

相关文章

js实现延迟

js实现延迟

实现延迟的方法 在JavaScript中,实现延迟操作有多种方式,以下是几种常见的方法: 使用setTimeout函数 setTimeout是JavaScript中最常用的延迟执行方法。它接受一个回…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

js实现正交

js实现正交

正交的概念 正交在数学和计算机科学中通常指两个向量垂直或线性无关。在编程中,正交性常被用于设计模块化、低耦合的系统。 向量正交判断 判断两个向量是否正交可以通过点积是否为0来实现: functio…

js实现视口

js实现视口

js实现视口检测的方法 使用JavaScript检测元素是否进入视口(viewport)可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法: Int…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…