在学前端的时候一直对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 "
");
方法一:
removed = myFish.splice(2, 0, "drum");
document.writeln("After adding 1: " myFish);
document.writeln("removed is: " removed "
");
方法二:
removed = myFish.splice(3, 1);
document.writeln("After removing 1: " myFish);
document.writeln("removed is: " removed "
");
方法三:
removed = myFish.splice(2, 1, "trumpet");
document.writeln("After replacing 1: " myFish);
document.writeln("removed is: " removed "
");
方法四:
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 "
");
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 "
");
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 "
");
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,并且后面跟上要插入的元素
替换:第二个参数,表示我们要替换几个元素,后面是用于替换前面的元素
@作者:加辣椒了吗?
简介:憨批大学生一枚,喜欢在博客上记录自己的学习心得,也希望能够帮助到你们!