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

秒速五厘米 2023-10-03 12:05 17阅读 0赞

#### 文章目录 ####

*  前言
 *  一、splice方法官方文档节选
 *  二、根据文档测试
 *   *  方法一：
     *  方法二：
     *  方法三：
     *  方法四：
 *  总结

--------------------

## 前言 ##

在学前端的时候一直对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，并且后面跟上要插入的元素  
> 替换：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素

> @作者：加辣椒了吗？  
> 简介：憨批大学生一枚，喜欢在博客上记录自己的学习心得，也希望能够帮助到你们！  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021060109523638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ==,size_16,color_FFFFFF,t_70