js 增加filter属性

在JavaScript中，filter 是数组的一个方法，用于创建一个新数组，包含通过所提供函数实现的测试的所有元素。filter 方法不会改变原始数组，而是返回一个新的筛选后的数组。

基本概念

filter 方法接受一个回调函数作为参数，这个回调函数对数组的每个元素执行测试。如果回调函数返回 true，则当前元素会被包含在新数组中；如果返回 false，则不会被包含。

语法

const newArray = array.filter(callback(element, index, array), thisArg);

• callback：用于测试数组中每个元素的函数。它接受三个参数：
  • element：当前正在处理的元素。
  • index（可选）：当前元素的索引。
  • array（可选）：调用 filter 方法的数组。
• thisArg（可选）：执行回调函数时用作 this 的值。

示例代码

假设我们有一个数字数组，我们想要筛选出所有的偶数：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // 输出: [2, 4, 6, 8, 10]

使用箭头函数可以使代码更加简洁：

const evenNumbers = numbers.filter(number => number % 2 === 0);

应用场景

• 数据筛选：根据特定条件过滤数组中的数据。
• 去重：结合 Set 或其他方法，可以实现数组去重。
• 复杂条件筛选：可以组合多个条件进行复杂的数据筛选。

注意事项

• filter 方法不会改变原始数组，而是返回一个新的数组。
• 如果回调函数对每个元素都返回 true，则返回的新数组将与原数组相同。
• 如果回调函数对每个元素都返回 false，则返回的新数组将是一个空数组。

解决问题的示例

假设我们有一个用户列表，我们想要筛选出所有年龄大于18岁的用户：

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 18 },
  { name: 'David', age: 22 }
];

const adults = users.filter(user => user.age > 18);

console.log(adults); // 输出: [{ name: 'Alice', age: 25 }, { name: 'David', age: 22 }]

通过这种方式，我们可以轻松地根据特定条件筛选数组中的数据。