javascript - jQuery 删除数组元素并刷新

Question

我认为现在已经太晚了，我无法弄清楚这一点。基本上，我有一个主阵列。我循环遍历它并删除一个元素(如果找到)。我这样做是为了 4 个元素。

最后我想显示所有剩余的元素。问题是在删除元素后我没有正确刷新数组。

这是我正在使用的代码，我觉得它过于暴力且不够优雅。

var masks = ["valueOne","valueTwo","valueThree","valueFour","valueFive"]; 

    $.each(masks,function(key,value){ 
        if("valueOne" === value){
            // do something
            masks.splice($.inArray(value, masks),1); 
        }else if("valueTwo" === value){
            // do something
            masks.splice($.inArray(value, masks),1);
        }else if("valueThree" === value){
            masks.splice($.inArray(value, masks),1);
        }else if("valueFour" === value){
            // do something
            masks.splice($.inArray(value, masks),1);
        }
    });
    console.log( masks.toString() );

我希望控制台记录“valueFive”，但事实并非如此。它记录了这个:

valueTwo,valueFour,valueFive

更新数组后刷新数组的正确方法是什么？感谢您提供任何有用的提示。

Answer 1

问题在于 $.each() 正在按索引迭代数组。

(function(key,value){ ... })( 0, "valueOne" );
(function(key,value){ ... })( 1, "valueThree" );
(function(key,value){ ... })( 2, "valueFive" );

"valueTwo" 和 "valueFour" 被跳过，因为 .splice() 修改了数组，将它们移动到已经存在的索引已被 $.each() 访问过。

masks[0] === "valueTwo"
masks[1] === "valueFour"

---

解决此问题的一个快速解决方案是提供要迭代的数组的克隆，该克隆在整个过程中保持不变，因此您可以安全地修改原始数组。

$.each(masks.slice(0), function (key, value) {
    // ...
});