Låt oss rensa upp förvirringen kring slice (), splice (), & split () -metoderna i JavaScript

JavaScript-inbyggda metoder hjälper oss mycket när vi programmerar, när vi förstår dem korrekt. Jag skulle vilja förklara tre av dem i den här artikeln: the slice(), splice()och split()metoder. Kanske för att deras namn är så lika är de ofta förvirrade, även bland erfarna utvecklare.

Jag rekommenderar studenter och juniorutvecklare att läsa den här artikeln noggrant, eftersom de här tre metoderna också kan ställas i JOBBINTERVATTNINGAR.

Du kan hitta en sammanfattning av varje metod till slut. Om du föredrar kan du också titta på videoversionen nedan:

Så låt oss börja ...

JavaScript-arrays

För det första måste du förstå hur JavaScript-matriser fungerar. Som i andra programmeringsspråk använder vi matriser för att lagra flera data i JS. Men skillnaden är att JS- matriser kan innehålla olika typer av data på en gång.

Ibland behöver vi göra operationer på dessa matriser. Sedan använder vi några JS-metoder som slice () & splice () . Du kan se nedan hur man deklarerar en array i JavaScript:

let arrayDefinition = [];   // Array declaration in JS

Låt oss nu förklara en annan matris med olika datatyper. Jag kommer att använda det nedan i exempel:

let array = [1, 2, 3, "hello world", 4.12, true];

Denna användning är giltig i JavaScript. En matris med olika datatyper: sträng, siffror och en boolean.

Skiva ()

De slice () metoden kopierar en given del av en array och avkastning som kopierade delen som en ny array. Det ändrar inte den ursprungliga matrisen.

array.slice(from, until);

  • Från: Skär upp matrisen från ett elementindex
  • Fram till: Skär arrayen tills ett annat elementindex

Till exempel vill jag skära de tre första elementen från matrisen ovan. Eftersom det första elementet i en matris alltid indexeras till 0, börjar jag skära "från" 0.

array.slice(0, until);

Nu här är den knepiga delen. När jag vill skära de första tre delar, måste jag ge tills parameter som 3. Den slice () -metoden omfattar inte den sista givet element.

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

Detta kan skapa viss förvirring. Det är därför jag kallar den andra parametern ”tills”.

let newArray = array.slice(0, 3);   // Return value is also an array

Slutligen tilldelar jag den skivade Array till newArray- variabeln. Låt oss nu se resultatet:

Viktig anmärkning: Slice () -metoden kan också användas för strängar.

Skarv ()

Namnet på den här funktionen liknar mycket slice () . Denna namngivning förvirrar ofta utvecklare. Den splice () metoden ändrar en array, genom att lägga till eller ta bort element från den. Låt oss se hur man lägger till och tar bort element med splice ( ) :

Ta bort element

För att ta bort element måste vi ange indexparametern och antalet element som ska tas bort:

array.splice(index, number of elements);

Index är utgångspunkten för att ta bort element. Element som har ett mindre indexnummer från det angivna indexet tas inte bort:

array.splice(2);  // Every element starting from index 2, will be removed

Om vi ​​inte definierar den andra parametern tas alla element som börjar från det angivna indexet bort från matrisen:

Som ett andra exempel ger jag den andra parametern som 1, så element som börjar från index 2 kommer att tas bort en efter en varje gång vi kallar splice () -metoden:

array.splice(2, 1);

Efter första samtalet:

Efter andra samtalet:

Detta kan fortsätta tills det inte finns något index 2 längre.

Lägga till element

För att lägga till element måste vi ge dem som den tredje, fjärde, femte parametern (beror på hur många som ska läggas till) till metoden splice () :

array.splice (index, antal element, element, element);

Som ett exempel lägger jag till a och b i början av matrisen och jag tar inte bort något:

array.splice(0, 0, 'a', 'b');

Dela ( )

Metoderna Slice () och splice () är för matriser. Den split () metod används för strängar . Den delar en sträng i strängar och returnerar dem som en matris. Det tar två parametrar, och båda är valfria.

string.split(separator, limit);

  • Separator: Definierar hur man delar en sträng ... med ett komma, tecken etc.
  • Limit: Begränsar antalet delningar med ett givet nummer

Den split () metoden fungerar inte direkt för matriser . Vi kan emellertid först konvertera elementen i vår array till en sträng, sedan kan vi använda metoden split () .

Låt oss se hur det fungerar.

För det första konverterar vi vår array till en sträng med toString () -metoden:

let myString = array.toString();

Låt oss nu dela upp myString med komma, begränsa dem till tre strängar och returnera dem som en matris:

let newArray = myString.split(",", 3);

Som vi kan se delas myString med kommatecken. Eftersom vi begränsar split till 3 returneras endast de första 3 elementen.

OBS: Om vi ​​har en sådan användning:array.split("");då delas varje tecken i strängen upp som understrängar:

Sammanfattning:

Skiva ()

  • Kopierar element från en matris
  • Returnerar dem som en ny matris
  • Ändrar inte den ursprungliga matrisen
  • Börjar skivning från ... till givet index: array.slice (från, till)
  • Slice inkluderar inte ”tills” indexparameter
  • Kan användas både för matriser och strängar

Skarv ()

  • Används för att lägga till / ta bort element från matrisen
  • Returnerar en matris med borttagna element
  • Ändrar matrisen
  • För att lägga till element: array.splice (index, antal element, element)
  • För att ta bort element: array.splice (index, antal element)
  • Kan endast användas för matriser

Dela ( )

  • Delar en sträng i underlag
  • Returnerar dem i en matris
  • Tar två parametrar, båda är valfria: string.split (separator, limit)
  • Ändrar inte originalsträngen
  • Kan endast användas för strängar

Det finns många andra inbyggda metoder för JavaScript-arrays och strängar, vilket gör det lättare att arbeta med JavaScript-programmering. Därefter kan du kolla in min nya artikel om JavaScript Substring Methods.

Om du vill lära dig mer om webbutveckling, följ mig gärna på Youtube !

Tack för att du läste!