当前位置:首页 > JavaScript

js 实现each

2026-01-30 11:00:36JavaScript

js 实现each

js 实现each

实现 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) 的模式

标签: jseach
分享给朋友:

相关文章

js实现继承

js实现继承

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

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…