首頁 > 文章 > web前端 > 如何在不改變原始數組的情況下拼接數組？

如何在不改變原始數組的情況下拼接數組？

王林轉載: 2023-08-25 09:49:021280瀏覽

如何在不改變原始數組的情況下拼接數組？

在 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()方法將複製陣列用於splice 不改變原始陣列的數組。

文法

使用者可以按照下面的語法使用擴充運算子來拼接數組，而不會改變原始數組。

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

在上面的語法中，數組是一個原始數組，我們使用展開運算子對其進行克隆，並對克隆的數組使用 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() 方法來 splice() 一個數組。

範例 3

下面的範例包含具有多個數值的數字數組。之後，clonedArray包含原始陣列的克隆。

接下來，我們將splice()方法與clonedArray一起使用，使用者可以檢查原始陣列是否相同。

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

以上是如何在不改變原始數組的情況下拼接數組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript Array 运算符 count Filter 字符串

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：在 JavaScript 中計算 (m)1/n 的值下一篇：在 JavaScript 中計算 (m)1/n 的值

看更多