資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 JavaScript 中在陣列開頭新增新元素？
我們將學習如何在 JavaScript 中在陣列開頭新增新元素。在 JavaScript 中實現此目標有多種方法，其中一些方法如下。
使用 Array unshift() 方法
使用 Array splice() 方法
使用 ES6 展開運算子
使用 Array unshift() 方法
JavaScript 中的陣列 **unshift()** 方法用於在陣列開頭新增新元素。此方法透過覆蓋其中的元素來更改原始陣列。
語法
arr.unshift(element1, element2, . . . . . . , elementN)
引數
**element1, element2, …, elementN** − 要插入的元素。如果您有多個元素，請以逗號分隔的引數輸入。
**arr** − 這是我們將向其中新增新元素的原始陣列。
**返回值** − 它返回更新後陣列的長度。
示例
在此示例中，我們使用 Array unshift() 方法在陣列開頭新增 0。
<html> <body> <h2>Adding new array elements at the beginning of an array.</h2> <p><b>Array:</b> <span id="oldArray"> </span> </p> <p><b>Updated Array: </b> <span id="updatedArray"></span></p> <button id="btn" >Click to Add</button> </body> <script> // Get the button element let btn = document.getElementById("btn") // Get the element where old array situated let oldArray = document.getElementById("oldArray") // Get the element where a new array will be assigned let updatedArray = document.getElementById("updatedArray") // The old array let array = [1, 2, 3, 4, 5] // Show the old array oldArray.innerText = array; btn.onclick = () => { // Insert 0 at the starting of the array array.unshift(0) updatedArray.innerText = array } </script> </html>
使用 Array splice() 方法
JavaScript 中的陣列 **splice()** 方法用於向陣列新增或刪除元素。此方法透過覆蓋其中的元素來更改原始陣列。
語法
以下是 Array splice() 方法的語法：
arr.splice(index, howmany, element1, element2, . . . . . elementN)
這裡 **arr** 是將向其中新增元素的原始陣列。
引數
**index** − 這是必需引數，指定要新增或刪除元素的索引。
**howmany** − 這是可選引數，指定要刪除的專案數量。
**Element1, element2, . . . . . . elementN** − 要新增的元素。
它返回完整的更新後的陣列。
方法
要在元素的開頭新增元素，我們將第一個引數設定為 0，因為我們是在第 0 個索引處新增元素，第二個引數也設定為 0，因為我們沒有從陣列中刪除任何元素。第三個引數將是要新增到陣列中的元素。
示例
在此示例中，我們使用 Array.splice 方法在陣列開頭新增“22”。
<html> <body> <h2>Adding new array elements at the beginning of an array.</h2> <p><b>Array:</b> <span id="oldArray"> </span> </p> <p><b>Updated Array: </b> <span id="updatedArray"></span></p> <button id="btn" >Click to Add</button> </body> <script> // Get the button element let btn = document.getElementById("btn") // Get the element where old array situated let oldArray = document.getElementById("oldArray") // Get the element where new array will be assigned let updatedArray = document.getElementById("updatedArray") // The old array let array = [1, 2, 3, 4, 5] // Show the old array oldArray.innerText = array; btn.onclick = () => { // Insert 22 at the starting of the array array.splice(0, 0, 22) updatedArray.innerText = array } </script> </html>
使用 ES6 展開運算子
在這種方法中，我們將建立一個新陣列，並將它的第一個元素設定為我們想要新增的元素，第二個元素將是舊陣列的所有元素，我們將使用展開運算子訪問它們。
示例
在此示例中，我們使用 ES6 展開運算子在陣列開頭新增“22”。
<html> <body> <h2> Adding new array elements at the beginning of an array. </h2> <p> <b>Array:</b> <span id="oldArray"> </span> </p> <p> <b>Updated Array: </b> <span id="updatedArray"> </span> </p> <button id="btn" >Click to Add</button> </body> <script> // Get the button element let btn = document.getElementById("btn") // Get the element where old array situated let oldArray = document.getElementById("oldArray") // Get the element where new array will be assigned let updatedArray = document.getElementById("updatedArray") // The old array let array = [1, 2, 3, 4, 5] // Show the old array oldArray.innerText = array; btn.onclick = () => { // Create a new Array let newArr = [22, ...array] updatedArray.innerText = newArr } </script> </html>
353 次瀏覽
