In JavaScript, we can use the splice() method to splice arrays. splice() Method inserts or deletes single or multiple elements in an array. We can pass the starting index as the first parameter of the splice() method from which we can insert or delete elements. It takes the number of elements to be removed from the array as the second parameter and the array value to be inserted into the array as the third parameter.
This tutorial will teach us how to splice arrays without changing the original array. ChangingThe original array means making changes to the array. Whenever we use original array with splice() method, it inserts or removes some elements from the original array. So we will clone the array and use the splice() method on the cloned array to keep the original array identical.
Users can use the array.splice() method according to the following syntax.
let results = array.splice(startIndex, count, element1, element2, element3, ... , elementN);
startIndex - This is the first index at which an element is inserted or removed from the array.
Count - It is the number of elements in the array to be replaced. If we pass 0 as count value, it will insert the element at startIndex.
Element1, element2, …, element - This is the new array element to be replaced or inserted starting from the starting index.
Now, we will see different ways of splicing arrays without changing the original array.
The spread operatorallows us to clone an array. We can use the spread operator to create a clone of the original array. After that, we can use the splice() method to clone the array to splice< /i> without changing the original array. array.
Users can use the spread operator to splice arrays according to the following syntax without changing the original array.
let splicedArray = [...array].splice(0, 3);
In the above syntax, the array is a primitive array, we clone it using the spread operator and use the splice() method on the cloned array.
In the example below, we create an array containing various strings. After that, we clone it using an array with the spread operator in "[]" braces and use the splice() method.
We passed 0 as the starting index in the splice() method and passed 3 as the total number of elements to remove from the array.
<html>
<body>
<h3> Using the <i> spread operator </i> to splice an array without mutating the original array. </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let array = ["C", "Java", "CPP", "JavaScript", "TypeScript", "html", "HTML", "NodeJs", "ReactJs", "NextJs"];
let splicedArray = [...array].splice(0, 3);
output.innerHTML += "Orignal array after the splicing: " + array + "<br>";
output.innerHTML += "Spliced array after the splicing:" + splicedArray + "<br>";
</script>
</body>
</html>
We can create a new array by filtering the elements in the original array. splice() Method extracts the total number of elements from the starting index. Therefore, we can use the filter() method to filter out the total count elements from the starting index.
Users can use the filter() method according to the following syntax to splice arrays without changing the original array.
let splicedArray = array.filter((ele, ind) => {
if (ind >= startIndex && ind < counts + startIndex) {
return true;
}
return false;
})
In the above syntax, we filter the array elements from startIndex to count startIndex.
In the example below, we have an array and use the filter() method on the array. The user can see how the filter() method extracts the total number of elements from startIndex.
Furthermore, when we use the filter() method on the original array, it remains unchanged.
<html>
<body>
<h3> Using the <i> filter() method </i> to splice an array without mutating the original array. </h3>
<div id = "output"> </div>
<button onclick = "spliceArray()"> Splice an array </button>
<script>
let output = document.getElementById('output');
function spliceArray() {
let startIndex = 5;
let counts = 3;
let array = ["C", "Java", "Cpp", "JavaScript", "TypeScript", "html", "HTML", "NodeJs", "ReactJs", "NextJs"];
let splicedArray = array.filter((ele, ind) => {
if (ind >= startIndex && ind < counts + startIndex) {
return true;
}
return false;
})
output.innerHTML += "Orignal array after the splicing is " + array + "<br>";
output.innerHTML += "Spliced array after the splicing is " + splicedArray + "<br>";
}
</script>
</body>
</html>
slice() method extracts array elements, here we will use a copy of the array. When we pass 0 as the first parameter of the slice() method while using it with an array, it clones the array.
After that, we can use the splice() method to splice the arrays without changing the original array.
Users can use the slice() and splice() methods according to the following syntax to splice arrays without changing the original array.
let clonedArray = array.slice(0); let splicedArray = clonedArray.splice(start, end);
In the above syntax, first, we use the slice() method to clone the array, and then use the splice() method to splice() an array.
The following example contains a numeric array with multiple numeric values. Afterwards, clonedArray contains a clone of the original array.
Next, we use the splice() method with clonedArray, the user can check if the original array is the same.
<html>
<body>
<h3> Using the <i> slice() </i> method to splice an array without mutating the original array </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let array = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
let clonedArray = array.slice(0);
let splicedArray = clonedArray.splice(1, 6);
output.innerHTML += "Orignal array after the splicing: " + array + "<br>";
output.innerHTML += "Spliced array after the splicing: " + splicedArray + "<br>";
</script>
</body>
</html>
The above is the detailed content of How to concatenate arrays without changing the original array?. For more information, please follow other related articles on the PHP Chinese website!
Introduction to the meaning of cloud download windows
Solution to the problem that setting the Chinese interface of vscode does not take effect
How to close port 135 445
Why is the mobile hard drive so slow to open?
How to use split in python
mobile phone screen tft
How to resize pictures in ps
0x80070057 parameter error solution
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
