目录
闲言碎语
函数科普
查询功能
查询的目标数据
精确查询
模糊查询
闲言碎语
曾经一无所知的我手撸过一次纯前端的模糊查询功能,当时绞劲脑汁做出来,还颇有成就感,如今回头看就是纯小丑!纯手撸的内容在这里:VUE前端实现“模糊搜索“(纯前端)。
函数科普
在 JavaScript 中,可以使用数组的 filter()
方法来过滤一个数组中不需要的元素,返回一个新的数组。filter()
方法接受一个函数作为参数,该函数用于测试每个数组元素是否符合指定的条件。
下面是一个示例:
const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(filteredNumbers); // 输出 [2, 4]
在上面的例子中,我们首先定义了一个数字数组 numbers
,然后我们使用 filter()
方法过滤出其中的偶数,最终得到了一个新的数组 [2, 4]
。
查询功能
接下来我将根据实例,将精确查询和模糊查询两个功能都进行实现。
查询的目标数据
// articles对象数组
const articles = [
{
articleId: 1,
title: "文章标题1",
authorId:0,
labelArray: ["java","python"],
zone: "知识分享",
content:
"这是一篇文章的摘要,这里只显示前50个字。这是一篇文章的摘要,这里只显示前50个字。",
pageview: 123,
likes: 45,
comments: 67,
pubDate: "2022-04-20 12:30",
},
{
articleId: 2,
title: "文章标题2",
authorId:0,
labelArray: ["java","python"],
zone: "杂谈趣事",
content:
"这是一篇文章的摘要,这里只显示前50个字。这是一篇文章的摘要,这里只显示前50个字。",
pageview: 123,
likes: 45,
comments: 67,
pubDate: "2023-04-20 12:30",
},
];
精确查询
查询pubDate为2023年的文章,并保存在对象数组里
// article.pubDate.slice(0, 4):截取日期字符串前4的字符,即年份
const articlesShow = articles.filter(article => article.pubDate.slice(0, 4) === '2023');
查询zone为杂谈趣事的文章,并保存在对象数组里
const articlesShow = articles.filter(article => article.zone === '杂谈趣事');
模糊查询
根据用户输入的内容,查询article.content里与之匹配的文章,并保存在对象数组里
首先,将输入内容(selectContent)转换为小写字母以进行大小写不敏感的匹配。然后,对于每个文章对象,使用toLowerCase函数将content属性转换为小写字母,使用includes函数判断是否包含selectContent,如果是,则将该对象添加到articlesShow数组中。
let selectContent = "java";
let articlesShow = [];
articlesShow = articles.filter(article =>
article.content.toLowerCase().includes(selectContent.toLowerCase())
);
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net