JavaScript 中移除陣列元素

Javascript 前端技術 Web 開發

從 Javascript 陣列中移除元素可以透過多種方法實現。可以從開頭、結尾或任何特定位置移除元素。我們將根據需要了解在 Javascript 中從陣列中移除元素的各種方法。

在這篇文章中，我們有一個數字陣列，我們的任務是從 Javascript 陣列中移除一個元素。

移除 Javascript 陣列元素的方法

以下列出了幾種從 Javascript 陣列中移除元素的方法，我們將在本文中逐步解釋並提供完整的示例程式碼。

使用 pop() 方法
使用 shift() 方法
使用 splice() 方法
使用 slice() 方法
使用 filter() 方法
使用 delete 運算子
使用陣列重置
使用 set() 方法
使用 splice() 方法結合 forEach
使用 for 迴圈建立一個新陣列
使用 splice() 方法結合 indexOf()
使用 lodash _.remove() 方法

使用 pop() 方法

為了從 Javascript 陣列中移除元素，我們使用了 pop() 方法。它用於移除陣列的最後一個元素並返回已刪除的元素。

為了顯示陣列、已移除的元素和刪除後的更新後的陣列，我們使用了 id 分別為 array、removed 和 result 的 div。我們使用了 getElementById() 和 innerHTML 來獲取 div 並顯示陣列、已移除的元素和輸出。
然後我們使用 **arr.pop()** 來移除儲存在 **arr** 中的陣列的最後一個元素。

示例

這是一個完整的示例程式碼，實現了上述使用 **pop()** 方法從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>pop()</strong>
        method for removing an element from an array in 
        Javascript.
    </p>
    <div id="array"></div>
    <div id="removed"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;
        let deletedEle= arr.pop();
        document.getElementById("removed")
            .innerHTML = "Removed Element: " + deletedEle;
        document.getElementById("result")
            .innerHTML = "Array after deletion: " + arr;
    </script>
</body>
</html>

使用 shift() 方法

在這種移除 Javascript 陣列元素的方法中，我們使用了 shift() 方法。它用於移除陣列的第一個元素並返回已刪除的元素。

為了顯示陣列、已移除的元素和刪除後的更新後的陣列，我們使用了與第一種方法相同的方法。
然後我們使用 **arr.shift()** 來移除儲存在 arr 中的陣列的第一個元素。

示例

這是一個完整的示例程式碼，實現了上述使用 **shift()** 方法從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>shift()</strong>
        method for removing an element from an array in 
        Javascript.
    </p>
    <div id="array"></div>
    <div id="removed"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;
        let deletedEle= arr.shift();
        document.getElementById("removed")
            .innerHTML = "Removed Element: " + deletedEle;
        document.getElementById("result")
            .innerHTML = "Array after deletion: " + arr;
    </script>
</body>
</html>

使用 splice() 方法

在這種方法中，我們使用了 splice() 方法來從 Javascript 陣列中移除元素。

**splice()** 方法用於透過移除、替換現有元素或新增新元素來修改陣列的內容。
我們使用 **arr.splice(3, 1);** 從陣列的第三個索引移除一個元素。
為了顯示陣列和輸出，我們使用了與第一種方法類似的方法。

示例

這是一個完整的示例程式碼，實現了上述使用 **splice()** 方法從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>splice()</strong>
        method for removing an element from an array in 
        Javascript.
    </p>
    <div id="array"></div>
    <div id="removed"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5, 6];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;
        let deletedEle= arr.splice(3, 1);
        document.getElementById("removed")
            .innerHTML = "Removed Element: " + deletedEle;
        document.getElementById("result")
            .innerHTML = "Array after deletion: " + arr;
    </script>
</body>
</html>

使用 slice() 方法

在這種移除 Javascript 陣列元素的方法中，我們使用了 slice() 方法。此方法選擇陣列中一部分元素，並返回包含這些選定元素的新陣列。

我們使用 **arr.slice(0, 2).concat(arr.slice(3))** 從 Javascript 陣列中移除一個元素。
第一個切片操作 **arr.slice(0, 2)** 建立一個從索引 0 到索引 1（不包括索引 2）的新陣列。
下一個切片操作 **arr.slice(3)** 建立一個從第三個索引到最後一個元素的新陣列。
concat() 方法將這兩個陣列組合成一個數組，從而從陣列中移除第三個元素（索引 2）。

示例

這是一個完整的示例程式碼，實現了上述使用 **slice()** 方法從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>slice()</strong>
        method for removing an element from an array in 
        Javascript.
    </p>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5, 6];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;
        let newArr= arr.slice(0, 2).concat(arr.slice(3))
        document.getElementById("result")
            .innerHTML = "Array after deletion: " + newArr;
    </script>
</body>
</html>

使用 filter() 方法

在這種方法中，我們使用了 filter() 方法從 Javascript 陣列中移除元素。它建立一個包含滿足特定條件的元素的新陣列。

我們使用了 **arr.filter(value => value != 5)** 來移除陣列中的 5。
這裡，5 與陣列中的每個元素進行比較。如果任何元素的值為 5，則將其從陣列中排除；如果元素的值不為 5，則將其包含在陣列中。

示例

這是一個完整的示例程式碼，實現了上述使用 **filter()** 方法從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>filter()</strong>
        method for removing an element from an array in 
        Javascript.
    </p>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5, 6];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;
        let newArr= arr.filter(value => value!=5)
        document.getElementById("result")
            .innerHTML = "Array after deletion: " + newArr;
    </script>
</body>
</html>

使用 delete 運算子

在這種移除 Javascript 陣列元素的方法中，我們使用了 delete 運算子，該運算子刪除物件的任何屬性或屬性值（在本例中為陣列）。

我們使用了 **delete arr[1]** 來刪除 arr 中索引 1 處的元素。
它返回 **true**，並且陣列的長度與刪除元素之前的長度相同。

示例

這是一個完整的示例程式碼，實現了上述使用 **delete** 運算子從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>delete</strong>
        operator for removing an element from an array in 
        Javascript.
    </p>
    <div id="array"></div>
    <div id="removed"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;
        let deletedEle= delete arr[1];
        document.getElementById("removed")
            .innerHTML = "Removed Element: " + deletedEle;
        document.getElementById("result")
            .innerHTML = "Array after deletion: " + arr;
    </script>
</body>
</html>

使用陣列重置

在這個示例中，我們有兩個陣列。我們可以將陣列的長度設定為 0，或者將陣列賦值給一個空陣列，從而刪除陣列的所有元素。
對於 **arr1**，我們使用 length 屬性將陣列的 length 設定為 0，從而移除陣列的所有元素。
對於 **arr2**，我們將此陣列賦值給一個空陣列，從而移除陣列的所有元素。

示例

這是一個完整的示例程式碼，實現了上述移除陣列元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have set array length as 
        0 for <strong>arr1</strong> and an empty array 
        for <strong>arr2</strong>.
    </p>
    <div id="array1"></div>
    <div id="array2"></div>
    <div id="result1"></div>
    <div id="result2"></div>
    <script>
        let arr1 = [1, 2, 3, 4, 5, 6];
        let arr2 = ["MongoDB", "ExpressJs", "ReactJs", "Node js"];
        document.getElementById("array1")
            .innerHTML = "Initial first array: " + arr1;
        document.getElementById("array2")
            .innerHTML = "Initial second array: " + arr2;
            
        arr1.length=0;
        arr2 = [];
        document.getElementById("result1")
            .innerHTML = "Updated first array: " + arr1;
        document.getElementById("result2")
            .innerHTML = "Updated second array: " + arr2;
    </script>
</body>
</html>

使用 set() 方法

在這種移除 Javascript 陣列元素的方法中，我們使用了 set() 方法。Set 只包含唯一值，刪除任何重複的元素（如果存在）。

我們使用 **new Set(arr)** 將陣列轉換為 Set。由於 Set 只包含唯一值，因此它會刪除任何重複的值。
然後我們使用擴充套件運算子(...) 將 Set 轉換為包含唯一值的陣列，並將其儲存在 newArray 中。

示例

這是一個完整的示例程式碼，實現了上述使用 **set()** 方法從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>set()</strong>
        method for removing duplicate elements from array in 
        Javascript.
    </p>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 4, 5, 2, 8];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;
        let newArray= [...new Set(arr)];
        document.getElementById("result")
            .innerHTML = "Unique array: " + newArray;
    </script>
</body>
</html>

**注意：**此方法不推薦用於從陣列中移除元素，因為它只移除重複的值。

使用 splice() 方法結合 forEach

在這種方法中，我們使用了 forEach() 方法結合 **splice()** 方法從 Javascript 陣列中移除元素。

我們使用 **forEach()** 方法迭代陣列中的每個元素，其中 num 代表當前元素。
然後，我們使用 if/else 條件語句在陣列中查詢 3。然後，**splice()** 方法在此索引處移除一個元素。

示例

這是一個完整的示例程式碼，實現了上述使用 **splice()** 方法結合 **forEach()** 從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>forEach()</strong>
        method with <strong>splice()</strong> for removing an 
        element from an Array in Javascript.
    </p>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;

        arr.forEach((num, index) => {
            if (num === 3) {
                arr.splice(index, 1);
            }
        });
        document.getElementById("result")
            .innerHTML = "Array after deletion: " + arr;
    </script>
</body>
</html>

使用 for 迴圈建立一個新陣列

在這種方法中，我們使用 for 迴圈和 **條件語句** 以及一個新陣列來從 Javascript 陣列中移除元素。

我們使用 **for 迴圈** 迭代陣列 arr 中的所有元素。
條件語句查詢需要移除的元素。
除了 if/else 條件語句排除的元素外，所有元素都使用 push() 方法推送到新陣列 **updatedArr** 中。

示例

這是一個完整的示例程式碼，實現了上述移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 10, 9];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;

        let updatedArr = [];
        for(let i=0; i<arr.length; i++){
            if(arr[i] != 3){
                updatedArr.push(arr[i]);
            }
        }
        document.getElementById("result")
            .innerHTML = "Array after deletion: " + updatedArr;
    </script>
</body>
</html>

使用 splice() 方法結合 indexOf()

在這種移除 Javascript 陣列元素的方法中，我們使用了 indexOf() 方法結合 **splice()** 方法。

我們使用 **indexOf()** 方法查詢要移除的元素的索引。
然後，我們使用 **if/else** 語句檢查 indexOf 方法是否找到了索引。
然後，**splice()** 方法從陣列中移除指定的索引。

示例

這是一個完整的示例程式碼，實現了上述使用 **splice()** 方法結合 **indexOf()** 方法從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>indexOf()</strong>
        method with <strong>splice()</strong> for removing an 
        element from an Array in Javascript.
    </p>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5, 6];
        document.getElementById("array")
            .innerHTML = "Initial array: " + arr;
        let index =arr.indexOf(4);
        if(index !== -1){
            arr.splice(index, 1);
        }
        document.getElementById("result")
            .innerHTML = "Array after deletion: " + arr;
    </script>
</body>
</html>

使用 lodash _.remove() 方法

在這種方法中，我們使用了 Lodash 庫來從陣列中移除元素。我們使用了 _.remove() Lodash 庫的方法來從陣列中移除元素。

我們在 head 部分使用了 script 標籤從內容分發網路 (CDN) 包含 Lodash 庫，以新增 Lodash 的實用程式函式，這允許我們使用諸如 **_.remove** 之類的 lodash 方法。
我們使用了 addEventListener 來新增 **DOMContentLoaded** 事件，該事件確保在執行 javascript 之前已載入 HTML 程式碼。
我們使用了 Lodash **_.remove()** 方法，該方法從元素中移除所有偶數。

示例

這是一個完整的示例程式碼，實現了上述使用 **lodash _.remove()** 方法從陣列中移除元素的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Removing element from Array in Javascript
    </title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" defer></script>
</head>
<body>
    <h2>
        Removing element from Array in Javascript
    </h2>
    <p>
        In this example, we have used <strong>lodash _.remove()
        </strong> method for removing an element from an Array  
        Javascript.
    </p>
    <div id="array"></div>
    <div id="removed"></div>
    <div id="result"></div>
    
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            let arr = [1, 2, 3, 4, 5, 6];
            document.getElementById("array")
                .innerHTML = "Initial array: " + arr;
            let deletedEle = _.remove(arr, num => num % 2 === 0);
            document.getElementById("removed")
                .innerHTML = "Removed Elements: " + deletedEle;
            document.getElementById("result")
                .innerHTML = "Array after deletion: " + arr; 
        });
    </script>
</body>
</html>

結論

本文介紹了在 JavaScript 中刪除陣列元素的十二種不同方法，包括使用**pop()**方法、**shift()**方法、**splice()**方法、**slice()**方法和**filter()**方法等。其中，不推薦使用**set()**方法，因為它並非用於刪除元素，而是用於儲存唯一值；同時，避免使用**splice()**結合**forEach()**方法，因為這可能會導致**索引錯位**，建議優先使用**filter()**方法。

Sharon Christine

更新於：2024年11月18日

瀏覽量：205

開啟您的職業生涯

完成課程獲得認證

立即開始