如何在 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>

更新于：2022年8月22日

353 次浏览

启动您的 职业生涯

完成课程后获得认证

开始
广告