当前位置:首页 > JavaScript

实现js filter

2026-03-15 06:58:52JavaScript

实现 JavaScript 的 filter 方法

filter 是 JavaScript 数组的高阶函数,用于创建一个新数组,包含通过测试函数的所有元素。以下是实现方式:

自定义 filter 方法

可以通过扩展 Array.prototype 或直接编写函数实现:

实现js filter

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

使用示例

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.myFilter(num => num % 2 === 0);
console.log(evenNumbers); // 输出 [2, 4]

原生 filter 方法的使用

const words = ['spray', 'limit', 'elite', 'exuberant'];
const longWords = words.filter(word => word.length > 5);
console.log(longWords); // 输出 ["exuberant"]

注意事项

  • 回调函数应返回布尔值,决定元素是否包含在新数组中
  • 不会修改原数组,而是返回新数组
  • 空元素不会调用回调函数

实现原理

  1. 创建一个空数组存储结果
  2. 遍历原数组每个元素
  3. 对每个元素执行回调函数
  4. 如果回调返回 true,将元素添加到结果数组
  5. 返回结果数组

性能考虑

  • 时间复杂度为 O(n),需要遍历整个数组
  • 对于大型数组,考虑性能影响
  • 可以结合其他方法如 mapreduce 进行复杂操作

标签: jsfilter
分享给朋友:

相关文章

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callbac…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(f…

vue filter实现搜索

vue filter实现搜索

Vue 过滤器实现搜索功能 在 Vue 中,过滤器(Filters)通常用于文本格式化,但结合计算属性或方法可以实现搜索功能。以下是几种实现方式: 使用计算属性实现搜索 计算属性适合基于现有数据动态…