代码之家 › 专栏 › 技术社区 › anthonypliu

在javascript中,如何从对象数组中删除元素?

jquery-plugins jquery-ui jquery javascript

anthonypliu · 技术社区 · 16 年前

在javascript中,如何从对象数组中删除元素? 代码如下:

$.fn.mapImage.deletePinpoint = function(image, pinpoint){
    var deleted = false;
    for (var i = 0; i < image.pinpoints.length; i++) {
        if(image.pinpoints[i].position == pinpoint.position){
            image.pinpoints.remove(i);
            deleted = true;
        }
        if(deleted){
            image.pinpoints[i].position -= 1;
        }
    }
    $('.edit-mode').find('div.dynamic-pinpoint-area').remove();
    $('.edit-mode').find('div.pinpoint-text').remove();
    $('.create-mode').find('div.static-pinpoint-area').remove();
    $('.create-mode').find('div.pinpoint-text').remove();

    $.fn.mapImage.load(image);

}

image.pinpoints 是对象数组。再次感谢各位!

3 回复 | 直到 16 年前

qw3n 16 年前

.splice 是w3schools.com上给出的方法吗? http://www.w3schools.com/jsref/jsref_splice.asp 要从索引为x的数组中删除一个元素,您需要 trees.splice(x,x+1); 这会删除x并在需要时返回它。

Jonathan Fingland 16 年前

见 https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator

例如(来源)

var trees = ["redwood","bay","cedar","oak","maple"];  
delete trees[3];  
if (3 in trees) {  
   // this does not get executed  
}

Anurag 16 年前

我认为你应该把这个问题重新措辞清楚一点。从您的示例中,似乎可以从 image.pinpoints 数组如果 position 属性与的属性匹配 pinpoint . 所以它会删除每个 image.pinpoints[i].position == pinpoint.position 哪里 i 从出发 0 到 (image.pinpoints.length - 1) .

由于您同时还在迭代数组,因此我不建议使用 splice 独自一人。相反 delete 首先对每个索引进行索引,然后在第二次传递中清理数组。

剪接 和 删除 当delete在数组中创建一个孔并将已删除属性的值设置为 undefined . 另一方面, 剪接 将删除元素,如同它从未存在一样,并在元素之后将所有元素的索引修复为连续的。考虑这个例子:

> var a = [2,3,5,7,11]; // create an array of 5 elements
> undefined
> a[2] // see the value of the third element
> 5
> delete a[2] // delete the third element using "delete"
> true
> a // log contents of a
> [2, 3, undefined, 7, 11]
> a[2] // index 2 still exists with value "undefined" now
> undefined

剪接 这里本身也是有问题的,就好像您删除了一个元素一样,该元素之后的所有索引都将上移一个,并且您将跳过检查下一个元素。考虑第二个例子:

> var a = [2,3,5,7,11]; // create array of 5 elements
> for(var i = 0; i < a.length; i++) { 
    if(a[i] == 3 || a[i] == 5) { // if it's 3 or 5, take it out
        a.splice(i, 1);
    }
}
> a
[2, 5, 7, 11]; // yikes, 5 still exists

在上面的例子中, 5 仍然存在,因为我们从未检查过该值。当我们看到 3 ,当前索引为 1 . 在拼接数组后,下一个元素- 五 移动到它的位置并成为索引 一 . 因为我们已经完成了索引 一 此时,我们只需进入下一个索引- 2 ,现在有了价值 7 跳过 五 . 一般来说,使用索引进行迭代并执行就地删除不是一个好的实践。

作为一种解决方案,我将创建一个新的数组,并且只插入其中不被删除的属性。

$.fn.mapImage.deletePinpoint = function(image, pinpoint) {
    // will hold all objects that are not to be deleted
    var remainingPinpoints = [];

    for (var i = 0; i < image.pinpoints.length; i++) {
        // reverse condition
        if(image.pinpoints[i].position != pinpoint.position) {
            // add to new array
            remainingPinpoints.push(image.pinpoints[i]);
        }
    }

    // assign new array to pinpoints property
    image.pinpoints = remainingPinpoints;

    ...
}