資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中向現有陣列新增新值？
在程式設計中，無論是構建小型應用程式還是高階應用程式，向現有陣列新增新值都非常常見。每當我們需要擴充套件陣列中的專案數量時，我們都會使用它來向陣列中新增新值。在本文中，我們將學習多種向陣列新增新值的方法，如下所示。
使用 Array.push() 方法。
使用 Array.unshift() 方法。
使用 Array.splice() 方法。
使用擴充套件運算子。
使用 Array.push() 方法
Array.push() 方法是最常用的方法，用於在陣列末尾新增任何值。此方法至少需要一個專案作為引數，您可以為此方法傳遞多個值，並且所有專案將分別新增到陣列中。此方法會更改陣列的長度，並返回陣列的新長度。
語法
Array.push( item1, item2, item3 … … ... item-N )
引數
- Item1, item2, ….. item-N − 要插入的值。至少需要 1 個。
返回值 − 陣列的長度。
示例
在此示例中，我們在陣列末尾插入一個新值。
<html>
<body>
<h2>Adding new value to an array using Array.push method</h2>
<p> Click on the button to add a new Value. </p>
<button onclick="addValue()"> Click Here </button>
<p> Existing Array : <span id="showArr"> 1,2,3,4,5 </span> </p>
<script>
// Create an array
let arr = [1, 2, 3, 4, 5]
function addValue() {
// Get a random number under 100
let val = Math.floor(Math.random() * 100);
// Push the value to the array
arr.push(val)
// Show the updated array to the paragraph
let para = document.getElementById("showArr")
para.innerText = arr;
}
</script>
</body>
</html>
使用 Array.unshift() 方法
array.unshift() 方法用於在陣列開頭插入一個新專案。此方法至少需要一個專案作為引數，您可以為此方法傳遞多個值，並且所有專案將分別新增到陣列的開頭。此方法會更改陣列的長度，並返回陣列的新長度。
語法
Array.unshift( item1, item2, item3 … … ... item-N )
引數
Item1, item2, ….. item-N − 要插入的值。至少需要 1 個。
返回值 − 陣列的長度。
示例
在此示例中，我們在陣列開頭插入一個新值。
<html>
<body>
<h2>Adding new value to an array using Array.unshift method</h2>
<p> Click on the button to add a new Value. </p>
<button onclick="addValue()"> Click Here </button>
<p> Existing Array : <span id="showArr"> 1,2,3,4,5 </span> </p>
<script>
// Create an array
let arr = [1, 2, 3, 4, 5]
function addValue() {
// Get a random number under 100
let val = Math.floor(Math.random() * 100);
// Insert the value to the array
arr.unshift(val)
// Show the updated array to the paragraph
let para = document.getElementById("showArr")
para.innerText = arr;
}
</script>
</body>
</html>
使用 Array.splice() 方法
JavaScript 中的 array.splice() 方法用於向給定陣列新增或刪除一些值。它在運算元組方面非常靈活，您可以在刪除舊元素的同時新增新元素。此方法會覆蓋原始陣列，而不是建立新陣列。
語法
以下是使用 Array splice() 方法的語法：
array.splice(index, howMany, [element1][, ..., elementN]);
引數
index − 開始更改陣列的索引。
howMany − 一個整數，指示要刪除的舊陣列元素的數量。如果howMany為 0，則不刪除任何元素。
element1, ..., elementN − 要新增到陣列的元素。如果您沒有指定任何元素，則 splice 只是從陣列中刪除元素。
返回值
返回新陣列的長度。
示例
在此示例中，我們將一個元素新增到陣列的第 3 個位置。
<html>
<body>
<h2>Adding new value to an array using Array.splice method</h2>
<p> Click on the button to add a new Value. </p>
<button onclick="addValue()"> Click Here </button>
<p> Existing Array : <span id="showArr"> 1,2,3,4,5 </span> </p>
<script>
// Create an array
let arr = [1, 2, 3, 4, 5]
function addValue() {
// Get a random number under 100
let val = Math.floor(Math.random() * 100);
// Insert the value to the array
arr.splice(3, 1, val)
// Show the updated array to the paragraph
let para = document.getElementById("showArr")
para.innerText = arr;
}
</script>
</body>
</html>
使用擴充套件運算子
JavaScript 中的擴充套件運算子是在 ES6 中引入的。擴充套件運算子允許我們將陣列擴充套件為單個數組元素。要使用擴充套件運算子，應在陣列名稱之前加上三個點 (...)。
要使用擴充套件運算子向現有陣列新增新元素，我們建立一個包含我們要插入到現有陣列中的元素的陣列，以及使用擴充套件運算子訪問的現有陣列的專案。
示例
在此示例中，我們將使用擴充套件運算子向陣列新增一些值。
<html>
<body>
<h2>Adding new value to an array using spread operator </h2>
<p> Click on the button to add a new Value. </p>
<button onclick="addValue()"> Click Here </button>
<p> Existing Array : <span id="showArr"> 1,2,3,4,5 </span> </p>
<script>
// Existing array
let arr = [1, 2, 3, 4, 5]
function addValue() {
// Items to be added
let val = [6, 7]
// Insert the value to the array
arr = [...arr, ...val]
// Show the updated array to the paragraph
let para = document.getElementById("showArr")
para.innerText = arr;
}
</script>
</body>
</html>
在本教程中，我們討論了在 JvaScript 中向現有陣列新增新值。在 JavaScript 中有幾種方法可以做到這一點，包括使用 Array.push() 方法、Array.unshift() 方法、Array.splice() 方法和擴充套件運算子。
4K+ 次檢視
