当前位置:首页 > JavaScript

js 实现each

2026-01-30 11:00:36JavaScript

实现 each 方法

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

数组的 each 方法

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

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

对象的 each 方法

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

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

通用 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], (item, index) => {
  console.log(item, index);
});

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

注意事项

  • 修改内置原型(如 Array.prototypeObject.prototype)可能会引起冲突,谨慎使用
  • 使用 hasOwnProperty 检查可以避免遍历到原型链上的属性
  • 回调函数的参数通常遵循 (value, index/key, collection) 的模式

js 实现each

标签: jseach
分享给朋友:

相关文章

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue…

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swip…

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https:/…

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div c…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js 实现继承

js 实现继承

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