当前位置:首页 > JavaScript

js 实现filter

2026-04-06 05:22:41JavaScript

实现 JavaScript 的 filter 方法

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

使用原生 Array.prototype.filter

原生方法是最直接的方式:

js 实现filter

const arr = [1, 2, 3, 4];
const filtered = arr.filter(item => item > 2);
console.log(filtered); // [3, 4]

手动实现 filter 方法

可以通过扩展 Array.prototype 或独立函数实现:

js 实现filter

独立函数实现

function filter(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 arr = [1, 2, 3, 4];
const filtered = filter(arr, item => item > 2);
console.log(filtered); // [3, 4]

扩展 Array.prototype

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 arr = [1, 2, 3, 4];
const filtered = arr.myFilter(item => item > 2);
console.log(filtered); // [3, 4]

使用 reduce 实现 filter

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

const arr = [1, 2, 3, 4];
const filtered = filterWithReduce(arr, item => item > 2);
console.log(filtered); // [3, 4]

注意事项

  • 回调函数接收三个参数:当前元素、索引和原数组。
  • 原生 filter 不会修改原数组,而是返回新数组。
  • 手动实现时需处理稀疏数组(如 [1, , 3])的情况。

标签: jsfilter
分享给朋友:

相关文章

js实现验证码

js实现验证码

实现验证码的JavaScript方法 生成随机验证码 使用Math.random()生成随机字符串,结合数字和字母: function generateCaptcha() { const cha…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js实现防洪

js实现防洪

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

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…

js 实现按钮点击

js 实现按钮点击

实现按钮点击的 JavaScript 方法 HTML 按钮元素 在 HTML 中创建一个按钮,可以通过 <button> 或 <input> 标签实现: <button…