一般来说,单条件滤波法可以满足要求。本文重点介绍了多重条件下的复合过滤,并列举了几个相关的知识点。有兴趣的可以看看。
目录
单条件单数据过滤
单条件多数据筛选
多条件单一数据筛选
多条件多数据筛选
知识点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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。