在此页

• 句法
• 描述
• Polyfill
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

filter() 方法 creates a new array with all elements that pass the test implemented by the provided function.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])
					

参数

callback

Function is a predicate, to test each element of the array. Return true to keep the element, false 否则。

It accepts three arguments:

element

The current element being processed in the array.

index 可选

The index of the current element being processed in the array.

array 可选

The array filter was called upon.

thisArg 可选

Value to use as this when executing callback .

返回值

A new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.

描述

filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback 返回 a value that coerces to true . callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values. Array elements which do not pass the callback test are simply skipped, and are not included in the new array.

callback is invoked with three arguments:

1. the value of the element
2. the index of the element
3. the Array object being traversed

若 thisArg parameter is provided to filter , it will be used as the callback's this value. Otherwise, the value undefined will be used as its this value. The this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function .

filter() does not mutate the array on which it is called.

The range of elements processed by filter() is set before the first invocation of callback . Elements which are appended to the array (from callback ) after the call to filter() begins will not be visited by callback . If existing elements of the array are deleted in the same way they will not be visited.

Polyfill

filter() was added to the ECMA-262 standard in the 5th edition. Therefore, it may not be present in all implementations of the standard.

You can work around this by inserting the following code at the beginning of your scripts, allowing use of filter() in ECMA-262 implementations which do not natively support it. This algorithm is exactly equivalent to the one specified in ECMA-262, 5th edition, assuming that fn.call evaluates to the original value of Function.prototype.bind() , and that Array.prototype.push() has its original value.

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;
    var kValue;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          kValue = t[i]; // in case t is changed in callback
          if (func(t[i], i, t)){
            res[c++] = kValue;
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          kValue = t[i];
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = kValue;
          }
        }
      }
    }
    res.length = c; // shrink down array to proper size
    return res;
  };
}
					

范例

Filtering out all small values

以下范例使用 filter() to create a filtered array that has all elements with values less than 10 removed.

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

Find all prime numbers in an array

The following example returns all prime numbers in the array:

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i == 0) {
      return false;
    }
  }
  return num > 1;
}
console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]
					

Filtering invalid entries from JSON

以下范例使用 filter() to create a filtered json of all elements with non-zero, numeric id .

let arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
]
let invalidEntries = 0
function filterByID(item) {
  if (Number.isFinite(item.id) && item.id !== 0) {
    return true
  }
  invalidEntries++
  return false;
}
let arrByID = arr.filter(filterByID)
console.log('Filtered Array\n', arrByID)
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
console.log('Number of Invalid Entries = ', invalidEntries)
// Number of Invalid Entries = 5
					

Searching in array

Following example uses filter() to filter array content based on search criteria.

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']
/**
 * Filter array items based on search criteria (query)
 */
function filterItems(arr, query) {
  return arr.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) !== -1
  })
}
console.log(filterItems(fruits, 'ap'))  // ['apple', 'grapes']
console.log(filterItems(fruits, 'an'))  // ['banana', 'mango', 'orange']
					

ES2015 Implementation

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']
/**
 * Filter array items based on search criteria (query)
 */
const filterItems = (arr, query) => {
  return arr.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) !== -1)
}
console.log(filterItems(fruits, 'ap'))  // ['apple', 'grapes']
console.log(filterItems(fruits, 'an'))  // ['banana', 'mango', 'orange']
					

Affecting Initial Array (modifying, appending and deleting)

The following examples tests the behavior of the filter method when the array is modified.

// Modifying each words
let words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
const modifiedWords = words.filter( (word, index, arr) => {
  arr[index+1] +=' extra'
  return word.length < 6
})
console.log(modifiedWords)
// Notice there are three words below length 6, but since they've been modified one is returned
// ["spray"]
// Appending new words
words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
const appendedWords = words.filter( (word, index, arr) => {
  arr.push('new')
  return word.length < 6
})
console.log(appendedWords)
// Only three fits the condition even though the `words` itself now has a lot more words with character length less than 6
// ["spray" ,"limit" ,"elite"]
// Deleting words
words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present']
const deleteWords = words.filter( (word, index, arr) => {
  arr.pop()
  return word.length < 6
})
console.log(deleteWords)
// Notice 'elite' is not even obtained as its been popped off `words` before filter can even get there
// ["spray" ,"limit"]
					

规范

规范
ECMAScript (ECMA-262) The definition of 'Array.prototype.filter' in that specification.

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile						Server
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet	Node.js
filter	Chrome 1	Edge 12	Firefox 1.5	IE 9	Opera 9.5	Safari 3	WebView Android ≤37	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0	nodejs 0.1.100

图例

完整支持

完整支持

另请参阅

• Array.prototype.forEach()
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.reduce()
• Array.prototype.find()

元数据

• 最后修改： Aug 6, 2020

相关话题

1. 标准内置对象
2. Array
3. 特性
   1. Array.prototype.length
   2. Array.prototype[@@unscopables]
4. 方法
   1. Array.from()
   2. Array.isArray()
   3. Array.of()
   4. Array.prototype.concat()
   5. Array.prototype.copyWithin()
   6. Array.prototype.entries()
   7. Array.prototype.every()
   8. Array.prototype.fill()
   9. Array.prototype.filter()
   10. Array.prototype.find()
   11. Array.prototype.findIndex()
   12. Array.prototype.flat()
   13. Array.prototype.flatMap()
   14. Array.prototype.forEach()
   15. Array.prototype.includes()
   16. Array.prototype.indexOf()
   17. Array.prototype.join()
   18. Array.prototype.keys()
   19. Array.prototype.lastIndexOf()
   20. Array.prototype.map()
   21. Array.prototype.pop()
   22. Array.prototype.push()
   23. Array.prototype.reduce()
   24. Array.prototype.reduceRight()
   25. Array.prototype.reverse()
   26. Array.prototype.shift()
   27. Array.prototype.slice()
   28. Array.prototype.some()
   29. Array.prototype.sort()
   30. Array.prototype.splice()
   31. Array.prototype.toLocaleString()
   32. Array.prototype.toSource()
   33. Array.prototype.toString()
   34. Array.prototype.unshift()
   35. Array.prototype.values()
   36. Array.prototype[@@iterator]()
   37. get Array[@@species]
5. 继承：
6. Function
7. 特性
   1. Function.arguments
   2. Function.caller
   3. Function.displayName
   4. Function.length
   5. Function.name
8. 方法
   1. Function.prototype.apply()
   2. Function.prototype.bind()
   3. Function.prototype.call()
   4. Function.prototype.toSource()
   5. Function.prototype.toString()
9. Object
10. 特性
    1. Object.prototype.__proto__
    2. Object.prototype.constructor
11. 方法
    1. Object.prototype.__defineGetter__()
    2. Object.prototype.__defineSetter__()
    3. Object.prototype.__lookupGetter__()
    4. Object.prototype.__lookupSetter__()
    5. Object.prototype.hasOwnProperty()
    6. Object.prototype.isPrototypeOf()
    7. Object.prototype.propertyIsEnumerable()
    8. Object.prototype.toLocaleString()
    9. Object.prototype.toSource()
    10. Object.prototype.toString()
    11. Object.prototype.valueOf()
    12. Object.setPrototypeOf()