当前位置:首页 > JavaScript

实现js filter

2026-03-15 06:58:52JavaScript

实现js filter

实现 JavaScript 的 filter 方法

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

实现js filter

自定义 filter 方法

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

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防抖和节流实现

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

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现tab选项卡切换

js实现tab选项卡切换

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

js 实现链表

js 实现链表

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

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…