大家好，又见面了，我是你们的朋友全栈君。
文章目录
- 前言
- 一、splice方法官方文档节选
- 二、根据文档测试
- 方法一：
- 方法二：
- 方法三：
- 方法四：
- 总结
前言
在学前端的时候一直对splice方法不太清楚，今天特意总结了一下！
一、splice方法官方文档节选
查阅了splice方法的示例文档，如下： （不想看论述的，可以直接跳到下面看总结！）
代码语言：javascript复制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"]二、根据文档测试
（不想看论述的，可以直接跳到下面看总结！）
方法一：
代码如下：
代码语言：javascript复制<!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”]
方法二：
代码如下：
代码语言：javascript复制<!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”]
方法三：
代码如下：
代码语言：javascript复制<!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”]
方法四：
代码如下：
代码语言：javascript复制<!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，并且后面跟上要插入的元素 替换：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
@作者：加辣椒了吗？ 简介：憨批大学生一枚，喜欢在博客上记录自己的学习心得，也希望能够帮助到你们！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
