按元素过滤数组对象 - Javascript

在Javascript中，我们经常需要对数组对象进行过滤，只保留符合特定条件的元素。本文将介绍如何使用Javascript中的内置函数进行过滤，及其使用场景。

filter函数

Javascript中的数组有许多内置函数，其中filter函数可以用于过滤数组元素。它采用一个函数作为参数，该函数将被应用于数组中的每个元素，只有满足该函数返回true的元素才会被保留。

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter((elem) => {
  return elem % 2 === 0;
});
console.log(filteredArr); // Output: [2, 4]

上述代码创建了一个包含1到5的数组，然后使用filter函数保留了其中的偶数。最终输出的是包含[2, 4]的过滤后的新数组。

使用场景

filter函数可用于许多场景，以下是一些常见用法：

过滤复杂对象

filter函数同样适用于过滤包含复杂对象的数组。我们可以使用这个函数来筛选符合特定条件的对象，或移除我们不需要的对象。

例如，假设我们有一个包含学生信息的数组，我们希望从中筛选出年龄在18到25岁之间的学生：

const students = [
  { name: "John", age: 20 },
  { name: "Jane", age: 17 },
  { name: "Joe", age: 30 },
  { name: "Adam", age: 22 }
];
const filteredStudents = students.filter((student) => {
  return student.age >= 18 && student.age <= 25;
});
console.log(filteredStudents); 
// Output: [{ name: "John", age: 20 }, { name: "Adam", age: 22 }]

过滤空值或无效值

有时我们从接口或用户输入中获取到的数据可能包含一些无效数据，我们需要将它们过滤掉，只保留有效数据。

例如，假设我们有一个数组，其中包含一些无效值（如空值、null、NaN、undefined等），希望将其过滤掉：

const arr = [1, null, 2, undefined, 3, NaN, 4, "", 5];
const filteredArr = arr.filter((elem) => {
  return elem;
});
console.log(filteredArr); // Output: [1, 2, 3, 4, 5]

这里我们使用了Javascript的隐式类型转换来将所有无效值转换为false，然后过滤掉它们。最终输出的是包含[1, 2, 3, 4, 5]的过滤后的新数组。

总结

filter函数是Javascript中一个非常有用的函数，它可以帮助我们轻松过滤数组中的元素，使代码更加简洁、可读并且易于维护。我们可以使用filter函数来过滤复杂对象、无效值等。