前端JS本地模糊搜索实现：利用Object.assign、filter和indexOf优化性能

本文介绍如何在Vue、React等前端框架中实现本地数据的模糊搜索功能，以减少服务端请求并提升用户体验。通过结合Object.assign处理数据、filter过滤数组以及indexOf进行字符串匹配，展示了一个完整的DEMO实现过程，帮助开发者掌握前端数据处理技巧。

一、项目前景

随着Vue和React在实际开发中的应用日益广泛，前端对数据的处理需求也越来越多。本文的主要目的是演示如何对服务端返回的数据进行处理，根据特定条件进行模糊查询，从而减少向服务端发送请求的次数，提高性能和用户体验。下面将通过一个简单的DEMO来实现模糊查询的功能：

测试用的数据如下：


var data = [{
            "title": "你的失恋修复期有多长？",
            "title_image": "https://img.doutuimao.net/dtmimg/b7c9ec393414982682e5a477eb995b55",
            "desc": "美食餐饮测试一下你的失恋修复期有多长",
            "id": "2",
            "num": 951357,
            "flag": "01"
    },
    {
            "title": "你的撒娇指数有多高？",
            "title_image": "https://img.doutuimao.net/dtmimg/60d8ed86d1f72357c194506270c72ac1",
            "desc": "美食餐饮会撒娇的女人最好命，你有多会撒娇？你撒起娇来魅力又是怎么样的？快来测测吧！",
            "id": "3",
            "num": 963258,
            "flag": "01"
    },
    {
            "title": "你未来的结婚方式？",
            "title_image": "https://img.doutuimao.net/dtmimg/538632e75159ce8e586778d289c66a11",
            "desc": "相信很多人都对自己未来的结婚方式充满期待，想知道你未来的结婚方式吗？",
            "id": "4",
            "num": 879564,
            "flag": "01"
    },
]

二、涉及知识点

Object.assign()的用法

Object.assign方法用于将源对象（source）的所有可枚举属性复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后续参数均为源对象。


// 处理原始数组
let arrnew = data.map((item, index) => {
    return Object.assign({}, {
            'desc': item.desc,
    })
})

filter()方法

filter()方法用于过滤数组元素，创建一个包含通过所提供函数测试的所有元素的新数组。filter()不会对空数组进行检测，也不会改变原始数组。

indexOf()模糊查询

indexOf()方法可返回某个指定字符串值在字符串中首次出现的位置。如果检索的字符串值没有出现，则该方法返回-1。与filter()方法配合，可以检测数组中是否包含输入的值，并返回结果。


var newData = arrnew.filter(item => {
    if (item.desc.indexOf(value) > -1) { //indexOf方法中如果xxx.indexOf("")返回值为0
            return item
    }
    return newData
})

DEMO完整代码如下：


<div class="wrap">
        <input type="text" id="demo">
        <ul id="newsBox">
        </ul>
</div>
function creat() {
        var value = input.value;
        var html = "";
        let arrnew = data.map((item, index) => {
                return Object.assign({}, {
                        'desc': item.desc,
                })
        })

        var newData = arrnew.filter(item => {
                if (item.desc.indexOf(value) > -1) { //indexOf方法中如果xxx.indexOf("")返回值为0
                        return item
                }
                return newData
        })


        if (newData.length > 0) {
                for (var i = 0; i < newData.length; i++) {
                        html += `<li>${newData[i].desc}</li>`
                }
        } else {
                html += `<li>暂无数据</li>`
        }
        ul.innerHTML = html;
}
creat()
input.onchange = function(e) {
        creat()
}

前端JavaScript实现本地模糊搜索功能的方法实例