JavaScript 如何在不改变原数组的情况下拼接一个数组

在JavaScript中，我们可以使用splice()方法来拼接一个数组。 splice()方法从数组中插入或删除单个或多个元素。我们可以传递起始索引作为splice() 方法的第一个参数，我们可以从中插入或删除这些元素。它把要从数组中删除的元素数量作为第二个参数，把数组值作为第三个参数插入到数组中。

本教程将教我们在不改变原数组的情况下拼接数组。改变原数组意味着对数组进行修改。每当我们用splice() 方法使用原始数组时，它要么从原始数组中插入或删除一些元素。因此，我们将制作一个数组的克隆，并对克隆的数组使用 splice()方法，以保持原始数组的不变。

语法

用户可以按照下面的语法来使用array.splice()方法。

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

参数

startIndex – 这是插入或删除数组元素的第一个索引。
Count – 它是要在数组中替换的元素的数量。如果我们传递0作为count的值，它将插入startIndex的元素。
Element1, element2, …, element – 它是新的数组元素，从起始索引开始替换或插入。

现在，我们将看到在不改变原数组的情况下拼接数组的不同方法。

使用传播操作符在不改变原数组的情况下拼接一个数组

传播操作符允许我们制作一个数组的克隆。我们可以使用传播操作符创建一个原始数组的克隆，之后，我们可以使用克隆数组的 splice() 方法来拼接一个数组，而不改变原始数组。

语法

用户可以按照下面的语法来使用传播操作符在不改变原始数组的情况下拼接一个数组。

let splicedArray = [...array].splice(0, 3);

在上面的语法中，数组是一个原始数组，我们使用spread运算符来制作它的克隆，并对克隆的数组使用 splice() 方法。

例子1

在下面的例子中，我们创建了一个包含各种字符串的数组。之后，我们在'[]’大括号中使用了数组的扩散操作符来制作它的克隆，并使用了 splice() 方法。

在splice()方法中，我们将0作为起始索引，将3作为要从数组中删除的元素总数。

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

使用filter()方法来拼接一个数组而不改变原始数组

我们可以通过过滤原数组中的元素来创建一个新数组。splice()方法从起始索引中提取总计数的元素。因此，我们可以使用filter() 方法从起始索引中过滤掉总计数元素。

语法

用户可以按照下面的语法来使用filter()方法来拼接一个数组而不改变原始数组。

let splicedArray = array.filter((ele, ind) => {
   if (ind >= startIndex && ind < counts + startIndex) {
      return true;
   }
      return false;
})

在上面的语法中，我们已经过滤了从startIndex到count+startIndex的数组元素。

例2

在下面的例子中，我们有一个数组，并对该数组使用 filter() 方法。用户可以看到 filter() 方法是如何从startIndex中提取元素的总计数的。

同时，当我们对原始数组使用 filter() 方法时，它也保持不变。

<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()方法在不改变原数组的情况下拼接一个数组

slice() 方法提取数组元素，这里我们将使用制作的数组副本。当我们把0作为 slice() 方法的第一个参数传递给数组时，它就会产生一个数组的克隆。

之后，我们可以使用 splice()法在不改变原数组的情况下拼接一个数组。

语法

用户可以按照下面的语法来使用 slice() 和splice()方法，在不改变原数组的情况下拼接一个数组。

let clonedArray = array.slice(0);
let splicedArray = clonedArray.splice(start, end);

在上面的语法中，首先，我们使用slice()方法对数组进行克隆，之后，我们使用splice()方法对数组进行拼接。

例3

下面的例子包含有多个数值的数字数组。之后， clonedArray包含原始数组的克隆。

接下来，我们用clonedArray的 splice()方法，用户可以检查原始数组是否相同。

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