在 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() 方法。它用於移除陣列中的最後一個元素並返回被刪除的元素。

為了顯示刪除前後的陣列、被移除的元素和更新後的陣列，我們使用了 div，其 id 分別為 array、removed 和 result。我們使用了 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 屬性將陣列的長度設定為 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 中的所有元素。
條件語句查詢需要移除的元素。
所有元素都使用 push() 方法推送到新陣列 updatedArr 中，除了 if/else 條件語句排除的元素。

示例

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

<!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 次瀏覽

開啟您的職業生涯

透過完成課程獲得認證

開始學習