JavaScript Array.prototype.filter 方法详解与兼容实现

作者：函数茶馆时间：2026-10-25 15:47:25浏览：141

本文深入解析 JavaScript 中 Array.prototype.filter 方法的运行机制，包括回调函数的调用时机、遍历范围及原数组不变特性。通过长度过滤、数值筛选及字符串搜索等实例展示其应用，并提供了符合 ECMA-262 第5版标准的兼容代码实现，帮助开发者理解底层逻辑并解决旧环境支持问题。

描述

数组实例的 filter 方法会对数组中的每一个元素执行一次 callback 回调函数，并收集那些使 callback 返回 true（或转换为 true）的元素，构建并返回一个包含这些元素的新数组。需要注意的是，callback 仅针对数组中已分配索引的元素进行调用，对于已被删除或从未赋值的稀疏索引位置，回调函数不会被触发。未能通过 callback 测试条件的元素将被忽略，不会出现在返回的新数组中。

理解

调用 filter 不会修改原始数组，而是返回一个经过过滤后的新数组。

filter遍历的元素范围在首次调用callback前已确定。filter后添加的元素不会被filter遍历。已存在元素若被修改，传入callback的值为filter遍历时该时刻的值。被删除或未赋值的元素不会被遍历。

示例

过滤长度大于6的

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

利用 filter 方法生成一个新数组，该数组仅包含原数组中值大于 10 的元素。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

使用 filter() 根据特定的搜索条件来过滤数组内容

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

据搜索条件来过滤数组内容

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

原生实现

filter 方法已被纳入 ECMA-262 标准第 5 版，因此在部分旧版运行环境中可能缺乏原生支持。为了解决兼容性问题，可以在脚本起始处插入以下代码。该实现遵循 ECMA-262 第5版定义的算法逻辑，并假设 fn.call 等价于 Function.prototype.call 的初始值，且 Array.prototype.push 保持其初始状态。

if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();

    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }

    res.length = c; // shrink down array to proper size
    return res;
  };
}

到此这篇关于JavaScript中Array的filter函数详解的文章就介绍到这了,更多相关JS filter 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS大数值转字符串出现科学计数法怎么办

2026-11-05 17:09:21

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09