在 JavaScript 中從陣列中刪除物件

Ashok Chapagai 2023年10月12日
  1. 在 JavaScript 中使用 splice() 方法從陣列中刪除物件
  2. 在 JavaScript 中使用 slice() 方法從陣列中刪除物件
  3. 使用 filter() 方法從陣列中刪除一個物件
在 JavaScript 中從陣列中刪除物件

在本文中,我們將學習如何從 JavaScript 陣列中刪除物件。本文將介紹和實現諸如 splice()slice()filter() 等方法。

在 JavaScript 中使用 splice() 方法從陣列中刪除物件

方法 splice() 可能是我們可以用來從陣列中刪除物件的最佳方法。它通過刪除或替換現有元素或在適當位置新增新元素來更改陣列的內容。splice() 方法的語法如下所示。

Array.splice(index, count, items1, ..., itemX)

index 選項指的是一個整數,指定在什麼位置新增/刪除專案。我們還可以使用負值來指定從陣列末尾開始的位置。count 選項是可選的,表示要刪除的專案數。items1, ..., itemX 選項也是可選的,可用於向陣列新增新專案。

首先,我們宣告一個名為 myArray 的陣列變數,它包含陣列中的三個物件。然後,在第二行,我們對陣列使用 splice() 方法。我們還指出 01 作為引數。然後我們在控制檯中記錄陣列。

最初,該陣列包含三個物件。splice() 方法中的值 0 表示陣列的第一個索引,即第一個物件。這意味著我們將開始從第一個索引中刪除。方法中的下一個值 1 指定該方法將從起點刪除一項。因此,下面的示例將刪除陣列中的第一個物件。

我們應該注意到 splice() 方法修改了陣列;因此,我們可以使用 slice() 方法從陣列中刪除所需的物件,而無需更改原始陣列。

程式碼示例:

var myArray =
    [{id: 1, name: 'John'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
myArray.splice(0, 1)
console.log(myArray)

輸出:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

在 JavaScript 中使用 slice() 方法從陣列中刪除物件

slice() 方法返回從開始到結束選擇的陣列部分的修改副本,但不會包括傳遞給該方法的結束索引。slice() 方法的語法如下。

Array.slice(startIndex, endIndex)

在這裡,startIndex 是我們開始提取的從零開始的索引。可以使用負索引,它表示距序列末尾的偏移量。例如,slice(-3) 提取序列中的最後三個元素。如果 startIndex 未定義,則 slice() 函式從索引 0 開始,而如果 startIndex 大於陣列的索引範圍,則返回一個空陣列。

endIndex 選項也是一個從零開始的索引,在該索引之前結束提取。slice() 方法最多提取 endIndex,但包括 endIndex 本身。如果排除 endIndex 選項,slice() 函式從序列的末尾提取,即提取到 array.length。如果 endIndex 大於序列的長度,slice() 函式也會提取到序列的末尾。

下面示例中的 slice(1,3) 方法將從第二個索引到第四個索引中提取元素。由於陣列中沒有第四個索引,它將提取元素直到序列結束。

程式碼示例:

var myArray =
    [{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)

輸出:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

使用 filter() 方法從陣列中刪除一個物件

filter() 方法使用通過函式提供的測試的元素建立一個新陣列。這意味著它將返回一個新的物件陣列。如果沒有元素通過測試,該函式將返回一個空陣列。我們將使用箭頭函式來演示 filter() 方法。

filter() 方法使用了一個叫做回撥函式的術語,就像

var newArray = myArray.filter(
    (element, index, array) => {
        ...Items passing this condition will be added to the new array...})

該方法接受三個引數。element 選項是陣列中正在處理的當前元素。index 是可選的,表示陣列中正在處理的當前元素的索引。最後,array 選項是呼叫的陣列過濾器並且是可選的。

首先,按照上述方法建立一個包含物件的陣列。然後使用陣列變數呼叫 filter() 函式。指定 item 作為箭頭函式的引數,並使用表示式 item.id ! == 1 返回陣列的元素。將新陣列儲存在 newArray 變數中並將其記錄在控制檯中。

下面的示例僅返回 id 不等於值 1 的陣列元素。因此,它返回陣列的第二個和第三個元素。

示例程式碼:

var myArray =
    [{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.filter((item) => item.id !== 1);
console.log(newArray);

輸出:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]
作者: Ashok Chapagai
Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub

相關文章 - JavaScript Array