splice方法最详细最全面的解释！！！

全栈程序员站长

发布于 2022-11-08 16:32:05

5330

发布于 2022-11-08 16:32:05

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

文章目录

前言

在学前端的时候一直对splice方法不太清楚，今天特意总结了一下！

一、splice方法官方文档节选

查阅了splice方法的示例文档，如下：（不想看论述的，可以直接跳到下面看总结！）

splice 
返回值: Array 
所属对象: Array 
The elements to add to the array. If you don't specify any elements, splice simply removes elements from the array. 
要添加到数组中的元素。如果您没有指定任何元素，则splice简单地从数组中删除元素。
示例： 
Using splice
splice用法
The following script excerpt illustrates the use of splice:
下面的脚本节选说明了splice的用法:
示例：
myFish = ["angel", "clown", "mandarin", "surgeon"];
document.writeln("myFish: "   myFish   "<BR>");
方法一：
removed = myFish.splice(2, 0, "drum");
document.writeln("After adding 1: "   myFish);
document.writeln("removed is: "   removed   "<BR>");
方法二：
removed = myFish.splice(3, 1);
document.writeln("After removing 1: "   myFish);
document.writeln("removed is: "   removed   "<BR>");
方法三：
removed = myFish.splice(2, 1, "trumpet");
document.writeln("After replacing 1: "   myFish);
document.writeln("removed is: "   removed   "<BR>");
方法四：
removed = myFish.splice(0, 2, "parrot", "anemone", "blue");
document.writeln("After replacing 2: "   myFish);
document.writeln("removed is: "   removed);
This script displays:
结果：  
myFish: ["angel", "clown", "mandarin", "surgeon"]
结果一：
After adding 1: ["angel", "clown", "drum", "mandarin", "surgeon"]
removed is: undefined
结果二：
After removing 1: ["angel", "clown", "drum", "surgeon"]
removed is: mandarin
结果三：
After replacing 1: ["angel", "clown", "trumpet", "surgeon"]
removed is: drum
结果四：
After replacing 2: ["parrot", "anemone", "blue", "trumpet", "surgeon"]
removed is: ["angel", "clown"]

二、根据文档测试

（不想看论述的，可以直接跳到下面看总结！）

方法一：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历数组 -->
<ul v-for="(i,j) in myFish">
<li>{ 
{ 
j}}：  { 
{ 
i}}</li>
</ul>
<button @click="aa">按钮</button>
</div>
<script>
const app = new Vue({ 

el:"#app",
data:{ 

myFish : ["angel", "clown", "mandarin", "surgeon"]
},
methods:{ 

aa(){ 

// 插入
// 文档示例的方法：
// removed = myFish.splice(2, 0, "drum");
// document.writeln("After adding 1: " myFish);
// document.writeln("removed is: " removed "<BR>");
this.myFish.splice(2, 0, "drum");
// 文档示例的结果:
// After adding 1: ["angel", "clown", "drum", "mandarin", "surgeon"]
// removed is: undefined
}
}
})
</script>
</body>
</html>

这里来解释一下：原数组是[“angel”, “clown”, “mandarin”,“surgeon”]，使用myFish.splice(2, 0, “drum”)方法后，结果是[“angel”, “clown”,“drum”, “mandarin”, “surgeon”]

方法二：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历列表 -->
<ul v-for="(i,j) in myFish">
<li>{ 
{ 
j}}：  { 
{ 
i}}</li>
</ul>
<button @click="aa">按钮</button>
</div>
<script>
const app = new Vue({ 

el:"#app",
data:{ 

myFish : ["angel", "clown","drum", "mandarin", "surgeon"]
},
methods:{ 

aa(){ 

// 删除：
// 文档示例的方法:
// removed = myFish.splice(3, 1);
// document.writeln("After removing 1: " myFish);
// document.writeln("removed is: " removed "<BR>");
this.myFish.splice(3, 1);
// 文档示例的结果:
// After removing 1: ["angel", "clown", "drum", "surgeon"]
// removed is: mandarin
}
}
})
</script>
</body>
</html>

这里来解释一下：原数组是[“angel”, “clown”,“drum”, “mandarin”, “surgeon”] 使用myFish.splice(3, 1)方法后，结果是[“angel”, “clown”, “drum”, “surgeon”]

方法三：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历列表 -->
<ul v-for="(i,j) in myFish">
<li>{ 
{ 
j}}：  { 
{ 
i}}</li>
</ul>
<button @click="aa">按钮</button>
</div>
<script>
const app = new Vue({ 

el:"#app",
data:{ 

myFish : ["angel", "clown", "mandarin", "surgeon"]
},
methods:{ 

aa(){ 

// 替换
// 文档示例的方法:
// removed = myFish.splice(2, 1, "trumpet");
// document.writeln("After replacing 1: " myFish);
// document.writeln("removed is: " removed "<BR>");
this.myFish.splice(2, 1, "trumpet");
// 结果:
// After replacing 1: ["angel", "clown", "trumpet", "surgeon"]
// removed is: drum
}
}
})
</script>
</body>
</html>

这里来解释一下：原数组是[“angel”, “clown”, “mandarin”, “surgeon”] 使用myFish.splice(2, 1, “trumpet”)方法后，结果是[“angel”, “clown”, “trumpet”, “surgeon”]

方法四：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历列表 -->
<ul v-for="(i,j) in myFish">
<li>{ 
{ 
j}}：  { 
{ 
i}}</li>
</ul>
<button @click="aa">按钮</button>
</div>
<script>
const app = new Vue({ 

el:"#app",
data:{ 

myFish : ["angel", "clown", "mandarin", "surgeon"]
},
methods:{ 

aa(){ 

// 文档示例的方法:
// removed = myFish.splice(0, 2, "parrot", "anemone", "blue");
// document.writeln("After replacing 2: " myFish);
// document.writeln("removed is: " removed);
this.myFish.splice(0, 2, "parrot", "anemone", "blue");
// 文档示例的结果:
// After replacing 2: ["parrot", "anemone", "blue", "trumpet", "surgeon"]
// removed is: ["angel", "clown"]
}
}
})
</script>
</body>
</html>

这里来解释一下：原数组是[“angel”, “clown”, “mandarin”, “surgeon”] 使用myFish.splice(0, 2, “parrot”, “anemone”, “blue”);方法后，结果是[“parrot”, “anemone”, “blue”, “trumpet”, “surgeon”]

总结

splice作用：删除/插入/替换元素第一个参数传入开始处理的下标，删除：第二个参数传入你要删除几个元素（如果没有传就删除后面所有的元素）插入：第二个参数传入0，并且后面跟上要插入的元素替换：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
@作者：加辣椒了吗？简介：憨批大学生一枚，喜欢在博客上记录自己的学习心得，也希望能够帮助到你们！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年9月24日，如有侵权请联系 cloudcommunity@tencent.com 删除

angel