在JavaScript中删除数组元素 - 删除vs splice

Question

是什么使用之间的差值的delete算子阵列元件上,而不是使用该Array.splice方法？

例如:

myArray = ['a', 'b', 'c', 'd'];

delete myArray[1];
//  or
myArray.splice (1, 1);

如果我能用对象删除数组元素,为什么甚至有拼接方法？

Answer 1

delete将删除对象属性,但不会重新索引数组或更新其长度.这使它看起来好像是未定义的:

> myArray = ['a', 'b', 'c', 'd']
  ["a", "b", "c", "d"]
> delete myArray[0]
  true
> myArray[0]
  undefined

请注意,事实上它并未设置为该值undefined,而是从数组中删除该属性,使其显示为未定义.Chrome开发工具empty在记录阵列时通过打印使这一区别变得清晰.

> myArray[0]
  undefined
> myArray
  [empty, "b", "c", "d"]

myArray.splice(start, deleteCount) 实际上删除元素,重新索引数组,并更改其长度.

> myArray = ['a', 'b', 'c', 'd']
  ["a", "b", "c", "d"]
> myArray.splice(0, 2)
  ["a", "b"]
> myArray
  ["c", "d"]

Answer 2

Array.remove()方法

jQuery的创建者John Resig创建了一个非常方便的Array.remove方法,我总是在我的项目中使用它.

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

以下是一些如何使用它的示例:

// Remove the second item from the array
array.remove(1);
// Remove the second-to-last item from the array
array.remove(-2);
// Remove the second and third items from the array
array.remove(1,2);
// Remove the last and second-to-last items from the array
array.remove(-2,-1);

约翰的网站

Answer 3

因为delete仅从数组中的元素中删除对象,所以数组的长度不会更改.Splice删除对象并缩短数组.

以下代码将显示"a","b","undefined","d"

myArray = ['a', 'b', 'c', 'd']; delete myArray[2];

for (var count = 0; count < myArray.length; count++) {
    alert(myArray[count]);
}

而这将显示"a","b","d"

myArray = ['a', 'b', 'c', 'd']; myArray.splice(2,1);

for (var count = 0; count < myArray.length; count++) {
    alert(myArray[count]);
}

Answer 4

我偶然发现了这个问题,同时试图了解如何从Array中删除每一个元素.这里有一个比较的splice,并delete去除所有的'c'自items阵列.

var items = ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd'];

while (items.indexOf('c') !== -1) {
  items.splice(items.indexOf('c'), 1);
}

console.log(items); // ["a", "b", "d", "a", "b", "d"]

items = ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd'];

while (items.indexOf('c') !== -1) {
  delete items[items.indexOf('c')];
}

console.log(items); // ["a", "b", undefined, "d", "a", "b", undefined, "d"]
?

Answer 5

从Core JavaScript 1.5参考>运算符>特殊运算符> delete运算符:

删除数组元素时,数组长度不受影响.例如,如果删除[3],则[4]仍为[4]且[3]未定义.即使删除数组的最后一个元素(删除[a.length-1]),这也成立.

Answer 6

splice 将使用数字索引.

而delete可以用来对付其他类型的指数..

例:

delete myArray['text1'];

Answer 7

值得一提的是,splice只适用于数组.(不能依赖对象属性来遵循一致的顺序.)

要从对象中删除键值对,删除实际上是您想要的:

delete myObj.propName;     // , or:
delete myObj["propName"];  // Equivalent.

Answer 8

如上所述,使用splice()似乎是一个完美的契合.Mozilla的文档:

该splice()方法通过删除现有元素和/或添加新元素来更改数组的内容.

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum'); 
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1); 
// myFish is ["angel", "clown", "mandarin", "sturgeon"]

句法

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

参数

开始

要开始更改数组的索引.如果大于数组的长度,实际的起始索引将设置为数组的长度.如果否定,将从最后开始那么多元素.

deleteCount

一个整数,指示要删除的旧数组元素的数量.如果deleteCount为0,则不删除任何元素.在这种情况下,您应该至少指定一个新元素.如果deleteCount大于从start开始的数组中剩余的元素数,则将删除通过数组末尾的所有元素.

如果省略deleteCount,则deleteCount将等于 (arr.length - start).

item1,item2,...

要添加到数组的元素,从起始索引开始.如果未指定任何元素,splice()则只会从数组中删除元素.

返回值

包含已删除元素的数组.如果仅删除一个元素,则返回一个元素的数组.如果未删除任何元素,则返回空数组.

[...]

Answer 9

删除Vs拼接

从数组中删除项目时

var arr = [1,2,3,4]; delete arr[2]; //result [1, 2, 3:, 4]
console.log(arr)

当你拼接

var arr = [1,2,3,4]; arr.splice(1,1); //result [1, 3, 4]
console.log(arr);

在删除的情况下,元素被删除但索引保持为空

而在splice元素被删除的情况下,rest元素的索引相应减少

Answer 10

删除行为就像一个非现实世界的情况,它只是删除项目,但数组长度保持不变:

节点终端的示例:

> var arr = ["a","b","c","d"];
> delete arr[2]
true
> arr
[ 'a', 'b', , 'd', 'e' ]

下面是一个使用slice()通过索引删除数组项的函数,它将arr作为第一个arg,将要删除的成员的索引作为第二个参数.如您所见,它实际上删除了数组的成员,并将数组长度减少1

function(arr,arrIndex){
    return arr.slice(0,arrIndex).concat(arr.slice(arrIndex + 1));
}

上面的函数是将所有成员带到索引,以及索引之后的所有成员,并将它们连接在一起,然后返回结果.

这是一个使用上面的函数作为节点模块的示例,看到终端将是有用的:

> var arr = ["a","b","c","d"]
> arr
[ 'a', 'b', 'c', 'd' ]
> arr.length
4 
> var arrayRemoveIndex = require("./lib/array_remove_index");
> var newArray = arrayRemoveIndex(arr,arr.indexOf('c'))
> newArray
[ 'a', 'b', 'd' ] // c ya later
> newArray.length
3

请注意,这对于一个带有dupes的数组不起作用,因为indexOf("c")只会获得第一次出现,并且只能拼接并删除它找到的第一个"c".

Answer 11

通过在应用delete运算符和方法后记录每个数组的长度可以看出差异。splice()例如：

删除操作符

var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
delete trees[3];

console.log(trees); // ["redwood", "bay", "cedar", empty, "maple"]
console.log(trees.length); // 5

该delete运算符从数组中删除该元素，但该元素的“占位符”仍然存在。oak已被删除，但仍占用数组空间。因此，数组的长度仍为 5。

拼接()方法

var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
trees.splice(3,1);

console.log(trees); // ["redwood", "bay", "cedar", "maple"]
console.log(trees.length); // 4

该splice()方法也完全删除了目标值和“占位符”。oak以及它在数组中占用的空间都已被删除。数组的长度现在为 4。

Answer 12

如果你想迭代一个大数组并有选择地删除元素,那么为每次删除调用splice()都会很昂贵,因为splice()每次都必须重新索引后续元素.因为数组在Javascript中是关联的,所以删除单个元素然后重新索引数组会更有效.

您可以通过构建新数组来实现.例如

function reindexArray( array )
{
       var result = [];
        for( var key in array )
                result.push( array[key] );
        return result;
};

但我认为你不能修改原始数组中的键值,这样会更有效 - 看起来你可能需要创建一个新数组.

请注意,您不需要检查"未定义"条目,因为它们实际上并不存在,并且for循环不会返回它们.它是阵列打印的工件,将它们显示为未定义.它们似乎不存在于内存中.

如果你可以使用像slice()这样更快的东西,但它不会重新索引会很好.谁知道更好的方法？

实际上,您可以按照以下方式执行此操作,这可能更有效,性能更高:

reindexArray : function( array )
{
    var index = 0;                          // The index where the element should be
    for( var key in array )                 // Iterate the array
    {
        if( parseInt( key ) !== index )     // If the element is out of sequence
        {
            array[index] = array[key];      // Move it to the correct, earlier position in the array
            ++index;                        // Update the index
        }
    }

    array.splice( index );  // Remove any remaining elements (These will be duplicates of earlier items)
},

Answer 13

你可以使用这样的东西

var my_array = [1,2,3,4,5,6];
delete my_array[4];
console.log(my_array.filter(function(a){return typeof a !== 'undefined';})); // [1,2,3,4,6]