splice（）方法采坑

缺乏、安全感 2021-09-16 13:48 542阅读 0赞

# splice（）方法采坑 #

splice()方法用于插入、删除或者替换数组里的元素，在做项目时，我们会经常用到这种方法。这种方法会改变原数组！  
来看看语法：

arrayObject.splice(index,howmany,item1,.....,itemX)

它的主要参数有index，howmany，item1，…，itemX；  
index——必须。规定从何处添加/删除元素，表示下标。  
howmany——必须。规定删除多少元素，必须是数字，但可以是0；  
item1，…，itemX——可选。要添加到数组的新元素。  
下面看两个例子：  
第一个，删除并添加：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>splice()方法采坑</title>
    </head>
    <body>
    	<p id="text">添加和删除元素</p>
    	<button onclick="myFunction()">点击</button>
    	<script>
    		function myFunction(){
    			var arr = ["one","two","three","four","five","six"];
    			arr.splice(2,1,"一","二");
    			var x = document.getElementById("text");
    			x.innerHTML = arr;
    		}
    	</script>
    </body>
    </html>

结果：  
![在这里插入图片描述][70]  
或者咱们也可以直接删除：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>splice()方法采坑</title>
    </head>
    <body>
    	<p id="text">添加和删除元素</p>
    	<button onclick="myFunction()">点击</button>
    	<script>
    		function myFunction(){
    			var arr = ["one","two","three","four","five","six"];
    			arr.splice(2,2);
    			var x = document.getElementById("text");
    			x.innerHTML = arr;
    		}
    	</script>
    </body>
    </html>

再看：  
![在这里插入图片描述][70 1]  
很Nice，但是，如果数组中的值是变量，而当数组里的前两个值或者后两个值同时为空时（假如现在第一个和第二个同时为空）：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>splice()方法采坑</title>
    </head>
    <body>
    	<p id="text">添加和删除元素</p>
    	<button onclick="myFunction()">点击</button>
    	<script>
    		function myFunction(){
    			var arr = ["","","three","four","five","six"];
    			for(var i=0;i<arr.length;i++){
    				if(arr[i] == ""){
    					arr.splice(i,1)		//删除为空的值
    				}
    			}
    			console.log(arr)
    		}
    	</script>
    </body>
    </html>

打印出来以后发现：  
![在这里插入图片描述][70 2]  
其实它的前面还有一个空值！  
找了好长时间没找到这个坑咋填，我就又把这个循环写了一遍，也就是说如果有这种情况出现，先删除里面其他的空值，再循环删除剩余的空值；也就是这个样子：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>splice()方法采坑</title>
    </head>
    <body>
    	<p id="text">添加和删除元素</p>
    	<button onclick="myFunction()">点击</button>
    	<script>
    		function myFunction(){
    			var arr = ["","","three","four","five","six"];
    			for(var i=0;i<arr.length;i++){
    				if(arr[i] == ""){
    					arr.splice(i,1)
    				}
    			}
    			//将新的数组再删除一遍里面剩余的空值
    			for(var i=0;i<arr.length;i++){
    				if(arr[i] == ""){
    					arr.splice(i,1)
    				}
    			}
    			console.log(arr)
    		}
    	</script>
    </body>
    </html>

然后就可以将里面的所有空值都删除了：  
![在这里插入图片描述][70 3]

[70]: /images/20210813/ad480c4be6504d61b09a04cb415c1a0c.png
[70 1]: /images/20210813/9a69bc65234b4900b30df86f78a305d5.png
[70 2]: /images/20210813/e8bda7db72a74087af22b1e7f12b5caf.png
[70 3]: /images/20210813/1f97361e47754c6bb7b1bc82a08480f7.png