使用 for 循环中的拼接从数组中删除项目 [英] Remove items from array with splice in for loop

问题描述

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

$(document).ready(function() {无功计时器，搜索输入；$('#searchFAQ').keyup(function() {清除超时(定时器)；定时器 = 设置超时(函数(){searchInput = $('#searchFAQ').val().match(/\w+/g);如果(搜索输入){for (var elem in searchInput) {if (searchInput[elem].length <4) {//删除这些条目searchInput.splice(elem, 1);}}$('#output').text(searchInput);//ajax在这里调用}}, 500);});});

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

我认为问题在于 for 循环，因为如果我使用 splice 删除一个项目，数组的索引会发生变化，因此它会继续使用错误"的索引.

也许有人可以帮我?

解决方案

解决方案 1

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

var searchInput, i;searchInput = ["this", "is", "a", "test"];i = searchInput.length;当我 - ) {如果 (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  3) {newSearchInput.push(cur);}}

其中 newSearchInput 将只包含有效长度的项目，而您在 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/><小时>

参考:

• Array.prototype.filter - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• Array.prototype.filter 浏览器支持 - http://kangax.github.io/es5-compat-table/#Array.prototype.filter

I want to implement a kind of jQuery live search. But before sending the input to the server I'd like to remove all items in my array which have 3 or less characters (because in the german language, those words usually can be ignored in terms of searching) So ["this", "is", "a", "test"] becomes ["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);
});
});

Now my problem is that not all items get removed in my for loop. If I for example typ "this is a test" "is" gets removed, "a" stays. JSFIDDLE

I think the problem is the for loop because the indexes of the array change if I remove an item with splice, so it goes on with the "wrong" index.

Perhaps anybody could help me out?

解决方案

Solution 1

You can loop backwards, with something like the following:

var searchInput, i;

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

DEMO: http://jsfiddle.net/KXMeR/

This is because iterating incrementally through the array, when you splice it, the array is modified in place, so the items are "shifted" and you end up skipping the iteration of some. Looping backwards (with a while or even a for loop) fixes this because you're not looping in the direction you're splicing.

---

Solution 2

At the same time, it's usually faster to generate a new array instead of modifying one in place. Here's an example:

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);
    }
}

where newSearchInput will only contain valid length items, and you still have the original items in searchInput.

DEMO: http://jsfiddle.net/RYAx2/

---

Solution 3

In addition to the second solution above, a similar, newer Array.prototype method is available to handle that better: filter. Here's an example:

var searchInput, newSearchInput;

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

DEMO: http://jsfiddle.net/qky7D/

---

References:

• Array.prototype.filter - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• Array.prototype.filter browser support - http://kangax.github.io/es5-compat-table/#Array.prototype.filter

这篇关于使用 for 循环中的拼接从数组中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！