当前位置：首页 > news >正文

WebAPIs里的filter

news 2025/7/27 9:56:40

基本语法

const 新数组 = 原数组.filter(function(当前元素, 索引, 原数组) {// 返回一个布尔值：true 表示保留该元素，false 表示过滤掉该元素return 条件表达式;
});

参数：
- 回调函数：必选，用于判断元素是否符合条件。
  - 当前元素：当前遍历到的数组元素。
  - 索引：当前元素的索引（可选）。
  - 原数组：调用 filter() 的数组本身（可选）。
- thisArg：可选，指定回调函数中 this 的指向。
返回值：一个新数组，包含所有通过回调函数验证的元素（即回调返回 true 的元素）。

用法

1. 筛选数字数组中大于 5 的元素

const numbers = [1, 6, 3, 8, 2, 10];
const result = numbers.filter(function(num) {return num > 5; // 保留大于 5 的元素
});
console.log(result); // [6, 8, 10]
console.log(numbers); // [1, 6, 3, 8, 2, 10]（原数组不变）

2. 筛选对象数组中符合条件的对象

const students = [{ name: '张三', age: 18, gender: '男' },{ name: '李四', age: 20, gender: '女' },{ name: '王五', age: 19, gender: '男' }
];// 筛选年龄大于 18 的男生
const result = students.filter(function(student) {return student.age > 18 && student.gender === '男';
});
console.log(result); 
// 输出：[{ name: '王五', age: 19, gender: '男' }]

3. 结合箭头函数简化写法

const numbers = [1, 2, 3, 4, 5, 6];
// 筛选偶数（箭头函数简化）
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

4. 去重（筛选首次出现的元素）

const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = arr.filter(function(item, index, self) {// 只保留索引等于首次出现位置的元素return self.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3]