在JavaScript中使用filter（）的4个实用案例

翻译

wx6332e0803afcf 2022-11-24 09:21:15

文章标签 数组 javascript edn 文章分类 后端开发

在JavaScript中使用filter（）的4个实用案例_edn

英文 | https://medium.com/javascript-in-plain-english/4-practical-use-cases-of-using-filter-in-javascript-db46e2ec83b2

翻译 | web前端开发

创建一个包含给定数组元素子集的新数组是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 }]

是不是很容易？