数据结构
网络
关系型数据库管理系统
操作系统
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+ 次查看
