在 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< /i> 不改變原始陣列的數組。
使用者可以按照下面的語法使用擴充運算子來拼接數組，而不會改變原始數組。
let splicedArray = [...array].splice(0, 3);
在上面的語法中，數組是一個原始數組，我們使用展開運算子對其進行克隆，並對克隆的數組使用 splice() 方法。
在下面的範例中，我們建立了一個包含各種字串的陣列。之後，我們使用帶有“[]”大括號中的擴展運算符的數組來克隆它，並使用 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>
#我們可以透過過濾原始陣列中的元素來建立一個新陣列。 splice() 方法從起始索引中提取總數的元素。因此，我們可以使用 filter() 方法從起始索引中過濾掉總計數元素。
使用者可以依照下面的語法使用filter()方法來拼接數組，而不會改變原始數組。
let splicedArray = array.filter((ele, ind) => {
if (ind >= startIndex && ind < counts + startIndex) {
return true;
}
return false;
})
在上面的語法中，我們過濾了從 startIndex 到 count startIndex 的陣列元素。
在下面的範例中，我們有一個陣列並對該陣列使用 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()方法來擷取陣列元素，這裡我們將使用陣列的副本。當我們將 0 作為 slice() 方法的第一個參數傳遞，同時將其與陣列一起使用時，它會複製該陣列。
之後，我們可以使用splice()方法來拼接數組，而無需改變原始數組。
使用者可以按照下面的語法使用slice()和splice()方法來拼接數組，而不會改變原始數組。
let clonedArray = array.slice(0); let splicedArray = clonedArray.splice(start, end);
在上面的語法中，首先，我們使用 slice() 方法來克隆數組，然後使用 splice() 方法來 splice() 一個數組。
下面的範例包含具有多個數值的數字數組。之後，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中文網其他相關文章！
