当前位置:首页 > JavaScript

js 实现 find 方法

2026-02-03 00:11:22JavaScript

实现基础数组查找功能

通过回调函数匹配数组元素,返回第一个满足条件的元素。若未找到则返回 undefined

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

使用示例

const numbers = [1, 2, 3, 4];
const found = numbers.customFind(item => item > 2);
console.log(found); // 输出: 3

支持 thisArg 参数

允许通过 thisArg 指定回调函数的 this 上下文。

js 实现 find 方法

Array.prototype.customFind = function(callback, thisArg) {
  const context = thisArg || undefined;
  for (let i = 0; i < this.length; i++) {
    if (callback.call(context, this[i], i, this)) {
      return this[i];
    }
  }
  return undefined;
};

使用示例

const obj = { threshold: 2 };
const found = [1, 2, 3].customFind(
  function(item) { return item > this.threshold; },
  obj
);
console.log(found); // 输出: 3

边界条件处理

增加对稀疏数组和非法回调的校验,提升健壮性。

js 实现 find 方法

Array.prototype.customFind = function(callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError('Callback must be a function');
  }
  const context = thisArg || undefined;
  for (let i = 0; i < this.length; i++) {
    if (i in this && callback.call(context, this[i], i, this)) {
      return this[i];
    }
  }
  return undefined;
};

校验场景

// 稀疏数组
const sparse = [1, , 3];
console.log(sparse.customFind(item => item === undefined)); // undefined  

// 非法回调
try {
  [1, 2].customFind(null);
} catch (e) {
  console.log(e.message); // "Callback must be a function"
}

性能优化建议

对于大型数组,可考虑提前终止循环或使用更高效的遍历方式(如 for-of)。

Array.prototype.customFind = function(callback, thisArg) {
  const context = thisArg || undefined;
  for (const [index, value] of this.entries()) {
    if (callback.call(context, value, index, this)) {
      return value;
    }
  }
  return undefined;
};

标签: 方法js
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 // 获取…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScri…