search

Home >Web Front-end >JS Tutorial >How to concatenate arrays without changing the original array?

How to concatenate arrays without changing the original array?

王林
王林forward
2023-08-25 09:49:021320browse

How to concatenate arrays without changing the original array?

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.

grammar

Users can use the array.splice() method according to the following syntax. 

  let results = array.splice(startIndex, count, element1, element2, element3, ... , elementN);

parameter

  • 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.

Use the spread operator to concatenate 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 without changing the original array. array.

grammar

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.

Example 1

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>

Use the filter() method to splice arrays without changing the original array

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.

grammar

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.

Example 2

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>

Use the slice() method to splice arrays without changing the original array

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.

grammar

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.

Example 3

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!

JavaScript Array 运算符 count Filter 字符串
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Calculate the value of (m)1/n in JavaScriptNext article：Calculate the value of (m)1/n in JavaScript

Related articles

See more