一般来说，单条件滤波法可以满足要求。本文重点介绍了多重条件下的复合过滤，并列举了几个相关的知识点。有兴趣的可以看看。
目录
单条件单数据过滤
单条件多数据筛选
多条件单一数据筛选
多条件多数据筛选
知识点1: Object.key()获取数组索引或对象属性知识点2:JS中的falsy
知识点：array.every和Array.some的区别
知识点4:数组的深层拷贝和浅层拷贝
想想看：递归算法的优化
我在上一家公司工作的时候，有一个要求是在前端完成筛选功能，一次性得到所有数据，然后根据条件进行筛选。通常屏幕是给后台的界面的。在数据量不大的情况下，有些人可能会遇到前端屏幕的情况。写了这篇文章和大家分享。有问题请指出来，互相学习。
总的来说，数组筛选法可以满足单条件筛选的要求。本文重点介绍多条件下的化合物筛选，并列举了几个相关知识点。
这里有很多。
//这是示例中经过筛选的数组
var aim=[
{姓名：'安妮'，年龄：23，性别：'女' }，
{姓名：'莱拉'，年龄：16岁，性别：'女' }，
{姓名：'杰伊'，年龄：19岁，性别：'男性' }，
{姓名：'马克'，年龄：40岁，性别：'男性' }
]
单条件单数据筛选
根据单个名称，使用filter方法确定该名称是否是目标名称。
//按单个名称筛选
函数filterByName(aim，name) {
返回aim . filter(item=item . name==name)
}
//输入aim 'Leila '。预期输出为[{姓名：' leila '，年龄：16，性别：'女性' }]
console.log(filterByName(aim，' leila '))
单条件多数据筛选
根据多个名字，在这里，我们用for循环遍历目标数组，然后用find方法找到它，推送到结果数组。即使find方法同名，我们也能得到想要的结果。for循环可以用数组的一些遍历方法代替，代码可以简化。该示例是一个通用表达式。
//按多个名称过滤
函数filterByName1(aim，nameArr) {
假设结果=[]
for(设I=0；I name arr . length；i ) {
result . push(aim . find(item=item . name=name arr[I])
}
回送结果
}
//输入aim ['Anne '，' Jay']
//预期输出为[{姓名：'安妮'，年龄：23，性别：'女' }，{姓名：'杰伊'，年龄：19，性别：'男' }]
console.log(filterByName1(aim，['Leila '，' Jay']))
BUG改进后
多条件单一数据筛选
根据单个姓名或单个年龄，使用过滤方法判断条件是否为or。
//按姓名或年龄过滤
函数filterByName2(目标、名称、年龄){
return aim . filter(item=item . name==name | | item . age==age)
}
console.log(filterByName2(aim，' Leila '，19))
多条件多数据筛选
一开始我用了一个很蠢的双for循环来做，但是很慢，没有达到预期的效果。具体心路历程太遥远。下面简单介绍一下下面的筛选算法。
首先把所有的过滤条件都塞到一个对象中，用object对象的keys方法得到过滤条件的名称，需要过滤的条件有哪些是名称？年龄？性别？
然后使用filter方法过滤目标数据，如下所示
基于姓名和年龄的多元素筛选
//基于姓名和年龄的多元素筛选
导出函数multiFilter(数组，过滤器){
const filterKeys=Object.keys(过滤器)
//过滤通过标准的所有元素
返回array.filter((item)={
//动态验证所有筛选条件
return filterKeys.every(key={
//当过滤器为空时忽略Anne
如果(！过滤器[键]。长度)返回true
回归！~filters[key]。索引Of(项目[关键字])
})
})
}
/*
*这段代码不是我的原创，有兴趣的可以去找原作者喜欢。
*作者：@作者https://gist.github.com/jherax
*我在这段代码中只增加了一行，解决了某些筛选条件被清除时，整个筛选失败的问题。
*/
var过滤器={
姓名：['莱拉'，'杰伊']，
年龄：[]
}
/*结果：
*[{姓名：'蕾拉'，年龄：16，性别：'女' }，
* {姓名：' Jay '，年龄：19，性别：'男' }]
*/
这里举例，判断每条数据的名称值是否在filters.name数组中，如果是，则返回true如果判断filters.age为空数组，则直接返回true。空数组模拟了年龄条件被清除的情况，我们仍然可以得到正确的过滤数据。
知识点1: Object.key() 获取数组索引或者对象属性
var arr=['a '，' b '，' c ']；
console . log(object . keys(arr))；
//['0', '1', '2']
var obj={ 0: 'a '，1: 'b '，2:' c ' }；
console . log(object . keys(obj))；
//['0', '1', '2']
var anObj={ 100: 'a '，2: 'b '，7:' c ' }；
console . log(object . keys(anObj))；
//['2 '，' 7 '，' 100']猜猜为什么？
知识点二：JS中的falsy
falsy : 0，false，''，null，未定义，NaN
在判决书中，只有上述六种情况会是假的，其余都是真的。
var a；
如果(a！=nulltypeof(a)！=undefineda！=''){
//只有在有内容时才执行的代码。
}
如果(！a){
//只有在有内容时才执行的代码。
}
知识点：array.every和Array.some的区别
我的理解是，在遍历数组时：
Array.every的条件是“与”，都为真，条件都为真，则为真，有一个为假，则返回假。
Array.some的条件是“或”，为真则为真，所有条件为假则为假。
这里有一个例子。
//判断每个名字都是安妮？
let data every=aim . every(item=item . name===' Anne ')//false
let data every=aim . some(item=item . name===' Anne ')//true
//判断每个名字都是字符串？
let data every=aim . every(item=type of item . name===' string ')//true
let data every=aim . some(item=type of item . name===' string ')//true
知识点4:数组的深层拷贝和浅层拷贝
最近参加了一些前端的面试。深抄和轻抄是我最喜欢问的问题之一。一题考查数据类型、数组运算、递归算法等。
因为数组在js中是引用类型，所以简单复制的时候就复制了它的引用关系。在对获取的数据进行筛选时，我不想影响到原始数据，所以想用“深度复制”的方式获取与原始数据数据结构相同但相互独立的数据，而不是仅仅复制其引用关系。
//我经常用的方法，项目大的话不建议用。
让obj 1=JSON . parse(JSON . stringify(obj))
//深度克隆
函数deepClone(o1，o2) {
对于(让k进入o2) {
if (typeof o2[k]==='object') {
O1[k]={ }；
deepClone(o1[k]，O2[k])；
}否则{
O1[k]=O2[k]；
}
}
}
想想看：递归算法的优化
这个知识点和本文关系不大。抱歉之前误导了你。
这是我从掘金小册子的前端采访指南上看到的。我在讲算法的时候提到了递归算法的优化。第一眼看到，我很惊讶，但是我还没有在项目中使用过。有兴趣的话可以试试。这是斐波那契数列。您可以在浏览器中点击它，并尝试不使用缓存的操作数和使用缓存的操作数之间的差异。
设count=0；
函数fn(n) {
let cache={ }；
function _fn(n) {
if (cache[n]) {
返回缓存[n]；
}
数数；
if (n==1 || n==2) {
返回1；
}
设prev=_ fn(n-1)；
cache[n-1]=prev；
设next=_ fn(n-2)；
cache[n-2]=next；
返回上一页下一页；
}
return _ fn(n)；
}
设count 2=0；
函数fn2(n) {
count2
if (n==1 || n==2) {
返回1；
}
返回fn2(n-1)fn2(n-2)；
}
这就是这篇关于JS数组过滤从简单到多条件过滤的文章。有关JS数组过滤的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。