在JavaScript中,filter()
方法是一个数组方法,它创建一个新数组,其包含通过所提供函数实现的测试的所有元素。换句话说,filter()
方法遍历数组,对数组中的每个元素执行一个测试(由提供的函数实现),并返回一个新数组,该数组包含所有通过测试的元素。
filter()
方法不会改变原数组,而是返回一个新数组。
语法
javascript复制代码
const newArray = arr.filter(callback(element[, index[, array]])[, thisArg]) |
callback
:用来测试每个元素的函数。它接收三个参数:element
:当前遍历到的元素。index
(可选):当前遍历到的索引(如果提供了)。array
(可选):正在操作的数组(如果提供了)。
thisArg
(可选):执行callback
时用作this
的值。
示例
过滤出数组中的所有偶数
javascript复制代码
const numbers = [1, 2, 3, 4, 5, 6]; | |
const evenNumbers = numbers.filter(function(number) { | |
return number % 2 === 0; | |
}); | |
console.log(evenNumbers); // 输出: [2, 4, 6] |
使用箭头函数简化
javascript复制代码
const numbers = [1, 2, 3, 4, 5, 6]; | |
const evenNumbers = numbers.filter(number => number % 2 === 0); | |
console.log(evenNumbers); // 输出: [2, 4, 6] |
过滤出对象数组中满足条件的对象
javascript复制代码
const products = [ | |
{ name: 'Apple', category: 'fruit' }, | |
{ name: 'Carrot', category: 'vegetable' }, | |
{ name: 'Banana', category: 'fruit' } | |
]; | |
const fruits = products.filter(product => product.category === 'fruit'); | |
console.log(fruits); | |
// 输出: [{ name: 'Apple', category: 'fruit' }, { name: 'Banana', category: 'fruit' }] |
注意事项
filter()
方法不会改变原数组。- 如果没有元素通过测试,则返回一个空数组。
- 回调函数
callback
只会被那些已经被赋值的索引调用;对于那些已经被删除或者从未被赋值的索引,不会调用callback
。 - 回调函数
callback
可以被设置为null
,此时,将返回一个新数组,包含所有原数组中的元素(等同于不调用filter()
方法)。然而,通常不会这样使用。