当前位置:首页 > JavaScript

js 实现 each

2026-02-01 14:41:53JavaScript

js 实现 each

实现 each 方法

在 JavaScript 中,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 判断是否为数组,确保正确处理不同类型的数据

js 实现 each

标签: jseach
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…