当前位置:首页 > JavaScript

js实现filter

2026-02-01 19:23:58JavaScript

实现 JavaScript 的 filter 方法

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

js实现filter

原生 Array.prototype.filter 的使用

原生 filter 方法接受一个回调函数,该函数会对数组的每个元素执行测试。回调函数返回 true 的元素会被包含在新数组中。

js实现filter

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

手动实现 filter 方法

可以通过扩展 Array.prototype 或直接编写函数来手动实现 filter 的功能。

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

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

使用 reduce 实现 filter

reduce 方法也可以用来实现 filter 的功能,通过累积满足条件的元素。

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

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

注意事项

  • 回调函数的参数依次为当前元素、索引和原数组。
  • filter 不会改变原数组,而是返回一个新数组。
  • 如果没有任何元素通过测试,则返回空数组。

标签: jsfilter
分享给朋友:

相关文章

jquery js

jquery js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更高…

js实现选题

js实现选题

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

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的JWT令牌…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <htm…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…