返回數組中的滿足回調函數中指定的條件的元素。
## 語法
~~~
array1.filter(callbackfn[, thisArg])
~~~
## 參數
|參數|定義|
|--|--|
|array1|必需。一個數組對象。|
|callbackfn|必需。一個接受最多三個參數的函數。對于數組中的每個元素,filter 方法都會調用 callbackfn 函數一次。|
|thisArg|可選。可在 callbackfn 函數中為其引用 this 關鍵字的對象。如果省略 thisArg,則 undefined 將用作 this 值。|
## 返回值
一個包含回調函數為其返回 true 的所有值的新數組。如果回調函數為 array1 的所有元素返回 false,則新數組的長度為 0。
異常
如果 callbackfn 參數不是函數對象,則將引發 TypeError 異常。
~~~
Exception Condition
~~~
## 備注
對于數組中的每個元素,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 參數包含回調函數的代碼。
JavaScript
// 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
~~~
下面的示例顯示 window DOM 對象中以字母“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
~~~
- ActiveXObject對象
- Array對象
- constructor屬性
- length屬性
- prototype屬性
- Array.from函數
- Array.isArray函數
- Array.of函數
- concat方法
- entries方法
- every方法
- fill方法
- filter方法
- findIndex方法
- forEach方法
- indexOf方法
- join方法
- keys方法
- lastIndexOf方法
- map方法
- pop方法
- push方法
- reduce方法
- reduceRight方法
- reverse方法
- shift方法
- slice方法
- some方法
- sort方法
- splice方法
- toString方法
- unshift方法
- valueOf方法
- values方法
- ArrayBuffer對象
- byteLength屬性
- ArrayBuffer.isView函數
- slice方法
- arguments對象
- 0...n 屬性(參數)
- callee 屬性(參數)
- length 屬性 (arguments)
- Boolean對象
- constructor 屬性(布爾值)
- prototype 屬性(布爾值)
- toString 方法 (Boolean)
- valueOf 方法 (Boolean)
- DataView對象
- buffer屬性 (DataView)
- byteLength屬性(DataView)
- byteOffset屬性(DataView)
- getInt8方法(DataView)
- getUint8方法(DataView)
- getInt16方法(DataView)
- getUint16方法(DataView)
- getInt32方法(DataView)
- getUint32方法(DataView)
- getFloat32方法(DataView)
- getFloat64方法(DataView)
- setInt8方法(DataView)
- setUint8方法(DataView)
- setInt16方法(DataView)
- setUint16方法(DataView)
- setInt32方法(DataView)
- setUint32方法(DataView)
- setFloat32方法(DataView)
- setFloat64方法(DataView)
- Date對象
- Debug對象
- Enumerator對象
- Error對象
- Float32Array對象
- Float64Array對象
- Function對象
- Global對象
- Int8Array對象
- Int16Array對象
- Int32Array對象
- Intl.Collator對象
- Intl.DateTimeFormat對象
- Intl.NumberFormat對象
- JSON對象
- Map對象
- Math對象
- Number對象
- Object對象
- Promise對象
- 代理對象
- Reflect對象
- RegExp對象
- 正則表達式對象
- Set對象
- String對象
- 符號對象
- Uint8Array對象
- Uint8ClampedArray對象
- Uint16Array對象
- Uint32Array對象
- VBArray對象
- WeakMap對象
- WeakSet對象
- WinRTError對象