javascript - 有没有更快的方法来查找二维排序数组中的元素

Question

我想问一下是否有更快的方法来查找二维排序数组中的元素。二维数组按字母顺序排序。该数组包含大约 900 个元素。这是数组包含的数据的示例:

[["Alphabit","ABC"],["ABNCoin","ABN"],["Crown","CRW'],["Cyder","CYDER"],["Agrello","DELTA"]]

如您所见，我已按字母顺序对第二个值进行了排序。

我想要的是用户可以在顶部的搜索栏中键入内容，我将在匹配的值后开始在数组中搜索。这些比赛将被展示给那个人。

我所说的火柴。如果有人在搜索栏中输入字母 A，我将显示结果:

• 字母表，ABC
• ABN币，ABN
• Agrello，三 Angular 洲

如果有人在搜索栏中输入字母 T，我将显示结果:

• Agrello，三 Angular 洲
• 字母表，ABC

所以我的意思是，如果 2 个值中的一个包含字母，我将显示它。HTML 数据已经在 HTML 中。它们具有匹配的 I 值，例如数组中的值:

这是我的 JQuery 代码:

var searchAfterCoin = function () {
    var data = $('#searchBar').val().toLowerCase();
    if (data === '' || data === ' ') {
        showEverthing(searchArrayOfNames.length);
    }
    else {
        hideEverthing(searchArrayOfNames.length);
        for (var i = 0; i < searchArrayOfNames.length; i++) {
            var longName = searchArrayOfNames[i][0].toLowerCase();
            var shortName = searchArrayOfNames[i][1].toLowerCase();
            if (longName.indexOf(data) >= 0 && shortName.indexOf(data) >= 0) {
                $("#" + i + "").show();
            }
            else {
                if (longName.indexOf(data) >= 0) {
                    $("#" + i + "").show();
                }
                else {
                    if (shortName.indexOf(data) >= 0) {
                        $("#" + i + "").show();
                    }
                }
            }
        }
    }
};

这是我的 HTML 代码示例:

    <div class="row" id="13"> // some Data in here// </div>

就像你可以看到数组中匹配值的索引与 HTML 中的 id 匹配。

有没有办法使用更快的算法来查找元素？隐藏和显示元素的方法不够快，还是在他开始搜索时创建 html 并将其附加到 html 更好？

Answer 1

我不太确定更好的算法，但您当然可以让您的代码更短更简单。

var matches = searchArrayOfNames.reduce(function(p,c,i){
        if(c[0].toLowerCase().indexOf(data)>-1 || c[1].toLowerCase().indexOf(data)>-1) 
           p.push(i.toString())
        return p;
},[]);
$('div.row').filter(function(){
    return matches.indexOf(this.id)>-1;
}).show();      

这里的概念是使用reduce找到与输入匹配的元素的索引，然后 jquery filter找到基于这个 matches 的元素数组。

var searchArrayOfNames = [["Alphabit","ABC"],["ABNCoin","ABN"],["Crown","CRW"],["Cyder","CYDER"],["Agrello","DELTA"]];


var searchAfterCoin = function () {

    var data = $('#searchBar').val().toLowerCase();
    if (data === '' || data === ' ') {
        showEverthing(searchArrayOfNames.length);
    }
    else {
        hideEverthing(searchArrayOfNames.length);
        var matches = searchArrayOfNames.reduce(function(p,c,i){
            if(c[0].toLowerCase().indexOf(data)>-1 || c[1].toLowerCase().indexOf(data)>-1) 
               p.push(i.toString())
            return p;
        },[]);
        $('div.row').filter(function(){
            return matches.indexOf(this.id)>-1;
        }).show();       
    }
};
$('#searchBar').on('keyup',searchAfterCoin)

function showEverthing(){
    $('div').show();
}

function hideEverthing(){
    $('div').hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <input id="searchBar" type="text" />
 
 <div class="row" id="0"> Alphabit data </div>
 <div class="row" id="1"> ABNCoin data </div>
 <div class="row" id="2"> Crown data </div>
 <div class="row" id="3"> Cyder data </div>
 <div class="row" id="4"> Agrello data </div>