filter() 对象数组的变化反应 - TypeScript

在 TypeScript 中，数组和对象是最常见的数据类型之一，它们也经常在开发中被过滤和改变。在这篇文章中，我们将探讨如何使用 filter() 方法来对对象数组进行过滤和改变的反应。

背景知识

在 TypeScript 中，对象数组的类型可以使用以下语法来定义：

interface Person {
  name: string;
  age: number;
}

const people: Person[] = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];

其中，Person 接口表示每个对象拥有 name 和 age 字段。

filter() 方法是 JavaScript 数组的一种原型方法，它可以接受一个回调函数作为参数，返回一个新数组，新数组中包含所有符合回调函数条件的元素。

过滤对象数组

使用 filter() 方法来过滤对象数组，可以使用以下方式：

const youngPeople = people.filter((person) => {
  return person.age < 30;
});

console.log(youngPeople);

这将输出：

[
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
]

上述代码中，我们使用 filter() 方法创建了一个新的 youngPeople 数组，其中包含所有 age 小于 30 的人。

注意，filter() 方法并不会改变原始 people 数组。

改变对象数组

要改变对象数组，我们可以使用 map() 方法来创建一个新数组。map() 方法接受一个回调函数作为参数，返回一个包含使用回调函数处理过的所有元素的新数组。

const olderPeople = people.map((person) => {
  return { ...person, age: person.age + 5 };
});

console.log(olderPeople);

这将输出：

[
  { name: "Alice", age: 30 },
  { name: "Bob", age: 35 },
  { name: "Charlie", age: 40 }
]

上述代码中，我们创建了一个新的 olderPeople 数组，其中包含所有人的 age 属性增加了 5。

注意，map() 方法也不会改变原始的 people 数组。

合并过滤和改变

要同时过滤和改变对象数组，我们可以使用 filter() 和 map() 方法的组合。

以下是一个示例代码，该代码将过滤掉年龄小于 30 岁的人，然后将年龄加 5 并返回一个新数组。

const youngAndOlderPeople = people
  .filter((person) => person.age < 30)
  .map((person) => ({ ...person, age: person.age + 5 }));

console.log(youngAndOlderPeople);

这将输出：

[
  { name: "Alice", age: 30 }
]

上述代码中，我们使用 filter() 方法来过滤出所有年龄小于 30 岁的人，然后使用 map() 方法来将这些人的年龄加上 5。

总结

使用 filter() 方法和 map() 方法可以对对象数组进行过滤和改变的反应。在 TypeScript 中，对象数组可以使用接口来定义类型，从而帮助开发人员更好地控制它们的数据类型。