JavaScript Array.filter() 高阶函数详解:筛选、去重与回调参数
本文深入解析JavaScript中Array.filter()高阶函数的核心用法。通过保留奇数、过滤空字符串等实例,展示如何根据返回值true或false筛选元素。重点讲解回调函数的三个参数(元素、索引、原数组),并利用indexOf特性实现数组去重,帮助开发者掌握这一常用数组处理方法。
Array.filter() 基础原理
前言
与map方法类似,Array对象的filter方法同样接收一个函数作为参数。但两者的行为不同:filter会将传入的回调函数依次作用于数组的每一个元素,并根据该函数返回值的布尔类型(true或false)来决定保留或丢弃对应的元素。
filter 常见应用实例
实例介绍
例如,若需在一个Array中删除所有偶数,仅保留奇数,可以按如下方式编写代码:
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
另一个常见场景是删除Array中的空字符串,实现代码如下:
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注:IE9(不包含IE9)以下的版本没有trim()方法
});
arr; // ['A', 'B', 'C']
由此可见,使用filter这个高阶函数的核心在于正确实现一个具备“筛选”逻辑的回调函数。
回调函数参数详解
回调函数
filter接收的回调函数实际上可以接受多个参数。虽然通常我们只使用第一个参数,即Array中的某个元素,但回调函数还可以接收另外两个参数,分别表示该元素在数组中的位置索引以及数组本身:
var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element); // 依次打印'A', 'B', 'C'
console.log(index); // 依次打印0, 1, 2
console.log(self); // self就是变量arr
return true;
});
利用 filter 实现数组去重
利用filter,我们可以巧妙地去除Array中的重复元素,具体实现如下:
var r,
arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
console.log(r.toString());
这种去重方法依赖于indexOf特性:它总是返回元素第一次出现的位置。对于后续的重复元素,其索引与indexOf返回的位置不相等,因此会被filter过滤掉。
总结
以上就是关于JavaScript中Array.filter()常见用法的详细介绍,希望本文的内容能对大家的学习或工作有所帮助。如有任何疑问,欢迎留言交流。
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
