js数组筛选的方法,js 多条件筛选,JS实现数组过滤从简单到多条件筛选

js数组筛选的方法,js 多条件筛选,JS实现数组过滤从简单到多条件筛选

一般来说,单条件滤波法可以满足要求。本文重点介绍了多重条件下的复合过滤,并列举了几个相关的知识点。有兴趣的可以看看。

目录

单条件单数据过滤

单条件多数据筛选

多条件单一数据筛选

多条件多数据筛选

知识点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数组过滤的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

js数组筛选的方法,js 多条件筛选,JS实现数组过滤从简单到多条件筛选