打字稿 | 数组 filter() 方法

介绍

在 JavaScript 中，数组是一种用于存储多个元素的数据结构。数组的 filter() 方法是 Array 对象的原生方法之一，用于在数组中过滤元素，并返回一个新的数组。

filter() 方法通过传入一个回调函数来过滤数组的元素。回调函数会对每个元素进行一次调用，根据回调函数返回的布尔值决定是否保留该元素。如果回调函数返回 true，则保留该元素，否则将其从新数组中移除。

语法

arr.filter(callback(element[, index[, array]])[, thisArg])

• callback 是回调函数，接收三个参数，分别为：
  • element：当前正在处理的元素。
  • index（可选）：当前正在处理的元素的索引。
  • array（可选）：调用 filter() 方法的数组。
• thisArg（可选）：在执行回调函数时，用作 this 值的对象。

示例

const numbers = [1, 2, 3, 4, 5, 6];

const filteredNumbers = numbers.filter((number) => {
  return number % 2 === 0; // 过滤出偶数
});

console.log(filteredNumbers); // 输出 [2, 4, 6]

在上面的示例中，我们定义了一个包含数字的数组 numbers。然后我们使用 filter() 方法来过滤出其中的偶数。回调函数 (number) => number % 2 === 0 检查每个元素是否为偶数，如果是，则返回 true，表示保留该元素。

进一步示例

过滤出长度超过 5 的字符串

const words = ['hello', 'world', 'javascript', 'filter'];

const filteredWords = words.filter((word) => {
  return word.length > 5;
});

console.log(filteredWords); // 输出 ['javascript', 'filter']

上述示例中，我们使用 filter() 方法过滤出长度超过 5 个字符的字符串。通过回调函数 word => word.length > 5，我们检查每个字符串的长度是否大于 5，返回 true 表示保留。

过滤出满足多个条件的对象

const students = [
  { name: 'Alice', grade: 85 },
  { name: 'Bob', grade: 75 },
  { name: 'Charlie', grade: 90 },
  { name: 'Dave', grade: 80 }
];

const filteredStudents = students.filter((student) => {
  return student.grade >= 80 && student.name.startsWith('C');
});

console.log(filteredStudents); // 输出 [{ name: 'Charlie', grade: 90 }]

在上述示例中，我们有一个包含学生信息的数组 students。我们使用 filter() 方法过滤出成绩大于等于 80 分且姓名以字母 'C' 开头的学生。通过回调函数 (student) => student.grade >= 80 && student.name.startsWith('C')，我们检查每个学生对象是否满足条件，返回 true 表示保留。

注意事项

• filter() 方法不会改变原数组，而是返回一个新的数组。
• 如果回调函数没有返回任何元素（即全都返回 false），则返回一个空数组。
• 如果没有提供回调函数，filter() 方法将返回与原数组相同的新数组。

详情请参阅 MDN 文档。