通过 5 个示例了解 JavaScript 数组过滤器功能
JavaScript 数组有一个 filter()
方法 ,让您创建一个只包含您需要的元素的新数组。 这里有 5 个常见的例子来演示如何使用 filter()
。
1、过滤基元数组
这 filter()
函数接受一个回调,并返回一个新数组,其中仅包含 callback
回归真实。 这意味着您可以使用 filter()
过滤基元数组,例如查找以“A”开头的字符串数组中的所有元素,或查找数组中的所有偶数:
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
nums.filter(function isEven(num) {
return num % 2 === 0;
}); // [2, 4, 6, 8, 10]
2、过滤对象数组
返回的任何同步函数 true
或者 false
是有效的 filter()
回调函数。 因此,您可以通过对象的任何属性过滤对象数组。 例如,下面是如何根据 team
财产。
const characters = [
{ name: 'Batman', team: 'Justice League' },
{ name: 'Hulk', team: 'Avengers' },
{ name: 'Flash', team: 'Justice League' },
{ name: 'Iron Man', team: 'Avengers' },
{ name: 'Deadpool', team: 'X-Force' }
];
const avengers = characters.filter(character => character.team === 'Avengers');
3、删除一个值
在使用依赖于 不变性 (如 React)时,您可能会看到以下模式:
let characters = [
{ name: 'Batman', team: 'Justice League' },
{ name: 'Hulk', team: 'Avengers' },
{ name: 'Flash', team: 'Justice League' },
{ name: 'Iron Man', team: 'Avengers' },
{ name: 'Deadpool', team: 'X-Force' }
];
const deadpool = characters[4];
// Create a new array that excludes exactly one element
characters = characters.filter(character => character !== deadpool);
这 filter()
函数是在不修改现有数组的情况下“删除”元素的最常用方法。 这 Array#splice()
方法 修改现有数组,这违反了不变性。
4、使用Lodash的 matches()
洛达什的 matches()
function 是一个简洁的工具,用于以声明方式创建过滤器函数。 这 matches()
函数接受一个参数 source
, 并返回一个返回的函数 true
如果你
传递一个与它具有相同值的对象 source
适用 仅 于 source
.
例如,在下面的示例中, fn
返回 true
当且仅当您使用具有 lastName
等于 Crusher
和 rank
等于 Ensign
。
const _ = require('lodash');
const fn = _.matches({ lastName: 'Crusher', rank: 'Ensign' });
因为 _.matches()
返回一个函数,您可以将其作为参数传递给 Array#filter()
。
const arr = [
{ firstName: 'Will', lastName: 'Riker', rank: 'Commander' },
{ firstName: 'Beverly', lastName: 'Crusher', rank: 'Commander' },
{ firstName: 'Wesley', lastName: 'Crusher', rank: 'Ensign' }
];
const fn = _.matches({ lastName: 'Crusher', rank: 'Ensign' });
arr.filter(fn); // [{ firstName: 'Wesley', lastName: 'Crusher', rank: 'Ensign' }]
5、与其他功能助手交互
这 filter()
功能特别有助于结合 map()
和 reduce()
.
例如,假设您有一个产品数组,并且您想要计算该产品数组中所有手机的平均成本。 您可以通过 3 个步骤执行此操作:
filter()
获得一系列具有category = 'Phones'
map()
获取一系列价格reduce()
计算平均值
const products = [
{ name: 'iPhone', price: 800, category: 'Phones' },
{ name: 'Samsung Galaxy', price: 900, category: 'Phones' },
{ name: 'Asus Zenbook', price: 1300, category: 'Laptops' }
];
const averagePrice = products.
filter(product => product.category === 'Phones').
map(product => product.price).
reduce((avg, price, arr) => avg + price / arr.length, 0);
averagePrice; // 850
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论