本文详细解析JavaScript中filter()方法的定义、语法及返回值特性，强调其不改变原数组的行为。通过多个代码实例展示如何筛选大于特定值的元素、过滤空字符串及偶数。重点讲解filter结合indexOf实现数组及对象去重的原理，并对比两者单独使用的场景，帮助开发者掌握核心过滤技巧。
关于filter()方法的使用
常见应用场景包括：从后端接口获取数据列表后，对符合特定条件的数据进行筛选；或者在获取数据后，执行如英文首字母大写转换、数组去重等操作。
定义和用法
filter用于对数组进行过滤。filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意：
filter() 不会对空数组进行检测；不会改变原始数组
语法
array.filter(function(currentValue,index,arr), thisValue)
返回值：
返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
实例
实例1
返回数组nums中所有大于5的元素。
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => {
return num > 5;
});
console.log(res); // [6, 7, 8, 9, 10]实例2
对数组进行过滤，筛选出年龄大于 18岁的数据
const arr = [
{
name: 'tom1',
age: 23
},
{
name: 'tom2',
age: 42
},
{
name: 'tom3',
age: 17
},
{
name: 'tom4',
age: 13
},
]
const res = arr.filter(item => item.age > 18);
console.log(res); //[{name: 'tom1',age: 23},{name: 'tom2',age: 42}]
console.log(arr);
实例3
利用 filter 遍历出所有偶数
let arr = [56, 15, 48, 3, 7];
let newArr = arr.filter(function (x) {
return x % 2 === 0;
});
console.log(newArr)
// [56, 48]实例4
把一个Array中的空字符串删掉，可以这么写：
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']实例5
利用 filter 进行数组去重
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
var arr = [1,1,'RUNOOB','RUNOOB',true,true,15];
console.log(unique(arr))
// [1, "RUNOOB", true, 15] var arr = ['apple','strawberry','banana','pear','apple','orange','orange','strawberry']
var temp_arr = arr.filter(function (element, index, self) {
return self.indexOf(element) === index
})
console.log(temp_arr)indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了，所以重复的元素仅会保留第一个位置的元素
filter()和indexO一起使用能做啥
分开使用
第一：js中indexof（）检测字符在字符串中首次出现的位置（下标），若未匹配到则返回-1。
注意：检测的字符不能为空哦，否则会返回第一个字符的下标。
第二：js中的filter的方法，筛选数组中符合条件的，将每一次符合条件的字符放入新数组中！
结合使用
场景一：去除数组中重复字符
场景2：去除数组对象中的重复对象
只有掌握好零星的知识点，才能懂的结合一起使用！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。