项目需求

在实际项目开发中,对二维数组的筛选一般是在后端进行,但有时前端也需要对数据进行过滤、筛选和清洗。本次项目的实际生产环境是对百度离线地图的数据进行筛选,减少后台的开发量

被筛选数组

    //被筛选数组
    var data = [
        {"name": "《西游记》", "author": "吴承恩", "cat": "A级书刊"},
        {"name": "《三国演义》", "author": "罗贯中", "cat": "A级书刊"},
        {"name": "《红楼梦》", "author": "曹雪芹", "cat": "A级书刊"}
    ];

单击事件

    //单击事件
    $(function () {
        $("#btn").click(function () {
            var name = "西游记";
            var author = "吴承恩";
            console.log(filterData(data, name, author))
        })
    })

数据筛选

在CSDN找到更多的是对二维数据的“精确匹配筛选”,主要采用的是js数组的过滤函数进行操作。但是出于对项目的灵活性,还是推荐“模糊匹配”。

精确筛选

    //筛选条件封装函数-精确匹配;
    function filterData(data, name, author) {
        return data.filter(item => item.name == name || item.author == author)
    }

模糊匹配

    //筛选条件封装函数-模糊匹配;
    function getProbably(list, keyWord) {
        var arr = [];
        for (var i = 0; i < list.length; i++) {
            //将JSON对象转为字符串后进行匹配筛选,如果字符串中不包含目标字符会返回-1;
            if (JSON.stringify(list[i]).indexOf(keyWord) >= 0) {
                arr.push(list[i]);
            }
        }
        return arr;
    }

lockdatav Done!