当前位置:首页 > 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
分享给朋友:

相关文章

js实现代码雨

js实现代码雨

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

js实现文字滚动

js实现文字滚动

实现文字滚动的几种方法 使用CSS动画实现滚动 通过CSS的@keyframes和transform属性可以实现平滑的文字滚动效果。 <style> .scroll-text { w…

js实现滑动

js实现滑动

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

js实现轮播代码

js实现轮播代码

基础轮播实现 使用HTML、CSS和JavaScript创建一个简单的轮播效果。HTML部分定义轮播容器和图片元素。 <div class="carousel"> <div c…

js实现导航菜单

js实现导航菜单

使用HTML和CSS创建基础结构 导航菜单的基础结构通常由HTML的无序列表(<ul>)和列表项(<li>)组成,每个列表项包含一个链接(<a>)。CSS用于样式化…

js实现div隐藏

js实现div隐藏

使用CSS的display属性隐藏div 通过设置元素的display属性为none,可以完全隐藏div元素。这种方法不仅隐藏元素,还会从文档流中移除,不占据页面空间。 document.getEl…