JavaScript 中如何在数组上同时应用映射和过滤器

在 JavaScript 编程中，对数组进行操作是一项常见任务。映射（map）和过滤（filter）是两个强大的数组方法，它们能分别改变数组元素和筛选出符合条件的元素。有时，我们需要在数组上同时应用这两种操作，以高效地处理数据。

映射（map）方法会创建一个新数组，其元素是原数组中每个元素经过某种处理后的结果。例如，我们有一个包含数字的数组，想要得到每个数字的平方组成的新数组，就可以使用 map 方法：

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((number) => number * number);
console.log(squaredNumbers); 

过滤（filter）方法则是创建一个新数组，新数组中的元素是原数组中满足特定条件的所有元素。比如，从一个数字数组中筛选出所有偶数：

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); 

那么如何同时应用映射和过滤器呢？一种方法是先使用 filter 方法筛选出符合条件的元素，再对筛选后的数组使用 map 方法进行映射操作。例如，我们有一个包含人员信息的数组，每个元素是一个对象，包含姓名和年龄属性。现在要筛选出年龄大于 18 岁的人员，并将他们的姓名转为大写：

const people = [
  { name: 'Alice', age: 16 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 22 }
];

const filteredAndMapped = people
.filter((person) => person.age > 18)
.map((person) => person.name.toUpperCase());

console.log(filteredAndMapped); 

另一种方式是使用 reduce 方法来同时实现映射和过滤。虽然 reduce 方法相对复杂一些，但它提供了一种统一的方式来处理各种数组操作。在 reduce 中，我们可以在累加过程中进行条件判断和元素转换。

const people = [
  { name: 'Alice', age: 16 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 22 }
];

const result = people.reduce((acc, person) => {
  if (person.age > 18) {
    acc.push(person.name.toUpperCase());
  }
  return acc;
}, []);

console.log(result); 

了解如何在 JavaScript 数组上同时应用映射和过滤器，能极大地提升数据处理的效率和代码的简洁性，让我们在编写代码时更加得心应手。无论是小型项目还是大型应用，这两种方法的巧妙运用都将发挥重要作用。