filter方法

Posted 2023-05-04

filter方法？filter是一种在特定条件下缩小数组内容的方法，它用于在回调函数指定的条件下判断单个元素，并仅检索与条件匹配的元素，所以，本篇文章我们就来具体看看javascript中filter过滤器的使用方法。


我们先来看一下filter的基本语法

使用filter时，请指定数组的filter方法。

array.filter(callback [,that]);

对于array，需要指定预先创建的数组对象。

对于回调，可以指定数组元素的值“value”，数组元素的数字索引“index”以及存储数组元素的数组对象“arrayObj”。

对于每个数组元素，callbak返回true的元素将生成为新数组，callcak未返回true的元素将被跳过，并且不包含在新数组中。

我们下面来看具体的示例

以下是通过实际使用filter方法从数组中提取特定条件的示例

从数组中提取奇数

代码如下

var data = [1, 4, 7, 12, 21];
var result = data.filter(function(value)
return value % 2 === 1;
);
console.log(result);

运行结果如下


从数组中删除小于5的数字

代码如下

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
function isMinNum(value)
return (value >= 5);

var filterNum = numbers.filter(isMinNum);
console.log(filterNum);

运行结果如下


从字符串中提取与条件匹配的字符串

代码如下

var items = ["item1", "item2", "item3"];
var filterItems = items.filter(function(value)
return value === "item2";
);
console.log(filterItems); 参考技术A filter
1.定义
filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得" callback 返回 true 或 等价于 true 的值 的元素"创建一个新数组。

var new_array = arr.filter(callback[, thisArg])
复制代码
2.基础用法
var spread = [12, 5, 8, 130, 44]
// 筛选条件符合大于10的新数组
var filtered = spread.filter(n => n >= 10)
console.log('filtered', filtered) // => [12, 130, 44]
复制代码
3.进阶用法
数组对象的键名/键值的搜索

var users = [
'user': 'barney', 'age': 36, 'active': true ,
'user': 'fred', 'age': 40, 'active': false ,
'user': 'ared', 'age': 24, 'active': false ,
'user': 'ered', 'age': 80, 'active': false ,
'abc': 'ered', 'age': 80, 'active': false
]
// 筛选 age等于40或者age等于24的 数组对象
var filtered = users.filter(n => n.age===40 || n.age===24)
console.log('filter后的键名', filtered) // => [user: "fred", age: 40, active: false，user: "ared", age: 24, active: false]
复制代码
4.高阶用法
4.1 数组去重

var spread = [12, 5, 8, 8, 130, 44,130]
var filtered = spread.filter((item, idx, arr) =>
return arr.indexOf(item) === idx;
)
// 筛选符合条件找到的第一个索引值等于当前索引值的数组
console.log('数组去重结果', filtered)
复制代码
感谢评论区@缘童鞋等老铁分享想法，数组去重用ES6的set方法的实现模式

var spread = [12, 5, 8, 8, 130, 44,130]
var setFun = [...new Set(spread)]
console.log('数组去重结果', setFun)
复制代码
感谢评论区@菜鸟_it_老铁分享的字符串去重，大家可以参考一下

var arr=[12, 5, 8, 8, 130, 44,130,'a','b','a']
var obj=;
arr.forEach(function(item)
obj[item]=item;
)
Object.keys(obj)
console.log(Object.keys(obj)) 参考技术B 一、Js自带的map()方法
1.方法概述
map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
2.格式说明

var newArray = ["1","2","3"].map(fucntion(e,i,arr)return parseInt(e,10))

map中回调函数中的第一个参数为：当前正在遍历的元素
map中回调函数中的第二个参数为：当前元素索引
map中回调函数中的第三个参数为：原数组本身
3.使用说明
3.1 支持return返回值；
3.2 return是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份数组中的对应项改变了）
3.3 map只能对元素进行加工处理，产生一个新的数组对象。而不能用它来进行筛选（筛选用filter），为什么不能，看个例子就知道了：
4.例子
4.1 在字符串中使用
在一个String上使用map方法获取字符串中每个字符所对应的ASCII码组成的数组

var map = Array.prototype.map
var a = map.call("Hello World", function(e)return e.charCodeAt(0);)
// a的值为[72,101,108,108,111,32,87,111,114,108,100]
5.易犯错的点

5.1 很多时候，map给回调函数传的是一个值，但是也有可能传2个、3个值，例如下面的例子

var map = Array.prototype.map
var a = map.call("Hello World", function(e)return e.charCodeAt(0);)
// a的值为[72,101,108,108,111,32,87,111,114,108,100]
为什么会这样，因为parseInt就是一个函数，它就是作为map的一个回调函数，parseInt接收两个参数，一个是String，一个是进制

上面的函数就可以化为：

["1","2","3"].map(parseInt(string, radix));
即

["1","2","3"].map(function(string, radix)return parseInt(string, radix))
// 所以才返回结果为：[1, NaN, NaN]

Vue之在methods中使用filter的方法

参考技术A Vue之在methods中使用filter的方法

全局定义filter
在main.js或者其他定义全局filter

那当然，也可以在当前组件中定义filter，这是针对当前组件使用的。

在html使用filter
基本使用

过滤器可以串联：

过滤器是 JavaScript 函数，因此可以接收参数：

在methods使用filter