在JavaScript中使用filter()的4个实用案例

web前端开发

共 3101字,需浏览 7分钟

 ·

2020-11-21 23:51

英文 | https://medium.com/javascript-in-plain-english/4-practical-use-cases-of-using-filter-in-javascript-db46e2ec83b2
翻译 | web前端开发(ID:web_qdkf)

创建一个包含给定数组元素子集的新数组是JavaScript中最常见的任务之一。
除了使用循环语句,我们还可以使用filter(),它是一种更短,更简洁的方式。

1、删除重复的值

这个有点棘手。我们将利用indexOf()功能。它是一个内置函数,该函数可以返回数组中给定元素的第一个索引。
我们可以使用它来形成一个条件,以删除数组中的重复值,如下所示。
const numbers = [3, 12, 54, 12, 4, 4, 3, 12, 16];const filteredNumbers = numbers.filter((number, index) => numbers.indexOf(number) === index);console.log(filteredNumbers); // [3, 12, 54, 4, 16]
我们使用回调函数的第二个参数,它是当前元素的索引。
在这里,我们将indexOf()函数返回的索引与当前元素的实际索引进行比较。如果它们不同,则当前元素为重复值。
以上面的代码段中的数组为例。当实际索引为时3,相邻元素的值为12。但是,如果我们使用indexOf()该元素,则返回的索引是1因为该元素12首次出现在index处1。因此12是重复值之一。

2、删除无效值

无效值被认为是可能导致错误和意外行为的值。
以年龄为例。如果年龄是定义的数字,则该年龄有效。
现在,我们要求过滤所有有效年龄的人,请看下面的代码。
const people = [ { name: ‘Amy’, gender: ‘female’, age: ‘28’ }, { name: ‘James’, gender: ‘male’, age: 13 }, { name: ‘Victor’, gender: ‘male’, age: null }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Simon’, gender: ‘male’, age: undefined }, { name: ‘Anna’, gender: ‘female’, age: 21 }, { name: ‘Jane’, gender: ‘female’, age: NaN }];const filteredPeople = people.filter(person => person.age !== undefined && typeof person.age === ‘number’ && !isNaN(person.age));console.log(filteredPeople); // [{ name: ‘James’, gender: ‘male’, age: 13 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Anna’, gender: ‘female’, age: 21 }]

3、过滤数字数组

这是最简单的用法。
假设你有一个数字数组,并且只需要从该数组中提取奇数。
const numbers = [23, 54, 1, 3, 72, 28];const oddNumbers = numbers.filter(number => number % 2 !== 0);console.log(oddNumbers); // [23, 1, 3]
或者你想创建一个包含给定数组中所有素数的新数组。
const isPrime = number => { if (number === 1) return false; if (number === 2) return true; for (let i = 2; i < number; i++) { if (number % i === 0) return false; }
return true;}const numbers = [23, 54, 1, 3, 72, 28];const oddNumbers = numbers.filter(isPrime);console.log(oddNumbers); // [23, 3]

4、过滤对象数组

尽管一个对象比数字更复杂,但是使用filter()仍然可以保持简单。
例如,假设我们有很多人。要求是找到所有年龄大于18岁的人。
const people = [ { name: ‘Amy’, gender: ‘female’, age: 28 }, { name: ‘James’, gender: ‘male’, age: 13 }, { name: ‘Victor’, gender: ‘male’, age: 17 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Simon’, gender: ‘male’, age: 33 }];const filteredPeople = people.filter(person => person.age > 18);console.log(filteredPeople); // [{ name: ‘Amy’, gender: ‘female’, age: 28 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Simon’, gender: ‘male’, age: 33 }]
如果是,我们需要找出所有年龄大于18岁的女性,这时,我们只需向回调函数添加一个附加条件即可。
const people = [ { name: ‘Amy’, gender: ‘female’, age: 28 }, { name: ‘James’, gender: ‘male’, age: 13 }, { name: ‘Victor’, gender: ‘male’, age: 17 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Simon’, gender: ‘male’, age: 33 }];const filteredPeople = people.filter(person => person.age > 18 && person.gender === ‘female’);console.log(filteredPeople); // [{ name: ‘Amy’, gender: ‘female’, age: 28 }]
是不是很容易?

结论

以上就是一些关于在JS中使用filter()的4个实例。如果你还知道其他用例吗?请在下面的评论留言区里告诉我们。
感谢阅读。

浏览 21
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报