纯前端！超简单！实现查询功能

目录

闲言碎语

函数科普

查询功能

查询的目标数据

精确查询

模糊查询

---

闲言碎语

曾经一无所知的我手撸过一次纯前端的模糊查询功能，当时绞劲脑汁做出来，还颇有成就感，如今回头看就是纯小丑！纯手撸的内容在这里：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())
);