在数组元素上使用delete运算符与使用array.splice方法有什么区别?

例如:

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

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

如果我可以像删除对象那样删除数组元素,为什么还要使用拼接方法?


当前回答

表演

关于功能差异,已经有很多很好的答案了——所以这里我想关注性能。今天(2020.06.25),我对Chrome 83.0、Safari 13.1和Firefox 77.0进行了测试,以了解所提到的解决方案,以及所选答案

结论

拼接(B)解决方案适用于小型和大型阵列删除(A)解决方案对于大型阵列最快,对于小型阵列最快过滤器(E)解决方案在小阵列的Chrome和Firefox上速度最快(但在Safari上速度最慢,在大阵列上速度较慢)解决方案D很慢解决方案C不适用于Chrome和Safari中的大型阵列函数C(arr,idx){var rest=arr.slice(idx+1 | | arr.length);arr.length=idx<0?arr.length+idx:idx;arr.push.apply(arr,rest);返回arr;}//碰撞试验让arr=[…'abcdefghij'.repeat(100000)];//1M元件尝试{C(排列,1)}catch(e){console.error(e.message)}

细节

我对解决方案进行以下测试A.BCDE(我的)

对于小数组(4个元素)-您可以在这里运行测试对于大阵列(1M个元素)-您可以在这里运行测试

函数A(arr,idx){删除arr[idx];返回arr;}函数B(arr,idx){arr.splice(idx,1);返回arr;}函数C(arr,idx){var rest=arr.slice(idx+1 | | arr.length);arr.length=idx<0?arr.length+idx:idx;arr.push.apply(arr,rest);返回arr;}函数D(arr,idx){返回arr.slice(0,idx).contat(arr.slices(idx+1));}函数E(arr,idx){返回arr.filter((a,i)=>i!==idx);}myArray=[‘a’,‘b’,‘c’,‘d’];[A,B,C,D,E].map(f=>console.log(`${f.name}${JSON.stringify(f([…myArray],1))}`));此代码段仅显示使用过的解决方案

Chrome的示例结果

其他回答

因为delete只从数组中的元素中删除对象,所以数组的长度不会改变。拼接将删除对象并缩短阵列。

以下代码将显示“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]);
}

应用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运算符从数组中删除元素,但元素的“占位符”仍然存在。橡树已经被移除,但它仍然占用阵列中的空间。因此,阵列的长度保持为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()方法完全删除目标值和“占位符”。橡树已经被移除,以及它在阵列中占据的空间。阵列的长度现在为4。

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

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

请注意,它实际上没有设置为值undefined,而是从数组中删除了属性,使其看起来未定义。Chrome开发工具在记录阵列时打印为空,从而明确了这一区别。

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

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

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

我有两种方法。

简单的一个:

arr = arr.splice(index,1)

第二个:

arr = arr.filter((v,i)=>i!==index)

第二种方法的优点是可以删除一个值(所有值,而不是像大多数情况一样只删除第一个实例)

arr = arr.filter((v,i)=>v!==value)
function deleteFromArray(array, indexToDelete){
  var remain = new Array();
  for(var i in array){
    if(array[i] == indexToDelete){
      continue;
    }
    remain.push(array[i]);
  }
  return remain;
}

myArray = ['a', 'b', 'c', 'd'];
deleteFromArray(myArray , 0);

//结果:myArray=['b','c','d'];