filter 方法 (Array)
返回数组中的满足回调函数中指定的条件的元素。
语法
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方法。
// Define a callback function. function CheckIfPrime(value, index, ar) { high = Math.floor(Math.sqrt(value)) + 1; for (var div = 2; div <= high; div++) { if (value % div == 0) { return false; } } return true; } // Create the original array. var numbers = [31, 33, 35, 37, 39, 41, 43, 45, 47, 49, 51, 53]; // Get the prime numbers that are in the original array. var primes = numbers.filter(CheckIfPrime); document.write(primes); // Output: 31,37,41,43,47,53
示例
在下面的示例中,callbackfn参数包含回调函数的代码。
// Create the original array. var arr = [5, "element", 10, "the", true]; // Create an array that contains the string // values that are in the original array. var result = arr.filter( function (value) { return (typeof value === 'string'); } ); document.write(result); // Output: element, the
示例
下面的示例显示了windowDOM对象中以字母“css”开头的属性名。
var filteredNames = Object.getOwnPropertyNames(window).filter(IsC); for (i in filteredNames) document.write(filteredNames[i] + "<br/>"); // Check whether the string starts with "css". function IsC(value) { var firstChar = value.substr(0, 3); if (firstChar.toLowerCase() == "css") return true; else return false; } // Output: // CSSRule // CSSFontFaceRule // CSSImportRule // CSSMediaRule // CSSNamespaceRule // CSSPageRule // CSSRuleList // CSSStyleDeclaration // CSSStyleRule // CSSStyleSheet
示例
下面的示例阐释了thisArg参数的用法,该参数指定对其引用this关键字的对象。
var checkNumericRange = function(value) { if (typeof value !== 'number') return false; else return value >= this.minimum && value <= this.maximum; } var numbers = [6, 12, "15", 16, "the", -12]; // The obj argument enables use of the this value // within the callback function. var obj = { minimum: 10, maximum: 20 } var result = numbers.filter(checkNumericRange, obj); document.write(result); // Output: 12,16
示例
filter方法可应用于字符串而不是数组。下面的示例演示如何执行此操作。
// Define a callback function that returns true // if the current array element follows a space // or is the first character. function CheckValue(value, index, ar) { if (index == 0) return true; else return ar[index - 1] === " "; } // Create a string. var sentence = "The quick brown fox jumps over the lazy dog."; // Create an array that contains all characters that follow a space. var subset = [].filter.call(sentence, CheckValue); // You can use this alternative syntax. //var subset = Array.prototype.filter.call(sentence, CheckValue); document.write(subset); // Output: T,q,b,f,j,o,t,l,d
必备条件
在以下文档模式中受支持:Internet Explorer 9标准模式、Internet Explorer 10标准模式、Internet Explorer 11标准模式。应用商店应用(Windows 8和Windows Phone 8.1)中也受支持。请参阅版本信息。
在以下文档模式中不受支持:怪异模式、Internet Explorer 6 标准模式、Internet Explorer 7 标准模式、Internet Explorer 8 标准模式。