JavaScript 如何安全删除数组元素？10种方法供你参考

1. 删除一个尾部元素

通过改变数组长度删除一个尾部元素

var ar = [1, 2, 3, 4, 5, 6];
ar.length = 4; // set length to remove elements
console.log( ar ); //  [1, 2, 3, 4]

通过pop()删除一个尾部元素

var ar = [1, 2, 3, 4, 5, 6];
ar.pop(); // returns 6
console.log( ar ); // [1, 2, 3, 4, 5]

2. 删除第一个元素

shift()函数

var ar = ['zero', 'one', 'two', 'three'];
ar.shift(); // returns "zero"
console.log( ar ); // ["one", "two", "three"]

3. 删除一个或多个元素

splice(index, length)函数

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var removed = arr.splice(2,2);

/*
removed === [3, 4]
arr === [1, 2, 5, 6, 7, 8, 9, 0]
*/

参数解释：从位置2开始，删除连个元素

4. 删除指定元素

JS没有提供专门的函数去删除指定元素，我们要用for循环实现

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

for( var i = 0; i < arr.length; i++){ 
   if ( arr[i] === 5) {
     arr.splice(i, 1); 
     break; // i--;
   }
}

//=> [1, 2, 3, 4, 6, 7, 8, 9, 0]

5. 条件过滤删除

比如说要删除一批符合条件的元素

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

var filtered = array.filter(function(value, index, arr){

    return value > 5;//保留大于5的元素

});

//filtered => [6, 7, 8, 9]
//array => [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

6. 使用Lodash第三方库进行删除操作

有时候，处理复杂问题使用第三方库是个不错的选择，例如Lodash就提供了一整套数组操作方法，就包含删除操作。

这个删除会改变原来的数组，并且是删除符合条件的元素

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 === 0;
});

console.log(array);
// => [1, 3]

console.log(evens);
// => [2, 4]

7. 自己封装一个删除指定元素的函数

function arrayRemove(arr, value) {

   return arr.filter(function(ele){
       return ele != value;
   });

}

var result = arrayRemove(array, 6);

// result = [1, 2, 3, 4, 5, 7, 8, 9, 0]

9. 使用Delete Operator进行显式删除

var ar = [1, 2, 3, 4, 5, 6];
delete ar[4]; // delete element with index 4
console.log( ar ); // [1, 2, 3, 4, undefined, 6]
alert( ar ); // 1,2,3,4,,6

这种方法挺神奇，它没有把元素移除，而是变成undefined。这样删除之后不会改变数组长度，也不影响后续元素索引。许多场景需要这样的方法

10. 清空重置数组

重置数组

var arr1 = [1, 2, 3, 4, 5, 6];

//do stuff

arr1 = [];

//a new, empty array!

这样会有一个问题，当这个数组被引用之后（例如 arr2 = arr1）， arr2不会跟着改变:

var arr1 = [1, 2, 3, 4, 5, 6];

var arr2 = arr1;  // Reference arr1 by another variable 

arr1 = [];

console.log(arr2); // Output [1, 2, 3, 4, 5, 6]

但是使用下面这种方式，arr2就会跟着改变了，需要注意：

var arr1 = [1, 2, 3, 4, 5, 6];

var arr2 = arr1;  // Reference arr1 by another variable 

arr1.length = 0;

console.log(arr2); // Output []

总结

删除JavaScript数组元素对于管理数据非常重要。根据不同的场景需要选择不同的删除方式。

本文总结了这些方法及其应用。使从数组中删除元素变得更容易、更明了。

如有错误，欢迎匡正！