I JavaScript, att klona en array innebär att skapa en ny array med samma element som den ursprungliga arrayen. Att klona en array i JavaScript är användbart när du vill skapa en ny array som har samma element som en befintlig array, utan att ändra den ursprungliga arrayen.
När ska man klona array?
Om du vill utföra vissa operationer på en array, såsom sortering, filtrering eller mappning, men du inte vill ändra den ursprungliga arrayen, kan du skapa en klon av den ursprungliga arrayen och utföra operationerna på klonen istället.
- När du skickar en array till en funktion som ett argument, kanske du vill se till att funktionen inte ändrar den ursprungliga arrayen. I det här fallet kan du skicka en klon av arrayen istället.
- Om du vill bevara den ursprungliga arrayen för framtida referens kan du skapa en klon av den ursprungliga arrayen och använda klonen för vidare bearbetning eller manipulation.
- Om du har en array som innehåller objekt eller arrayer som element, och du vill undvika att modifiera de ursprungliga objekten eller arrayerna, kan du skapa en klon av arrayen att arbeta med, så att ändringar av objekten eller arrayerna i klonen inte påverka de ursprungliga objekten eller arrayerna.
Således, kloning av en array i JavaScript är en användbar teknik för att arbeta med arrayer på ett sätt som bevarar integriteten hos den ursprungliga arrayen och dess element.
Här är några vanliga användningsfall för att klona en array:
Innehållsförteckning
- När ska man klona array?
- Använda Array.slice()-metoden
- Använda spridningen Operator
- Använda Array.from()-metoden
- Använda Array.concat()-metoden
- Använda en for loop
- Använda Array.map()-metoden
- Använda metoden Array.from() med en kartfunktion
- Använda Array.of()-metoden
- Använda metoderna JSON.parse() och JSON.stringify().
- Använda Object.assign()-metoden
- Använder Array.reduce()-metoden
Använda Array.slice()-metoden
Vi använder skivningsmetod för att skapa en ytlig kopia av en array. Denna metod skapar en ny array med en delmängd av elementen från den ursprungliga arrayen.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = originalArray.slice(); console.log(clonedArray);>
Produktion
[ 1, 2, 3 ]>
Använda spridningen Operator
Använda spridningsoperatör … är ett kortfattat och enkelt sätt att klona en array i JavaScript. Spridningsoperatorn låter dig utöka en array till individuella element, som sedan kan användas för att skapa en ny array.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = [...originalArray]; console.log(clonedArray);>
Produktion
[ 1, 2, 3 ]>
Använda Array.from()-metoden
Använda Array.from() metod är ett annat sätt att klona en array i JavaScript. Denna metod skapar en ny array från en befintlig array, med hjälp av en valfri mappningsfunktion för att transformera värdena i den nya arrayen.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray); console.log(clonedArray);>
Produktion
[ 1, 2, 3 ]>
Använda Array.concat()-metoden
Använda Array.concat() metod är ett annat sätt att klona en array i JavaScript. Denna metod skapar en ny array genom att sammanfoga två eller flera arrayer.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = [].concat(originalArray); console.log(clonedArray);>
Produktion
[ 1, 2, 3 ]>
Använda en for loop
Denna metod innebär att man itererar genom varje element i den ursprungliga arrayen och kopierar varje element till en ny array.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = []; for (let i = 0; i < originalArray.length; i++) { clonedArray.push(originalArray[i]); } console.log(clonedArray);> Produktion
[ 1, 2, 3 ]>
Använda Array.map()-metoden
Använda Array.map() metod är ett annat sätt att klona en array i JavaScript. Denna metod skapar en ny array genom att mappa varje element från den ursprungliga arrayen till ett nytt värde.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = originalArray.map(x =>x); console.log(clonedArray);>
Produktion
[ 1, 2, 3 ]>
Använda metoden Array.from() med en kartfunktion
Använda Array.from() metod med en kartfunktion är ett annat sätt att klona en array i JavaScript. Denna metod skapar en ny array genom att mappa varje element från den ursprungliga arrayen till ett nytt värde med hjälp av en tillhandahållen funktion.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray, x =>x); console.log(clonedArray);>
Produktion
[ 1, 2, 3 ]>
Använda Array.of()-metoden
Denna metod skapar en ny array med samma element som den ursprungliga arrayen.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = Array.of(...originalArray); console.log(clonedArray);>
Produktion
[ 1, 2, 3 ]>
Använda metoderna JSON.parse() och JSON.stringify().
Använda JSON.parse() och JSON.stringify() metoder är ett annat sätt att klona en array i JavaScript. Denna metod innebär att konvertera den ursprungliga arrayen till en JSON-sträng och sedan analysera JSON-strängen för att skapa en ny array.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = JSON.parse(JSON.stringify(originalArray)); console.log(clonedArray);>
Produktion
[ 1, 2, 3 ]>
Använda Object.assign()-metoden
Använda Object.assign() metod är ett annat sätt att klona en array i JavaScript. Denna metod skapar en ny array genom att kopiera egenskaperna för den ursprungliga arrayen till ett nytt objekt.
Exempel: Detta exempel visar implementeringen av det ovan förklarade tillvägagångssättet.
Javascript const originalArray = [1, 2, 3]; const clonedArray = Object.assign([], originalArray); console.log(clonedArray);>
Produktion
[ 1, 2, 3 ]>
Använder Array.reduce()-metoden
De Array.reduce() metod exekverar en reducerfunktion på varje element i arrayen, vilket resulterar i ett enda utdatavärde. Vi kan använda den för att konstruera en ny array med samma element som den ursprungliga arrayen.
Syntax:
strängen innehåller
array.reduce((accumulator, currentValue, currentIndex, array) =>{ ... }, initialValue);>Exempel : I det här exemplet kommer vi att använda metoden Array.reduce() för att skapa en klon av en array.
JavaScript // Input array const originalArray = [1, 2, 3, 4]; // Cloning the array using reduce const clonedArray = originalArray.reduce((acc, val) =>{ acc.push(val); retur enl; }, []); // Visa de ursprungliga och klonade arrayerna console.log('Original Array:', originalArray); // Utdata: [1, 2, 3, 4] console.log('Cloned Array:', clonedArray); // Utdata: [1, 2, 3, 4]> Produktion
Original Array: [ 1, 2, 3, 4 ] Cloned Array: [ 1, 2, 3, 4 ]>
Notera: När du klona en array är det därför viktigt att ta hänsyn till komplexiteten hos data och applikationens prestandakrav.