Heim > Artikel > Web-Frontend > Wie verkette ich Arrays, ohne das ursprüngliche Array zu ändern?
Wie verkette ich Arrays, ohne das ursprüngliche Array zu ändern?
- 王林nach vorne
- 2023-08-25 09:49:021237Durchsuche
In JavaScript können wir die Methode splice() verwenden, um Arrays zu spleißen. Die Methode splice() fügt einzelne oder mehrere Elemente in ein Array ein oder löscht sie. Wir können den Startindex als ersten Parameter der Methode splice() übergeben, aus dem wir Elemente einfügen oder löschen können. Als zweiter Parameter wird die Anzahl der aus dem Array zu entfernenden Elemente und als dritter Parameter der in das Array einzufügende Array-Wert verwendet.
In diesem Tutorial lernen wir, Arrays zu verketten, ohne das ursprüngliche Array zu ändern. Ändernursprüngliches Array bedeutet, Änderungen am Array vorzunehmen. Immer wenn wir das Original-Array mit der Methode splice() verwenden, werden einige Elemente in das Original-Array eingefügt oder daraus entfernt. Also klonen wir das Array und verwenden die Methode splice() für das geklonte Array, um das ursprüngliche Array identisch zu halten.
Grammatik
Benutzer können die Methode array.splice() gemäß der folgenden Syntax verwenden.
let results = array.splice(startIndex, count, element1, element2, element3, ... , elementN);
Parameter
startIndex – Dies ist der erste Index, der Elemente in das Array einfügt oder daraus entfernt.
Count – Dies ist die Anzahl der Elemente im Array, die ersetzt werden sollen. Wenn wir 0 als Zählwert übergeben, wird das Element bei startIndex eingefügt.
Element1, element2, …, element – Dies ist das neue Array-Element, das beginnend mit dem Startindex ersetzt oder eingefügt wird.
Jetzt werden wir verschiedene Möglichkeiten zum Zusammenfügen von Arrays sehen, ohne das ursprüngliche Array zu ändern.
Verwenden Sie den Spread-Operator, um Arrays zu verketten, ohne das ursprüngliche Array zu ändern
Der Spread-Operatorermöglicht uns, ein Array zu klonen. Wir können den Spread-Operator verwenden, um einen Klon des ursprünglichen Arrays zu erstellen. Anschließend können wir die Methode splice() verwenden, um das clonearray zum spleißen des Arrays zu verwenden, ohne das ursprüngliche Array zu ändern.
Grammatik
Benutzer können den Spread-Operator verwenden, um Arrays gemäß der folgenden Syntax zu verbinden, ohne das ursprüngliche Array zu ändern.
let splicedArray = [...array].splice(0, 3);
In der obigen Syntax ist das Array ein primitives Array und wir klonen es mit dem Spread-Operator und verwenden die Methode splice() für das geklonte Array.
Beispiel 1
Im folgenden Beispiel haben wir ein Array erstellt, das verschiedene Zeichenfolgen enthält. Danach klonen wir es mithilfe eines Arrays mit dem Spread-Operator in „[]“-Klammern und verwenden die Methode splice().
Wir haben in der Methode splice() 0 als Startindex und 3 als Gesamtzahl der aus dem Array zu entfernenden Elemente übergeben.
<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>
Verwenden Sie die Methode filter(), um Arrays zu verbinden, ohne das ursprüngliche Array zu ändern
Wir können ein neues Array erstellen, indem wir die Elemente im ursprünglichen Array filtern. Die Methode splice() extrahiert die Gesamtzahl der Elemente aus dem Startindex. Daher können wir die Methode filter() verwenden, um die Gesamtzahl der Elemente aus dem Startindex herauszufiltern.
Grammatik
Benutzer können die filter()-Methode gemäß der folgenden Syntax verwenden, um Arrays zu verbinden, ohne das ursprüngliche Array zu ändern.
let splicedArray = array.filter((ele, ind) => {
if (ind >= startIndex && ind < counts + startIndex) {
return true;
}
return false;
})
In der obigen Syntax filtern wir die Array-Elemente von startIndex nach count + startIndex.
Beispiel 2
Im folgenden Beispiel haben wir ein Array und verwenden die Methode filter() für das Array. Der Benutzer kann sehen, wie die Methode filter() die Gesamtzahl der Elemente aus dem startIndex extrahiert.
Auch wenn wir die Methode filter() für das ursprüngliche Array verwenden, bleibt es unverändert.
<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>
Verwenden Sie die Methode „slice()“, um Arrays zu verbinden, ohne das ursprüngliche Array zu ändern
Die Methodeslice() extrahiert Array-Elemente. Hier verwenden wir eine Kopie des Arrays. Wenn wir 0 als erstes Argument an die Methode slice() übergeben, während wir sie mit einem Array verwenden, klont sie das Array.
Danach können wir die Methode splice() verwenden, um die Arrays zu verbinden, ohne das ursprüngliche Array zu ändern.
Grammatik
Benutzer können die Methoden slice() und splice() gemäß der folgenden Syntax verwenden, um Arrays zu verbinden, ohne das ursprüngliche Array zu ändern.
let clonedArray = array.slice(0); let splicedArray = clonedArray.splice(start, end);
In der obigen Syntax verwenden wir zunächst die Methode „slice()“, um das Array zu klonen, und verwenden dann die Methode „splice()“, um ein Array zu splice().
Beispiel 3
Das folgende Beispiel enthält ein numerisches Array mit mehreren numerischen Werten. Anschließend enthält clonedArray einen Klon des ursprünglichen Arrays.
Als nächstes verwenden wir die Methode splice() mit dem clonedArray und der Benutzer kann überprüfen, ob das ursprüngliche Array dasselbe ist.
<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>
Das obige ist der detaillierte Inhalt vonWie verkette ich Arrays, ohne das ursprüngliche Array zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!