Lad os rydde op i forvirringen omkring slice (), splice () og split () -metoderne i JavaScript

JavaScript-indbyggede metoder hjælper os meget under programmering, når vi først forstår dem korrekt. Jeg vil gerne forklare tre af dem i denne artikel: de slice(), splice()og split()metoder. Måske fordi deres navngivning er så ens, er de ofte forvirrede, selv blandt erfarne udviklere.

Jeg råder studerende og juniorudviklere til at læse denne artikel omhyggeligt, fordi disse tre metoder også kan stilles i JOB INTERVIEWS.

Du kan finde et resumé af hver metode til sidst. Hvis du foretrækker det, kan du også se videoversionen nedenfor:

Så lad os starte ...

JavaScript-arrays

For det første skal du forstå, hvordan JavaScript-arrays fungerer. Som i andre programmeringssprog bruger vi arrays til at gemme flere data i JS. Men forskellen er, at JS- arrays kan indeholde forskellige typer data på én gang.

Nogle gange er vi nødt til at udføre operationer på disse arrays. Derefter bruger vi nogle JS-metoder som skive () & splejsning () . Du kan se nedenfor, hvordan du erklærer en matrix i JavaScript:

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

Lad os nu erklære en anden matrix med forskellige datatyper. Jeg vil bruge det nedenfor i eksempler:

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

Denne brug er gyldig i JavaScript. Et array med forskellige datatyper: streng, tal og en boolsk.

Skive ()

De skive () metode kopierer en given del af et array og returnerer der kopierede del som ny matrix. Det ændrer ikke det oprindelige array.

array.slice(from, until);

  • Fra: Skær arrayet ud fra et elementindeks
  • Indtil: Skær arrayet, indtil et andet elementindeks

For eksempel vil jeg skære de første tre elementer fra arrayet ovenfor. Da det første element i en matrix altid er indekseret til 0, begynder jeg at skære "fra" 0.

array.slice(0, until);

Her er den vanskelige del. Når jeg ønsker at skære de første tre elementer, skal jeg give den indtil parameter som 3. Den skive () metoden ikke omfatter den sidste givet element.

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

Dette kan skabe forvirring. Derfor kalder jeg den anden parameter ”indtil”.

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

Endelig tildeler jeg den opskårne Array til den nye Array- variabel. Lad os nu se resultatet:

Vigtig note: Slice () -metoden kan også bruges til strenge.

Splice ()

Navnet på denne funktion minder meget om udsnit () . Denne navngivningslighed forvirrer ofte udviklere. Den splejsning () metode ændrer et array, ved at tilføje eller fjerne elementer fra den. Lad os se, hvordan du tilføjer og fjerner elementer med splejsning ( ) :

Fjernelse af elementer

For at fjerne elementer skal vi give indeksparameteren og antallet af elementer, der skal fjernes:

array.splice(index, number of elements);

Indeks er udgangspunktet for fjernelse af elementer. Elementer, der har et mindre indeksnummer fra det givne indeks, fjernes ikke:

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

Hvis vi ikke definerer den anden parameter, fjernes hvert element, der starter fra det givne indeks, fra arrayet:

Som et andet eksempel giver jeg den anden parameter som 1, så elementer, der starter fra indeks 2, fjernes en efter en hver gang vi kalder splice () -metoden:

array.splice(2, 1);

Efter 1. opkald:

Efter 2. opkald:

Dette kan fortsætte, indtil der ikke længere er noget indeks 2.

Tilføjelse af elementer

For at tilføje elementer skal vi give dem som den 3., 4., 5. parameter (afhænger af hvor mange der skal tilføjes) til splejsemetoden () :

array.splice (indeks, antal elementer, element, element);

Som et eksempel tilføjer jeg a og b i begyndelsen af ​​arrayet, og jeg fjerner intet:

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

Split ()

Metoder til udsnit () og splejsning () er til arrays. Metoden split () bruges til strenge . Den deler en streng i understrenge og returnerer dem som en matrix. Det tager to parametre, og begge er valgfri.

string.split(separator, limit);

  • Separator: Definerer, hvordan man opdeler en streng ... med komma, tegn osv.
  • Limit: Begrænser antallet af split med et givet nummer

Metoden split () fungerer ikke direkte for arrays . Vi kan dog først konvertere elementerne i vores array til en streng, så kan vi bruge split () -metoden.

Lad os se, hvordan det fungerer.

For det første konverterer vi vores array til en streng med toString () -metoden:

let myString = array.toString();

Lad os nu dele myString med kommaer, begrænse dem til tre understrenge og returnere dem som en matrix:

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

Som vi kan se, er myString opdelt med kommaer. Da vi begrænser split til 3, returneres kun de første 3 elementer.

BEMÆRK: Hvis vi har en sådan anvendelse:array.split("");Så vil hvert tegn i strengen blive opdelt som understrenge:

Resumé:

Skive ()

  • Kopierer elementer fra en matrix
  • Returnerer dem som et nyt array
  • Ændrer ikke den oprindelige matrix
  • Starter udskæring fra ... til givet indeks: array.slice (fra, indtil)
  • Slice inkluderer ikke "indtil" indeksparameter
  • Kan bruges både til arrays og strenge

Splice ()

  • Bruges til at tilføje / fjerne elementer fra array
  • Returnerer en række fjernede elementer
  • Ændrer arrayet
  • Til tilføjelse af elementer: array.splice (indeks, antal elementer, element)
  • Til fjernelse af elementer: array.splice (indeks, antal elementer)
  • Kan kun bruges til arrays

Split ()

  • Opdeler en streng i understrenge
  • Returnerer dem i en matrix
  • Tager 2 parametre, begge er valgfri: string.split (separator, limit)
  • Ændrer ikke den originale streng
  • Kan kun bruges til strenge

Der er mange andre indbyggede metoder til JavaScript-arrays og strenge, som gør det nemmere at arbejde med JavaScript-programmering. Dernæst kan du tjekke min nye artikel om JavaScript Substring Methods.

Hvis du vil lære mere om webudvikling, er du velkommen til at følge mig på Youtube !

Tak fordi du læste!