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

客官°小女子只卖身不卖艺 2023-09-27 20:07 99阅读 0赞

**目录**

闲言碎语

函数科普

查询功能

查询的目标数据

精确查询

模糊查询

--------------------

## 闲言碎语 ##

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

[VUE]: https://blog.csdn.net/weixin_45928161/article/details/124858695