資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在不修改原始陣列的情況下拼接陣列？
在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);
在上述語法中，陣列是原始陣列，我們使用擴充套件運算子建立了它的克隆，並使用克隆陣列和`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>
4K+ 瀏覽量
