5種從JavaScript 數組中删除項目的方式

英文 | https://javascript.plainenglish.io/how-to-remove-an-item-from-a-javascript-array-in-5-ways-2932b2686442

翻譯 | 楊小二

有很多方法可以從 JavaScript 數組中删除項目。但是，在這篇文章中，我們将研究 5 種方法來做到這一點。

出于某種原因，有時，你想從 JavaScript 數組中删除項目。有很多選擇，這也意味着有很多可能出錯的空間。

JavaScript像任何其他程式設計語言一樣，JavaScript 允許程式員使用數組對象。是的，是對象。之是以強調數組作為對象，是因為 JavaScript 數組是對記憶體中位址的實際引用。是以，你對該陣列所做的任何更改都将在你使用它時一直保留。

好了，簡單介紹完了，接下來就是介紹我們将在這篇文章中使用的技巧。我們将使用内置的和通用的方法來完成工作。是以，事不宜遲，讓我們開始吧！

此外，免責聲明，以下順序是随機的，不基于任何偏好。，每個方法都會被标記為是就地還是非就地。

1、内置 array.filter()

模式：異地。

這個方法基本上接收一個項目清單，然後使用一個決定性的函數來決定什麼将保留，什麼将從數組中消失。

然後它建立一個新數組（是JavaScript 數組對象的新位址），接着，你可以将其配置設定給你正在過濾的數組。

這樣，通過JavaScript 數組過濾器讓你可以選擇将結果放入新的JavaScript 數組或配置設定給應用操作的原始數組，以删除你不想要的結果。

例如：

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];      

首先，我們建立一個簡單的數字 1 到 10 清單。然後，我們得到一個要求，我們隻需要顯示上面清單中的偶數。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// now we want to remain with even numbers from the above array
numbersOneToTen = numbersOneToTen.filter(num => num % 2 === 0);      

好吧，我們知道偶數可以在沒有提示的情況下被 2 整除，是以我們為此使用模運算符。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// now we want to remain with even numbers from the above array
numbersOneToTen = numbersOneToTen.filter(num => num % 2 === 0)


// now let's print it out
console.log(numbersOneToTen);


// we should see
// [ 2, 4, 6, 8, 10 ]      

現在，當我們記錄時，我們應該隻剩下偶數，因為我們将 JavaScript 數組過濾器結果中的新數組重新配置設定給我們應用過濾器的原始數組。

好的，問你個問題。如果我們沒有将結果重新配置設定給 numbersOneToTen 數組，你認為會發生什麼？好吧，我會給你一個提示，就地與非就地，請認真思考一下。

好的，我們現在進入下一個。

2、内置array.slice(optionalStart, optionalEnd)

模式：異地

這是一個内置方法，如你所見，它接受 optionalStart 和 optionalEnd，用于傳回數組的一部分。

注意：optionalStart 和 optionalEnd 的索引是從零開始的，這意味着它們從 0 開始。

是以，讓我們使用這個例子：

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];      

再一次，我們建立了一個假設的數字數組。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// now we use slice
numbersOneToTen = numbersOneToTen.slice(3, 8);      

在這裡，我們将開始指定為 3，結束指定為 8。是以，關于 slice 的 optionalStart 和 optionalEnd 需要注意的重要一點是，結果數組将包含開始時的項目，不包括結束時的項目。

是以，我們的 JavaScript 數組将包含索引 3 處的項和索引 8 之前的項。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// now we use slice
numbersOneToTen = numbersOneToTen.slice(3, 8);


// now let's print it out
console.log(numbersOneToTen)


// we should see
// [ 4, 5, 6, 7, 8 ]      

如你所見，我們的清單從 4 開始，一直到 8。因為 4 位于索引 3（從 0 開始）而 8 位于索引 7（從 0 開始）。

提示：JavaScript 數組切片設定要包含的内容的邊界。

好的，我們繼續下一個！

3、内置array.splice(requiredStart, optionalDeleteCount)

模式：就地

這是我們看到的第一個具有就地修改方法的方法。好的，這是什麼意思？這意味着我們不需要配置設定 JavaScript 數組拼接操作的結果，因為：

該方法傳回已删除的内容，而不是應保留在數組中的内容。

修改直接在 JavaScript 數組上完成。

考慮到這一點，使用此方法從 JavaScript 數組中删除時要非常小心。

如你所見，它還接受一些參數。第一個是 requiredStart，一個強制的從零開始的索引，用于拼接應該從什麼時候開始。

它還有一個可選的DeleteCount，它是要删除的項目數的數值。是以，這不是基于零的，而是一個實際的機關。例如，如果你将其設定為 1，則将删除 1 個項目，依此類推。

是以，一個例子：

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];      

像往常一樣，我們聲明我們的數組。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// let's remove everything above index 5
numbersOneToTen.splice(4);      

現在，我們決定删除索引 5 以上的所有内容。注意，我們沒有傳入 deleteCount，這意味着超過 requiredStart 索引的所有内容都将被删除。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// let's remove everything above index 5
numbersOneToTen.splice(4);


// now let's print it out
console.log(numbersOneToTen);


// we should be left with
// [ 1, 2, 3, 4 ]      

好的，現在是問題的時間，在這裡，我們将有兩個：

如果我們将 numbersOneToTen 配置設定給 JavaScript 數組拼接的結果，你認為會顯示什麼？來試試這個。

嘗試不同的deleteCounts會顯示什麼？好吧，試一試！

旅程還在繼續！

4、内置array.pop()

模式：就地

好吧，這是從 JavaScript 數組中删除的另一個同步變體。JavaScript 數組 pop 的作用是從數組中删除最後一個元素，并傳回該元素。這意味着：

無需将數組配置設定給 pop() 方法的結果。

傳回的值将是一個項目，而不是一個數組。

是以，舉個簡單的例子：

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];      

再一次，我們聲明我們的 JavaScript 數組。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// by default, pop removes the last item from the array
numbersOneToTen.pop();      

然後我們在數組上運作調用 pop() 方法。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// by default, pop removes the last item from the array
numbersOneToTen.pop();


// now let's print it out
console.log(numbersOneToTen);


// we should see
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]      

是以，請記住，我們不需要将參數傳遞給 pop() 方法。

好吧，是時候問一個簡單的問題了：

當你嘗試在一個空的 JavaScript 數組上調用 pop() 會發生什麼？

當你将 numbersOneToTen 配置設定給 pop() 的結果時，你會看到什麼？

好吧，現在進入最後一個。

5、老派重新配置設定到空數組

模式：異地

這種方法隻需要将數組配置設定給一個新數組。由于我們沒有直接調用它的方法，是以在我看來，它是一個不合适的方法，因為我們給它一個新的引用 JavaScript 數組對象（一個空的）。

是以，此方法将從你的數組中完全删除所有内容。是以有這樣的行為，慎用！

一個簡單的例子：

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];      

像往常一樣，我們聲明我們的數組。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// let's assign to empty array
numbersOneToTen = [];      

然後我們配置設定它。

// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// let's assign to empty array
numbersOneToTen = [];


// now let's print it out
console.log(numbersOneToTen);


// we should now see
// []      

現在，是提問時間：

如果我們使用 const numbersOneToTen 而不是 let numbersOneToTen，你認為會發生什麼？

結論

從 JavaScript 數組中删除 item 很簡單。你所需要的隻是了解你的具體需求，然後采用正确的方法。

實踐：你看，在上面的例子中，我們使用了 let numbersOneToTen，你為什麼不繼續嘗試使用 const numbersOneToTen 來代替。讓我知道這對你有什麼影響。

最後，感謝你的閱讀，祝程式設計快樂！

學習更多技能

請點選下方公衆号

​