当前位置:首页 > JavaScript

js 实现filter

2026-02-01 12:36:12JavaScript

实现数组的 filter 方法

在 JavaScript 中,数组的 filter 方法用于创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。以下是实现 filter 方法的几种方式:

js 实现filter

原生方法的使用

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

自定义实现

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

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

使用 reduce 实现

Array.prototype.filterWithReduce = function(callback) {
  return this.reduce((acc, current, index, array) => {
    if (callback(current, index, array)) {
      acc.push(current);
    }
    return acc;
  }, []);
};

const numbers = [10, 20, 30, 40];
const filtered = numbers.filterWithReduce(num => num > 25);
console.log(filtered); // 输出: [30, 40]

处理稀疏数组的实现

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

const sparseArray = [1, , 3, , 5];
const filteredSparse = sparseArray.sparseFilter(num => num % 2 === 1);
console.log(filteredSparse); // 输出: [1, 3, 5]

异步过滤实现

Array.prototype.asyncFilter = async function(callback) {
  const results = await Promise.all(this.map(callback));
  return this.filter((_, index) => results[index]);
};

const asyncNumbers = [1, 2, 3, 4];
asyncNumbers.asyncFilter(async num => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return num % 2 === 0;
}).then(filtered => console.log(filtered)); // 输出: [2, 4]

这些实现展示了 filter 方法的不同变体,包括基本实现、使用 reduce 的方法、处理稀疏数组以及异步过滤。每种方法都有其适用的场景,可以根据具体需求选择最合适的实现方式。

标签: jsfilter
分享给朋友:

相关文章

js实现vue路由

js实现vue路由

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

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

js实现下拉菜单

js实现下拉菜单

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

js 实现拖拽

js 实现拖拽

实现拖拽的基本步骤 在JavaScript中实现拖拽功能需要监听几个关键事件:mousedown、mousemove和mouseup。以下是实现的基本逻辑。 监听目标元素的mousedown事件,记…

js 实现递归

js 实现递归

递归的基本概念 递归是指函数直接或间接调用自身的过程。在JavaScript中,递归通常用于解决可以分解为相似子问题的问题,如阶乘、斐波那契数列、树形结构遍历等。 递归的实现要点 基线条件(Base…