JavaScript數組刪除元素的10種方法

原文鏈接：https://love2dev.com/blog/javascript-remove-from-array/

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數組元素對於管理數據非常重要。根據不同的場景需要選擇不同的刪除方式。

本文總結了這些方法及其應用。使從數組中刪除元素變得更容易、更明瞭。

如有錯誤，歡迎匡正！

原文鏈接

感謝原作者！