Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【面试真题】Javascript 实现多条件过滤数组

【面试真题】Javascript 实现多条件过滤数组

作者头像
前端修罗场
发布于 2024-02-02 07:03:23
发布于 2024-02-02 07:03:23
29906
代码可运行
举报
文章被收录于专栏:Web 技术Web 技术
运行总次数:6
代码可运行

场景:

有这么一个数组 [{a,'123',b:'345',c:'456',d:'t12'},{a,'234',b:'345',c:'thf2',d:'t12'}], 现在希望能够通过逗号分隔搜索值的输入方式,从数组中过滤出模糊匹配的数组元素。

解析:

  1. 可以使用 JavaScript 的 filter 函数和 indexOf 函数来实现这个功能。

源码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function filterByInput(array, input) {  
    // 解析输入,如果输入有逗号,就将其分割为多个子字符串,然后分别进行过滤  
    const searchValues = input.split(',').map(value => value.trim());  
  
    return array.filter(item => {  
        for (let searchValue of searchValues) {  
            // 对数组中的每个元素进行过滤,如果元素的值包含搜索值,则返回 true  
            if(Object.values(item).toString().toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase())>-1){
                return true
            }
        }  
        // 如果数组中的元素的值都不包含搜索值,则返回 false  
        return false;  
    });  
}  
  
// 测试代码  
const array = [{a:'123',b:'345',c:'456',d:'t12'},{a:'234',b:'345',c:'thf2',d:'t12'}];  
const input = '123,thf2';  // 你可以修改这个输入值进行测试  
console.log(filterByInput(array, input));  // 输出过滤后的数组

同理,你可以使用其他分隔符,如 &

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-01-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript权威指南 - 数组
JavaScript数组是一种特殊类型的对象。 JavaScript数组元素可以为任意类型,最大容纳232-1个元素。 JavaScript数组是动态的,有新元素添加时,自动更新length属性。 JavaScript数组元素索引可以是不连续的,它们之间可以有空缺。
Esofar
2018/09/05
4.2K0
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】
数组基本操作可以归纳为增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会
HelloWorldZ
2024/03/20
3510
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】
JavaScript中的ES7/ES8/ES9/ES10
自从前端开发流行起来,前端的各类技术如雨后春笋般出现,让人应接不暇,几年前还是jq一把梭,现在除了三大主流框架var,何种混合开发也接踵而至,还有可能取代JS的TS出现,我们要跟上时代的步伐,了解最新的技术,走在技术的前沿。
刘亦枫
2020/03/19
4.2K0
JavaScript:string
JavaScript 的字符串是不可变的(immutable),String 类定义的方法都不能改变字符串的内容,返回的是全新的字符串,而不是修改原始字符串。
奋飛
2019/08/15
7350
一篇文章完全掌握 JavaScript 数组操作[每日前端夜话0x87]
可以用被称为方法的多个操作来操作数组。这些方法允许我们对数组进行添加、删除、修改挤执行更多操作。
疯狂的技术宅
2019/06/20
1.2K0
一篇文章完全掌握 JavaScript 数组操作[每日前端夜话0x87]
20个 Javascript 技巧,提高我们的摸鱼时间!
在我们的日常任务中,我们需要编写函数,如排序、搜索、寻找惟一值、传递参数、交换值等,所以在这里分享一下我工作多年珍藏的几个常用技巧和方法,以让大家增加摸鱼的时间。
@超人
2021/07/29
2520
JavaScript String、Array、Object、Date 常用方法小结
  反正闲着也是闲着,稍微整理总结了一下 JavaScript 字符串、数组、对象、时间的常用方法,阿彪出品,必属精品/滑稽。
老猫-Leo
2023/12/11
2850
28个Javascript数组方法,开发者的小抄
最近面试有道题是至少写出 15 个数组方法,数组方法平时经常用到的也就6-7个,突然要一下子写出15个,还是有点卡壳了,今天整理一波,日后好复习。
前端小智@大迁世界
2022/05/09
3360
JavaScript常用数组操作方法,包含ES6方法
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。
李才哥
2019/07/10
4660
JavaScript一些常用 API整理汇总
来源 | https://blog.limeichao.cn/article/9796ce43.html
前端达人
2021/03/16
6870
JavaScript一些常用 API整理汇总
06_JavaScript数组
保存一个班级学生信息,每个数组元素都代表一个学生,而每个学生都使用一个一维数组分别表示其姓名、学号、年龄等信息,这样通过一个变量即可有规律的保存一个班级的所有学生信息,方便开发时进行处理。
张哥编程
2024/12/13
1850
分享 20 个 Javascript 中的数组方法,收藏
forEach()按索引升序为数组中的每个元素调用一次提供的callbackFn函数。对于已删除或未初始化的索引属性,不会调用它。
艾编程
2022/12/28
1.7K0
我在近期求职中遇到的前端面试问题及其解法
在今天的文章中,我想跟大家聊聊自己最近在 COVID-19 疫情下的求职经历中遇到的问题。另外,我还把自己的准备工作整理成一份资源清单供大家参考。
深度学习与Python
2020/09/14
1K0
JavaScript数组
数组实例的find()方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
六个周
2022/10/28
7930
19.JavaScript
简介 JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型 1.注释 单行 // 多行 /* */ 2.引用方式 <head> <meta charset="UTF-8"> <title></title> <script src="commons.js"></script> </head> <body> <script> alert('derek') </script> </body> 3.JavaS
zhang_derek
2018/04/11
1K0
前端js手写题经常忘,记录一下
使用时间戳的节流函数会在第一次触发事件时立即执行,以后每过 wait 秒之后才执行一次,并且最后一次触发事件不会被执行
helloworld1024
2022/09/23
1K0
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
因为它简单,好用,清晰,可拓展性强,而且比for、foreach还有非常不常用的while、do...while高级,代码清晰,可读性强,代码就看起来很优雅,如果都是嵌套循环和嵌套回调,看起来就是一团乱麻,可读性差,很不优雅。
watermelo37
2025/01/22
7340
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
javascript数组常用函数与实战总结
在node.js后端开发过程中,数组这种数据类型(Object类型)再常见不过,本文主要介绍数组的一些常见函数,以及在实战开发过程中能更好的操作数组的lodash包。
coder_koala
2019/07/30
1.1K0
JavaScript中常用的数组方法总结
forEach()函数是JavaScript数组提供的一个用于遍历数组的方法。它接受一个回调函数作为参数,并且对数组中的每个元素依次调用该回调函数。
九仞山
2023/10/14
3900
从 JavaScript 发展历史中聊 ECMAScript(ES6-ES11) 新功能
JavaScript 是当今使用最广泛的、发展最好的前后端(后端主要是 Nodejs)语言,如果我们想要灵活使用 JavaScript,我们首先需要了解的就是 JavaScript 和 ECMAScript(ES) 的基础知识及发展历程。
coder_koala
2020/03/20
6.9K0
相关推荐
JavaScript权威指南 - 数组
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验