58

我想实现一种 jQuery 实时搜索。但是在将输入发送到服务器之前，我想删除我的数组中具有 3 个或更少字符的所有项目（因为在德语中，这些词通常可以在搜索方面被忽略）所以["this", "is", "a", "test"]变成["this", "test"]

$(document).ready(function() {
var timer, searchInput;
$('#searchFAQ').keyup(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        searchInput = $('#searchFAQ').val().match(/\w+/g);
        if(searchInput) {
            for (var elem in searchInput) {
                if (searchInput[elem].length < 4) {
                    //remove those entries
                    searchInput.splice(elem, 1);
                }
            }
            $('#output').text(searchInput);
            //ajax call here
        }
    }, 500);
});
});

现在我的问题是，并非所有项目都在我的 for 循环中被删除。例如，如果我输入“这是一个测试”“是”被删除，“a”将保留。 JSFIDDLE

我认为问题在于 for 循环，因为如果我删除带有拼接的项目，数组的索引会发生变化，因此它会继续使用“错误”索引。

也许有人可以帮助我吗？

4

5 回答 5

151

解决方案 1

您可以向后循环，如下所示：

var searchInput, i;

searchInput = ["this", "is", "a", "test"];
i = searchInput.length;
while (i--) {
    if (searchInput[i].length < 4) {
        searchInput.splice(i, 1);
    }
}

演示：http: //jsfiddle.net/KXMeR/

这是因为通过数组增量迭代，当你拼接它时，数组被修改到位，所以项目被“移位”，你最终跳过了一些迭代。向后循环（带有一个while甚至一个for循环）可以解决此问题，因为您没有在拼接方向上循环。

解决方案 2

同时，生成新数组通常比原地修改数组更快。这是一个例子：

var searchInput, newSearchInput, i, j, cur;

searchInput = ["this", "is", "a", "test"];
newSearchInput = [];
for (i = 0, j = searchInput.length; i < j; i++) {
    cur = searchInput[i];
    if (cur.length > 3) {
        newSearchInput.push(cur);
    }
}

wherenewSearchInput将仅包含有效长度的项目，并且您仍然拥有searchInput.

演示：http: //jsfiddle.net/RYAx2/

解决方案 3

除了上面的第二种解决方案之外，还有一种类似的、更新的Array.prototype方法可以更好地处理这个问题：filter. 这是一个例子：

var searchInput, newSearchInput;

searchInput = ["this", "is", "a", "test"];
newSearchInput = searchInput.filter(function (value, index, array) {
    return (value.length > 3);
});

演示：http: //jsfiddle.net/qky7D/

参考：

于 2013-04-25T14:26:49.767 回答
9 
var myArr = [0,1,2,3,4,5,6];

问题陈述：

myArr.splice(2,1);

  \\ [0, 1, 3, 4, 5, 6];

现在在第二个位置移动 3 次，长度减少 1，这会产生问题。

解决方案：一个简单的解决方案是在拼接时反向迭代。

var i = myArr.length;
while (i--) {
    // do your stuff
}
于 2015-01-07T11:34:37.313 回答
3

如果您安装了lodash库，那么您可能需要考虑使用它们。

该函数是_.forEachRight （从右到左迭代集合的元素）

这是一个例子。

var searchInput = ["this", "is", "a", "test"];

_.forEachRight(searchInput, function(value, key) {

    if (value.length < 4) {
        searchInput.splice(key, 1);
    }
});
于 2015-09-30T20:26:36.483 回答
1

您还可以使用$.grep函数来过滤数组：

var timer, searchInput;
$('#searchFAQ').keyup(function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        searchInput = $('#searchFAQ').val().split(/\s+/g); // match is okay too
        searchInput = $.grep(searchInput, function(el) {
            return el.length >= 4;
        });
        console.log(searchInput);
    }, 500);
});

http://jsfiddle.net/dfsq/4Wdp9/

于 2013-04-25T14:47:45.957 回答
0

另一种方法是在从数组 (x--) 切片时减少索引，以便在数组向下移动时不会跳过下一个元素。

var searchInput;

searchInput = ["this", "is", "a", "test"];
for (var x = 0; x < searchInput.length; x++) {
    if (searchInput[x].length < 4) {
        searchInput.splice(x--, 1);
    }
}

console.log(searchInput);

演示： https ://jsfiddle.net/alinaeem229/n2kq3690/1/

于 2019-12-04T14:24:18.387 回答