js splice使用总结（对js数组的增删改），替换数组的指定位置的数据，以及js数组的位置移动，向上（前）移动，或者向下（后）移动

splice()：插入、删除和替换

3 个参数：起始位置、要删除的项数和要插入的任意数量的项
再简单说splice有三个位置的参数，第一个index是数组的位置，第二个是这个位置要删除的项数、，第三个位置以及后面的第四五等位置都表示插入的数组项

看代码理解吧

数组数据：

let userArray=[
	    {"id":1,"name":"小明"},
	    {"id":2,"name":"小红"},
	    {"id":3,"name":"小花"}
]

splice插入

//深拷贝上面的对象数组，为了不影响后面的数组
let array1 = JSON.parse(JSON.stringify(userArray));

//例：splice插入
let user = {"id":4,"name":"小黑"};
let user2 = {"id":5,"name":"小华"};
//表示在2数组的最后的位置，删除0个数据项，然后插入user的新数组项
array1.splice(3,0,user,user2);
console.log(array1);//可以看到数组最后面多了一个小黑,小华

splice删除

//表示在数组的位置2，往后删除一项
let array2 = JSON.parse(JSON.stringify(userArray));
array2.splice(2,1);
console.log(array2);//可以看到数组的小花被删除掉了

splice替换

//例：替换数组中index=1的位置的小红替换为小东
let array3 = JSON.parse(JSON.stringify(userArray));
let xiaodong = {"id":6,"name":"小东"};
//表示在数组index位置1处往后删除一个数据项再新增一个数据项（即先把小红删了然后再新增一个小东）
array3.splice(1,1,xiaodong);
console.log(array3);//可以看到数组的小红被替换成小东了

数组里面的位置移动

上移（向前）移动

//向上移动，把小花往上移动
let array4= JSON.parse(JSON.stringify(userArray));
this.up(2,array4);
console.log(array4);

//向上移动
function up(index,arr){
	if(index == 0){//第一个节点不移动
	}else{
		let curObj = arr[index];//当前位置对象
		let preObj = arr[index-1];//上一个位置对象
		arr.splice(index,1,preObj);//上一个节点移动到当前节点
		arr.splice(index-1,1,curObj);//当前节点往上移动
	}
	
}

下移（向后）移动

//向下移动，把小明往下移动
let array5= JSON.parse(JSON.stringify(userArray));
this.down(0,array5);
console.log(array5);

function down(index,arr){
	if(index == arr.length-1){//最后节点不移动
	}else{
		let curObj = arr[index];//当前位置对象
		let downObj = arr[index+1];//下一个位置对象
		arr.splice(index,1,downObj);//下一个节点移动到当前节点
		arr.splice(index+1,1,curObj);//当前节点往下移动
	}
	
}

可以自己测试一下，把下面这段代码粘贴到文本框修改后缀为html即可调试

<script>

console.log("splice使用demo");
let userArray=[
	    {"id":1,"name":"小明"},
	    {"id":2,"name":"小红"},
	    {"id":3,"name":"小花"}
]
//深拷贝上面的对象数组，为了不影响下面的数组
let array1 = JSON.parse(JSON.stringify(userArray));

//例：splice插入，替换数组中index=1的位置的小红为小黑
let user = {"id":4,"name":"小黑"};
let user2 = {"id":5,"name":"小华"};
//表示在数组的最后的位置，删除0个数据项，然后插入user的新数组项
array1.splice(3,0,user,user2);
console.log(array1);//可以看到数组最后面多了一个小黑，小华

//splice删除
let array2 = JSON.parse(JSON.stringify(userArray));
array2.splice(2,1);
console.log(array2);//可以看到数组的小花被删除掉了

//splice替换
let array3 = JSON.parse(JSON.stringify(userArray));
let xiaodong = {"id":6,"name":"小东"};
array3.splice(1,1,xiaodong);
console.log(array3);//可以看到数组的小红被替换成小东了


//向上移动，把小花往上移动
let array4= JSON.parse(JSON.stringify(userArray));
this.up(2,array4);
console.log(array4);

//向下移动，把小明往下移动
let array5= JSON.parse(JSON.stringify(userArray));
this.down(0,array5);
console.log(array5);


function up(index,arr){
	if(index == 0){//第一个节点不移动
	}else{
		let curObj = arr[index];//当前位置对象
		let preObj = arr[index-1];//上一个位置对象
		arr.splice(index,1,preObj);//上一个节点移动到当前节点
		arr.splice(index-1,1,curObj);//当前节点往上移动
	}
	
}

function down(index,arr){
	if(index == arr.length-1){//最后节点不移动
	}else{
		let curObj = arr[index];//当前位置对象
		let downObj = arr[index+1];//下一个位置对象
		arr.splice(index,1,downObj);//下一个节点移动到当前节点
		arr.splice(index+1,1,curObj);//当前节点往下移动
	}
	
}
</script>