How to use the splice() and slice() methods to manipulate arrays

foreword

Both splice() and slice() are methods for manipulating arrays in JavaScript. How to use them? When to use it? What's the difference? figure it out today

---

What is splice() and what is it for? how to use?

splice() is used to add, delete and replace in the array, it can realize the following functions:

Function 1: Delete elements in the array
Function 2: Add new elements to the array
Function 3: Replace elements in the array with new elements

The basic syntax of the splice method is as follows:

array.splice(start, deleteCount, item1, item2, ...)

Parameter description:
start: the array subscript of the element to be deleted or inserted.
deleteCount: the number of elements to be deleted, if the value is 0, no elements will be deleted.
item1, item2, ...: New elements to be inserted into the array, there can be more than one.

	var arr = ["孙悟空", "猪八戒", "唐僧", "沙和尚"];
	
	//删除元素，从下标2开始删除2个元素
	arr.splice(2, 2);
	console.log(arr); //["孙悟空", "猪八戒"]
	
	//添加元素，从下标1开始添加2个元素
	arr.splice(1, 0, "张麻子", "县长");
	console.log(arr); //["孙悟空", "张麻子", "县长", "猪八戒"]
	
	//替换元素，从下标2开始替换1个元素
	arr.splice(2, 1, "独孤求败");
	console.log(arr); //["孙悟空", "张麻子", "独孤求败", "猪八戒"]

★★★ Key point: The splice method will directly modify the original array. If you don't want to modify the original array, you can copy the original array first and then operate.

---

What is slice() and what is it for? how to use?

slice() is used to obtain the elements of the specified interval from the array, and it can realize the following functions:

Function 1: Get the elements of the specified interval without modifying the original array
Function 2: Copy a part of the array to generate a new array

The basic syntax of the slice method is as follows:

array.slice(start, end)

Parameter description:
start: The start subscript to be copied, including the subscript elements.
end: The end subscript to be copied, excluding the subscript element. If this parameter is omitted, all elements from start to the end of the array are copied.

	var arr = ["孙悟空", "猪八戒", "唐僧", "沙和尚"];
	
	//获取指定区间的元素，不会修改原数组
	var newArr1 = arr.slice(1, 3);
	console.log(newArr1); //["猪八戒", "唐僧"]
	
	//拷贝数组的一部分，生成一个新的数组
	var newArr2 = arr.slice();
	console.log(newArr2); //["孙悟空", "猪八戒", "唐僧", "沙和尚"]

★★★Key point: the slice method will not modify the original array, but return a new array, so an array can be copied through the slice method. In addition, if the start subscript or end subscript of the copy is a negative number, it indicates the position counted from the end of the array.

---

The difference between splice and slice method

splice and slice are two array methods in JavaScript, and their usage has the following differences:

1. The splice method can modify the original array, while the slice method does not modify the original array, but returns a new array.
2. The splice method can be used to delete, add, and replace elements, while the slice method is only used to obtain elements in the specified range.

	var arr = ["孙悟空", "猪八戒", "唐僧", "沙和尚"];
	
	//使用splice方法删除数组中的元素，修改原数组
	arr.splice(1, 2);
	console.log(arr); //["孙悟空", "沙和尚"]
	
	//使用slice方法获取指定区间的元素，不修改原数组
	var newArr = arr.slice(1, 2);
	console.log(newArr); //["沙和尚"]
	console.log(arr); //["孙悟空", "沙和尚"]

We first use the splice method to delete the elements in the array, that is, delete 2 elements from subscript 1, thus modifying the original array. Then we use the slice method to obtain the elements of the specified interval, that is, the elements from subscript 1 to subscript 2, so that the original array is not modified, but a new array is returned.

---

summary

After understanding the usage of splice and slice, we know that in general:
when we need to modify the original array, we can use the splice method;
when we need to obtain the elements of the specified range, we can use the slice method.

---