filter 方法 (JavaScript)

本文深入探讨了JavaScript中filter方法的功能、参数、返回值及其常见异常情况,并通过多个示例展示了如何灵活运用filter方法进行数组筛选,包括自定义回调函数、处理数组对象、过滤字符串以及使用thisArg参数等应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 全部折叠全部展开      代码:全部 代码:多种 代码:Visual Basic 代码:C# 代码:Visual C++ 代码:F# 代码:JScript 
filter 方法 (JavaScript)

 

返回数组中的满足回调函数中指定的条件的元素。

array1.filter(callbackfn[, thisArg])
参数
 

参数

定义

array1

必需。 一个数组对象。

callbackfn

必需。 一个接受最多三个参数的函数。 对于数组中的每个元素,filter 方法都会调用 callbackfn 函数一次。

thisArg

可选。 可在 callbackfn 函数中为其引用 this 关键字的对象。 如果省略 thisArg,则 undefined 将用作 this 值。

返回值

一个包含回调函数为其返回 true 的所有值的新数组。 如果回调函数为 array1 的所有元素返回 false,则新数组的长度为 0。

异常

如果 callbackfn 参数不是函数对象,则将引发 TypeError 异常。

备注

对于数组中的每个元素,filter 方法都会调用 callbackfn 函数一次(采用升序索引顺序)。 不为数组中缺少的元素调用该回调函数。

除了数组对象之外,filter 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数语法

回调函数的语法如下所示:

function callbackfn(value, index, array1)

可使用最多三个参数来声明回调函数。

下表列出了回调函数参数。

 

回调参数

定义

value

数组元素的值。

index

数组元素的数字索引。

array1

包含该元素的数组对象。

修改数组对象

filter 方法不直接修改原始数组,但回调函数可能会修改它。 下表描述了在 filter 方法启动后修改数组对象所获得的结果。

 

filter 方法启动后的条件

元素是否传递给回调函数

在数组的原始长度之外添加元素。

否。

添加元素以填充数组中缺少的元素。

是,如果该索引尚未传递给回调函数。

元素被更改。

是,如果该元素尚未传递给回调函数。

从数组中删除元素。

否,除非该元素已传递给回调函数。

示例

下面的示例演示如何使用 filter 方法。

  1. // Define a callback function.
  2. function CheckIfPrime(value, index, ar) {
  3.     high = Math.floor(Math.sqrt(value)) + 1;
  4.     
  5.     for (var div = 2; div <= high; div++) {
  6.         if (value % div == 0{
  7.             return false;
  8.         }
  9.     } 
  10.     return true;
  11. }
  12.  
  13. // Create the original array.
  14. var numbers = [313335373941434547495153];
  15.  
  16. // Get the prime numbers that are in the original array. 
  17. var primes = numbers.filter(CheckIfPrime);
  18.  
  19. document.write(primes);
  20. // Output: 31,37,41,43,47,53

在下面的示例中,callbackfn 参数包含回调函数的代码。

  1. // Create the original array.
  2. var arr = [5"element"10"the", true];
  3.  
  4. // Create an array that contains the string
  5. // values that are in the original array.
  6. var result = arr.filter(
  7.     function (value) {
  8.         return (typeof value === 'string');
  9.     }
  10. );
  11.  
  12. document.write(result);
  13. // Output: element, the

下面的示例显示windowDOM 对象中以字母“css”开头的属性名。

 

  1. var filteredNames = Object.getOwnPropertyNames(window).filter(IsC);
  2.  
  3.     for (i in filteredNames)
  4.         document.write(filteredNames[i] + "<br/>");
  5.  
  6. // Check whether the string starts with "css".
  7. function IsC(value) {
  8.     var firstChar = value.substr(03);
  9.     if (firstChar.toLowerCase() == "css")
  10.         return true;
  11.     else
  12.         return false;
  13.     }
  14.  
  15. // Output:
  16. // CSSRule
  17. // CSSFontFaceRule
  18. // CSSImportRule
  19. // CSSMediaRule
  20. // CSSNamespaceRule
  21. // CSSPageRule
  22. // CSSRuleList
  23. // CSSStyleDeclaration
  24. // CSSStyleRule
  25. // CSSStyleSheet

下面的示例阐释 thisArg 参数的用法,该参数指定对其引用 this 关键字的对象。

  1. var checkNumericRange = function(value) {
  2.     if (typeof value !== 'number')
  3.         return false;
  4.     else 
  5.         return value >= this.minimum && value <= this.maximum;
  6. }
  7.  
  8. var numbers = [612"15"16"the", -12];
  9.  
  10. // The obj argument enables use of the this value
  11. // within the callback function.
  12. var obj = { minimum: 10, maximum: 20 }
  13.  
  14. var result = numbers.filter(checkNumericRange, obj);
  15.  
  16. document.write(result);
  17. // Output: 12,16

filter 方法可应用于字符串而不是数组。 下面的示例演示如何执行此操作。

  1. // Define a callback function that returns true
  2. // if the current array element follows a space
  3. // or is the first character.
  4. function CheckValue(value, index, ar) {
  5.     if (index == 0)
  6.         return true;
  7.     else
  8.         return ar[index - 1] === " ";
  9. }
  10.  
  11. // Create a string.
  12. var sentence = "The quick brown fox jumps over the lazy dog."
  13.  
  14. // Create an array that contains all characters that follow a space.
  15. var subset = [].filter.call(sentence, CheckValue); 
  16.  
  17. // You can use this alternative syntax.
  18. //var subset = Array.prototype.filter.call(sentence, CheckValue);
  19.  
  20. document.write(subset);
  21. // Output: T,q,b,f,j,o,t,l,d
要求

 

在以下文档模式中受支持:Internet Explorer 9 标准模式和 Internet Explorer 10 标准模式。Windows 应用商店 应用程序中也支持此项。请参见 版本信息

在以下文档模式中不受支持:Quirks、Internet Explorer 6 标准模式、Internet Explorer 7 标准模式、Internet Explorer 8 标准模式。

请参见
参考
概念
 
http://technet.microsoft.com/zh-cn/ff679973(v=vs.85)

转载于:https://www.cnblogs.com/simpman/archive/2013/02/28/2936855.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值