如何在 JavaScript 中在数组开头添加新数组元素?
我们将学习如何在 JavaScript 中在数组开头添加新数组元素。要在 JavaScript 中实现这一点，我们有多种方法，以下是其中一些。
使用数组 unshift() 方法
使用数组 splice() 方法
使用 ES6 扩展运算符
使用数组 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>
使用数组 splice() 方法
JavaScript 中的数组 splice() 方法用于向数组中添加或删除元素。此方法通过覆盖其中的元素来更改原始数组。
语法
以下是 Array splice() 方法的语法 -
arr.splice(index, howmany, element1, element2, . . . . . elementN)
这里 arr 是将添加元素的原始数组。
参数
index - 这是必需参数，指定要在哪个索引处添加或删除元素。
howmany - 这是可选参数，指定要删除的项目数。
Element1, element2, . . . . . . elementN − 要添加的元素。
它返回完整的更新数组。
方法
要在元素的开头添加元素，我们传递第一个参数 0，因为我们要在第 0th 索引处添加一个元素，第二个参数也传递 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>
