数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中向现有数组添加新值？
要向 Javascript 中的现有数组添加新值，可以使用多种方法。我们将了解七种不同的方法来向现有的 数组 添加新元素。
在本文中，我们有一个数字数组，我们的任务是在 JavaScript 中向现有数组添加新值。
向现有数组添加新值的方法
以下是本文将讨论的在 JavaScript 中向现有数组添加新值的方法列表，我们将逐步解释并提供完整的示例代码。
- 使用 push() 方法
- 使用索引赋值
- 使用 unshift() 方法
- 使用 splice() 方法
- 使用 concat() 方法
- 使用扩展运算符
- 使用 Underscore.Js _.union() 方法
使用 push() 方法
为了在 JavaScript 中向现有数组添加新值，我们使用了 push() 方法。它将一个或多个元素追加到数组的末尾，并返回数组的新长度。
- 我们使用了两个 div 元素来显示数组和使用 getElementById()、innerHTML 和 innerText 属性更新后的数组。我们还添加了一个 按钮，它在点击时触发 addValue() 函数。
- 我们使用了 Math.random() 和 Math.floor() 方法来生成一个要添加到数组中的随机元素，并将其存储在变量 val 中。
- 然后，我们使用 push() 方法将 val 元素添加到数组的末尾。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 push() 方法在 JavaScript 中向现有数组添加新值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding New Value to an Existing Array in JavaScript
</title>
</head>
<body>
<h2>
Adding New Value to an Existing Array in JavaScript
</h2>
<p>
In this article, we have used <strong>push()</strong>
method to add new value to an existing array in
JavaScript.
</p>
<button onclick="addValue()">Add Element</button>
<br><br>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5];
document.getElementById('array')
.innerHTML= "Initial array: " +arr
function addValue() {
let val = Math.floor(Math.random() * 100);
arr.push(val);
document.getElementById("result")
.innerText = "Updated array: " +arr;
}
</script>
</body>
</html>
使用索引赋值
在这种向 JavaScript 中的现有数组添加新值的方法中，我们使用了索引赋值，即直接将新元素赋值给数组。
- 我们使用了两个 div 元素来显示数组和使用 getElementById()、innerHTML 和 innerText 属性更新后的数组。我们还添加了一个按钮，它在点击时触发 addValue() 函数。
- 我们使用了 length 属性来查找数组的大小，并将其存储在 len 变量中。我们在将新值赋值给数组时使用了 length 值作为索引。
- 我们使用了 Math.random() 和 Math.floor() 方法来生成一个要添加到数组中的随机元素，并将其存储在变量 val 中。
- 然后，我们使用 arr[len]=val; 将随机生成的元素 (val) 添加到由 len 指定索引处的数组中。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 索引赋值 在 JavaScript 中向现有数组添加新值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding New Value to an Existing Array in JavaScript
</title>
</head>
<body>
<h2>
Adding New Value to an Existing Array in JavaScript
</h2>
<p>
In this article, we have used <strong>index</strong>
assignment to add new value to an existing array in
JavaScript.
</p>
<button onclick="addValue()">Add Element</button>
<br><br>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5];
document.getElementById('array')
.innerHTML= "Initial array: " +arr
function addValue() {
let len=arr.length;
let val = Math.floor(Math.random() * 100);
arr[len]=val;
document.getElementById("result")
.innerText = "Updated array: " +arr;
}
</script>
</body>
</html>
使用 unshift() 方法
在这种方法中，我们使用了 unshift() 方法在 JavaScript 中向现有数组添加新值。它在数组的开头添加元素。
- 我们使用了两个 div 元素来显示数组和使用 getElementById()、innerHTML 和 innerText 属性更新后的数组。我们还添加了一个按钮，它在点击时触发 addValue() 函数。
- 我们使用了 Math.random() 和 Math.floor() 方法来生成一个要添加到数组中的随机元素，并将其存储在变量 val 中。
- 然后，我们使用 unshift() 方法将 val 元素添加到数组的开头。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 unshift() 方法在 JavaScript 中向现有数组添加新值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding New Value to an Existing Array in JavaScript
</title>
</head>
<body>
<h2>
Adding New Value to an Existing Array in JavaScript
</h2>
<p>
In this article, we have used <strong>unshift()</strong>
method to add new value to an existing array in
JavaScript.
</p>
<button onclick="addValue()">Add Element</button>
<br><br>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5];
document.getElementById('array')
.innerHTML= "Initial array: " +arr
function addValue() {
let val = Math.floor(Math.random() * 100);
arr.unshift(val);
document.getElementById("result")
.innerText = "Updated array: " +arr;
}
</script>
</body>
</html>
使用 splice() 方法
在这种向 JavaScript 中的现有数组添加新值的方法中，我们使用了 splice() 方法。splice() 方法用于修改、删除或替换现有元素并添加新元素。
- 我们使用了两个 div 元素来显示数组和使用 getElementById()、innerHTML 和 innerText 属性更新后的数组。我们还添加了一个按钮，它在点击时触发 addValue() 函数。
- 我们使用了 Math.random() 和 Math.floor() 方法来生成一个要添加到数组中的随机元素，并将其存储在变量 val 中。
- 然后，我们使用 arr.splice(3, 0, val)，其中 3 表示要添加新元素的索引，0 表示要删除的元素数为 0，而 val 是我们要添加到数组中的元素。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 splice() 方法在 JavaScript 中向现有数组添加新值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding New Value to an Existing Array in JavaScript
</title>
</head>
<body>
<h2>
Adding New Value to an Existing Array in JavaScript
</h2>
<p>
In this article, we have used <strong>splice()</strong>
method to add new value to an existing array in
JavaScript.
</p>
<button onclick="addValue()">Add Element</button>
<br><br>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5];
document.getElementById('array')
.innerHTML= "Initial array: " +arr
function addValue() {
let val = Math.floor(Math.random() * 100);
arr.splice(3, 0, val);
document.getElementById("result")
.innerText = "Updated array: " +arr;
}
</script>
</body>
</html>
使用 concat() 方法
在这种方法中，我们使用了 concat() 方法在 JavaScript 中向现有数组添加新值。它用于连接两个或多个数组，而不会更改现有数组。
- 我们使用了两个 div 元素来显示数组和使用 getElementById()、innerHTML 和 innerText 属性更新后的数组。我们还添加了一个按钮，它在点击时触发 addValue() 函数。
- 已初始化两个数组，即 arr1 和 arr2，然后使用 concat() 方法连接它们并将结果存储到 arr 中。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 concat() 方法在 JavaScript 中向现有数组添加新值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding New Value to an Existing Array in JavaScript
</title>
</head>
<body>
<h2>
Adding New Value to an Existing Array in JavaScript
</h2>
<p>
In this article, we have used <strong>concat()</strong>
method to add new value to an existing array in
JavaScript.
</p>
<button onclick="addValue()">Add Element</button>
<br><br>
<div id="array"></div>
<div id="result"></div>
<script>
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [10, 20, 30, 40, 50];
document.getElementById('array')
.innerHTML= "Initial array1: " +arr1
+"<br> Initial array2: " +arr2;
function addValue() {
let arr= arr1.concat(arr2)
document.getElementById("result")
.innerText = "Updated array: " +arr;
}
</script>
</body>
</html>
使用扩展运算符
在这种方法中，我们使用了 扩展运算符 在 JavaScript 中向现有数组添加新值。
- 我们使用了两个 div 元素来显示数组和使用 getElementById()、innerHTML 和 innerText 属性更新后的数组。我们还添加了一个按钮，它在点击时触发 addValue() 函数。
- 我们初始化了两个数组 arr 和 val，并使用了扩展运算符 [...arr, ...val] 将这两个数组组合到新数组 newAarr 中。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 扩展运算符 在 JavaScript 中向现有数组添加新值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding New Value to an Existing Array in JavaScript
</title>
</head>
<body>
<h2>
Adding New Value to an Existing Array in JavaScript
</h2>
<p>
In this article, we have used <strong>spread operator(...)
</strong> method to add new value to an existing array in
JavaScript.
</p>
<button onclick="addValue()">Add Element</button>
<br><br>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5];
document.getElementById('array')
.innerHTML= "Initial array: " +arr
function addValue() {
let val = [6, 7];
newAarr = [...arr, ...val]
document.getElementById("result")
.innerText = "Updated array: " +newAarr;
}
</script>
</body>
</html>
使用 Underscore.Js _.union() 方法
在这种方法中，我们使用了 _.union() 方法，该方法属于 Underscore.Js 库，用于在 JavaScript 中向现有数组添加新值。它返回每个数组中唯一值的组合数组。
- 我们使用了两个 div 元素来显示数组和使用 getElementById()、innerHTML 和 innerText 属性更新后的数组。我们还添加了一个按钮，它在点击时触发 addValue() 函数。
- 然后，我们使用了 _.union() 方法，该方法对作为参数传递的两个数组进行联合。
- 它只组合两个数组的唯一值。
示例
这是一个完整的示例代码，实现了上述步骤，以使用 _.union() 方法在 JavaScript 中向现有数组添加新值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding New Value to an Existing Array in JavaScript
</title>
<script src="https://unpkg.com/underscore@1.13.6/underscore-min.js"></script>
</head>
<body>
<h2>
Adding New Value to an Existing Array in JavaScript
</h2>
<p>
In this article, we have used <strong>_.union()</strong>
method to add new value to an existing array in
JavaScript.
</p>
<button onclick="addValue()">Add Element</button>
<br><br>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5];
document.getElementById('array')
.innerHTML= "Initial array: " +arr
function addValue() {
let newArr = _.union(arr, [3, 10]);
document.getElementById("result")
.innerText = "Updated array: " +newArr;
}
</script>
</body>
</html>
结论
在本文中，我们讨论了如何在 JavaScript 中向现有数组添加新值。在 JavaScript 中有多种方法可以做到这一点，包括使用 push() 方法、索引赋值、unshift() 方法、splice() 方法、concat() 方法、扩展运算符 和 _.union() 方法。_.union() 方法只向数组添加唯一值，并忽略重复值。
更新于： 2024 年 11 月 20 日
4K+ 次浏览
广告