JS：数组的filter()方法实现简单的搜索功能

本文介绍了如何利用JavaScript的filter()方法实现简单的搜索功能。filter()方法创建一个新的数组，包含所有通过测试函数的原数组元素。示例中，测试函数检查元素是否包含特定关键词，返回包含关键词的新数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上效果图和代码
在这里插入图片描述

<body>
    <!-- 搜索组件 -->
    <input type="text" id="searchBox">
    <button id="searchBtn">搜索</button>
    <!-- 搜索结果展示区域 -->
    <ul id="searchResult"></ul>
    
    <script>
        //获取节点
        let serachBox = document.getElementById('searchBox'),
            searchBtn = document.getElementById('searchBtn'),
            searchResult = document.getElementById('searchResult');

        //要查找的数组集
        let users = ['Tom', 'Jack', 'Mary', 'Gary', 'Lucy', 'Bob'];

        //filter()查找方法，返回找到的元素组成的新数组
        let searchFn = function(arr, keyWords) {
            return arr.filter(function(value) {
                return value.match(keyWords);
            });
        }

        //展示搜索结果方法
        let showResult = function() {
            //清空原内容
            searchResult.innerHTML = '';
            //获取搜索的结果
            //users:所要搜索的数组
            //serachBox.value:搜索的关键字
            let searchUsers = searchFn(users, serachBox.value);
            //判断搜索内容是否为空的
            if (searchUsers.length === 0) {
                searchResult.innerHTML = 'not found';
            } else {
                //for循环遍历写入结果区域
                for (index in searchUsers) {
                    searchResult.innerHTML += `<li>${searchUsers[index]}</li>`;
                }
            }
        }

        //绑定搜索按钮点击事件
        searchBtn.addEventListener('click', showResult);
    </script>
</body>

部分解释

filter() 方法

array.filter(function(currentValue,index,arr), thisValue)

filter() 方法会创建一个新的数组，这个数组中的元素是根据function(currentValue,index,arr) 所符合条件的原数组中的所有元素组成的

function(currentValue,index,arr) *必填

filter() 方法中必填的参数，原数组的每个元素都会执行一次
currentValue 当前元素值 *必填
index 当前元素的索引值
arr 当前元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，“this” 的值为 “undefined”

//filter()查找方法，返回找到的元素组成的新数组
        let searchFn = function(arr, keyWords) {
            return arr.filter(function(value) {
                return value.match(keyWords);
            });
        }

这段中的filter() 方法只写了 function() 一个参数，并只用了其中的 currentValue 参数，而其中的 match(keyWords) 是一个字符串的方法，他可以检测这个字符串是否含有 keyWords ，若果有就会返回这个字符串，没有则不会。
也就是说，这个方法对 arr 数组的元素进行检测，如果元素有 keyWords ，会提取出来，把所有符合的生成一个新数组，searchFn 就会把这个数组返回。