当前位置:首页 > 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实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现选题

js实现选题

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

js怎么实现异步

js怎么实现异步

异步实现方法 JavaScript中实现异步操作主要通过以下几种方式: Promise Promise是ES6引入的异步解决方案,用于处理异步操作的成功或失败状态。 const promise =…