通过 5 个示例了解 JavaScript 数组过滤器功能

发布于 2022-05-27 23:12:11 字数 4235 浏览 1237 评论 0

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等于 Crusherrank等于 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 个步骤执行此操作:

  1. filter()获得一系列具有 category = 'Phones'
  2. map()获取一系列价格
  3. 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

文章
评论
24516 人气
更多

推荐作者

fangs

文章 0 评论 0

朱染

文章 0 评论 0

zhangcx

文章 0 评论 0

Willy

文章 0 评论 0

taohaoge

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文