如何在 JavaScript 中向現有陣列新增新值？

Javascript Web 開發前端技術

要向 Javascript 中的現有陣列新增新值，可以使用多種方法。我們將瞭解七種不同的方法來向現有的陣列新增新元素。

在本文中，我們有一個數字陣列，我們的任務是在 JavaScript 中向現有陣列新增新值。

向現有陣列新增新值的方法

以下是本文將討論的在 JavaScript 中向現有陣列新增新值的方法列表，我們將逐步解釋並提供完整的示例程式碼。

使用 push() 方法
使用索引賦值
使用 unshift() 方法
使用 splice() 方法
使用 concat() 方法
使用擴充套件運算子
使用 Underscore.Js _.union() 方法

使用 push() 方法

為了在 JavaScript 中向現有陣列新增新值，我們使用了 push() 方法。它將一個或多個元素追加到陣列的末尾，並返回陣列的新長度。

我們使用了兩個 div 元素來顯示陣列和使用 getElementById()、innerHTML 和 innerText 屬性更新後的陣列。我們還添加了一個按鈕，它在點選時觸發 addValue() 函式。
我們使用了 Math.random() 和 Math.floor() 方法來生成一個要新增到陣列中的隨機元素，並將其儲存在變數 val 中。
然後，我們使用 push() 方法將 val 元素新增到陣列的末尾。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 push() 方法在 JavaScript 中向現有陣列新增新值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>push()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let val = Math.floor(Math.random() * 100);
            arr.push(val);
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

使用索引賦值

在這種向 JavaScript 中的現有陣列新增新值的方法中，我們使用了索引賦值，即直接將新元素賦值給陣列。

我們使用了兩個 div 元素來顯示陣列和使用 getElementById()、innerHTML 和 innerText 屬性更新後的陣列。我們還添加了一個按鈕，它在點選時觸發 addValue() 函式。
我們使用了 length 屬性來查詢陣列的大小，並將其儲存在 len 變數中。我們在將新值賦值給陣列時使用了 length 值作為索引。
我們使用了 Math.random() 和 Math.floor() 方法來生成一個要新增到陣列中的隨機元素，並將其儲存在變數 val 中。
然後，我們使用 arr[len]=val; 將隨機生成的元素 (val) 新增到由 len 指定索引處的陣列中。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 索引賦值 在 JavaScript 中向現有陣列新增新值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>index</strong>
        assignment to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let len=arr.length;
            let val = Math.floor(Math.random() * 100);
            arr[len]=val;
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

使用 unshift() 方法

在這種方法中，我們使用了 unshift() 方法在 JavaScript 中向現有陣列新增新值。它在陣列的開頭新增元素。

我們使用了兩個 div 元素來顯示陣列和使用 getElementById()、innerHTML 和 innerText 屬性更新後的陣列。我們還添加了一個按鈕，它在點選時觸發 addValue() 函式。
我們使用了 Math.random() 和 Math.floor() 方法來生成一個要新增到陣列中的隨機元素，並將其儲存在變數 val 中。
然後，我們使用 unshift() 方法將 val 元素新增到陣列的開頭。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 unshift() 方法在 JavaScript 中向現有陣列新增新值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>unshift()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let val = Math.floor(Math.random() * 100);
            arr.unshift(val);
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

使用 splice() 方法

在這種向 JavaScript 中的現有陣列新增新值的方法中，我們使用了 splice() 方法。splice() 方法用於修改、刪除或替換現有元素並新增新元素。

我們使用了兩個 div 元素來顯示陣列和使用 getElementById()、innerHTML 和 innerText 屬性更新後的陣列。我們還添加了一個按鈕，它在點選時觸發 addValue() 函式。
我們使用了 Math.random() 和 Math.floor() 方法來生成一個要新增到陣列中的隨機元素，並將其儲存在變數 val 中。
然後，我們使用 arr.splice(3, 0, val)，其中 3 表示要新增新元素的索引，0 表示要刪除的元素數為 0，而 val 是我們要新增到陣列中的元素。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 splice() 方法在 JavaScript 中向現有陣列新增新值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>splice()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let val = Math.floor(Math.random() * 100);
            arr.splice(3, 0, val);
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

使用 concat() 方法

在這種方法中，我們使用了 concat() 方法在 JavaScript 中向現有陣列新增新值。它用於連線兩個或多個數組，而不會更改現有陣列。

我們使用了兩個 div 元素來顯示陣列和使用 getElementById()、innerHTML 和 innerText 屬性更新後的陣列。我們還添加了一個按鈕，它在點選時觸發 addValue() 函式。
已初始化兩個陣列，即 arr1 和 arr2，然後使用 concat() 方法連線它們並將結果儲存到 arr 中。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 concat() 方法在 JavaScript 中向現有陣列新增新值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>concat()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr1 = [1, 2, 3, 4, 5];
        let arr2 = [10, 20, 30, 40, 50];
        document.getElementById('array')
            .innerHTML= "Initial array1: " +arr1 
                        +"<br> Initial array2: " +arr2;
        function addValue() {
            let arr= arr1.concat(arr2)
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

使用擴充套件運算子

在這種方法中，我們使用了擴充套件運算子在 JavaScript 中向現有陣列新增新值。

我們使用了兩個 div 元素來顯示陣列和使用 getElementById()、innerHTML 和 innerText 屬性更新後的陣列。我們還添加了一個按鈕，它在點選時觸發 addValue() 函式。
我們初始化了兩個陣列 arr 和 val，並使用了擴充套件運算子 [...arr, ...val] 將這兩個陣列組合到新陣列 newAarr 中。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 擴充套件運算子 在 JavaScript 中向現有陣列新增新值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>spread operator(...)
        </strong> method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let val = [6, 7];
            newAarr = [...arr, ...val]
            document.getElementById("result")
                .innerText = "Updated array: " +newAarr;
        }
    </script>
</body>
</html>

使用 Underscore.Js _.union() 方法

在這種方法中，我們使用了 _.union() 方法，該方法屬於 Underscore.Js 庫，用於在 JavaScript 中向現有陣列新增新值。它返回每個陣列中唯一值的組合陣列。

我們使用了兩個 div 元素來顯示陣列和使用 getElementById()、innerHTML 和 innerText 屬性更新後的陣列。我們還添加了一個按鈕，它在點選時觸發 addValue() 函式。
然後，我們使用了 _.union() 方法，該方法對作為引數傳遞的兩個陣列進行聯合。
它只組合兩個陣列的唯一值。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 _.union() 方法在 JavaScript 中向現有陣列新增新值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
    <script src="https://unpkg.com/underscore@1.13.6/underscore-min.js"></script>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>_.union()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let newArr = _.union(arr, [3, 10]);
            document.getElementById("result")
                .innerText = "Updated array: " +newArr;
        }
    </script>
</body>
</html>

結論

在本文中，我們討論瞭如何在 JavaScript 中向現有陣列新增新值。在 JavaScript 中有多種方法可以做到這一點，包括使用 push() 方法、索引賦值、unshift() 方法、splice() 方法、concat() 方法、擴充套件運算子 和 _.union() 方法。_.union() 方法只向陣列新增唯一值，並忽略重複值。

Saurabh Jaiswal

更新於： 2024 年 11 月 20 日

4K+ 次瀏覽

開啟您的職業生涯

透過完成課程獲得認證

開始學習