从阵列中的for循环剪接删除项目 [英] Remove items from array with splice in for loop

问题描述

我想实现一种jQuery的实时搜索的。
但是，发送输入到服务器之前，我想删除我的阵列，它有3个或更少的字符（因为在德国的语言，这些词通常可以在搜索方面忽略不计）的所有项目
因此， [这，是，A，测试] 变成 [本，测试]

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

现在我的问题是，并非所有项目将在我的for循环中删除。
如果我的典型例子这是一个测试，是获取删除一岿然不动。
的jsfiddle

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

我认为这个问题是for循环，因为数组变化的指标，如果我删除项目与拼接，如此这般的错误的指数。

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.

也许有人可以帮我吗？

推荐答案

您可以循环向后，用类似如下：

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.

与此同时，它通常更快，以产生一个新的数组，而不是修改一个到位。这里有一个例子：

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

其中， newSearchInput 将只包含有效的长度的项目，你仍然有 searchInput 原始项目。

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

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

在除上述第二个解决方案，类似的，新的 Array.prototype 方法可用来处理，更好地：过滤器。这里有一个例子：

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/

参考文献：

• Array.prototype.filter - <一个href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter


• Array.prototype.filter 浏览器的支持 - <一个href=\"http://kangax.github.io/es5-compat-table/#Array.prototype.filter\">http://kangax.github.io/es5-compat-table/#Array.prototype.filter

• 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屋！