JavaScript splice() 方法详解
本文详细介绍 JavaScript 中 splice() 方法的定义、语法及参数说明。该方法用于在指定位置添加或删除数组元素，会直接修改原始数组并返回被删除的元素。文章通过多个具体代码实例，演示了如何向数组添加新元素、替换现有元素以及删除指定数量的元素，帮助开发者掌握数组的动态修改技巧。
JavaScript 中的 splice() 函数
向数组内插入新元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js数组添加元素_本站</title>
</head>
<body>
<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>splice 的定义与使用场景
splice() 函数的主要作用是在数组中执行元素的插入或删除操作。
需留意：该操作会直接修改原始数组。
返回结果
若仅执行单次元素删除，返回值为由被删元素构成的单元素数组；若未执行任何删除操作，则返回空数组。
语法格式
array.splice(index,howmany,item1,.....,itemX)
参数 Values
| 参数 | 描述 |
|---|---|
| index | 必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 |
| howmany | 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 |
| item1, ..., itemX | 可选。要添加到数组的新元素 |
返回结果
| Type | 描述 |
|---|---|
| Array | 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。 |
补充示例
示例代码
删除数组索引为 2 的元素，并在该位置插入新元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本站</title>
</head>
<body>
<p id="demo">点击按钮添加和删除元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>示例代码 从索引 2 开始，连续删除后续两个元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本站</title>
</head>
<body>
<p id="demo">点击按钮删除数组中的两个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>至此，关于 JavaScript splice() 方法的详细解析已介绍完毕。如需了解更多 JavaScript splice 相关内容，建议查阅本站历史文章或继续浏览下方推荐内容，感谢大家对本平台的支持！
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗？let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解：基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13