Laten we de verwarring rond de slice (), splice () en split () -methoden in JavaScript opruimen

De ingebouwde JavaScript-methoden helpen ons veel bij het programmeren, als we ze eenmaal goed begrijpen. Ik zou er in dit artikel drie willen toelichten: de methoden slice(), splice()en split(). Misschien omdat hun naamgeving zo op elkaar lijkt, zijn ze vaak in de war, zelfs onder ervaren ontwikkelaars.

Ik raad studenten en junior ontwikkelaars aan om dit artikel aandachtig te lezen omdat deze drie methoden ook in JOB INTERVIEWS kunnen worden gevraagd.

Aan het einde vindt u een samenvatting van elke methode. Als je wilt, kun je ook de onderstaande videoversie bekijken:

Dus laten we beginnen…

JavaScript-arrays

Ten eerste moet u begrijpen hoe JavaScript-arrays werken. Net als in andere programmeertalen, gebruiken we arrays om meerdere gegevens in JS op te slaan. Maar het verschil is dat JS- arrays verschillende soorten gegevens tegelijk kunnen bevatten.

Soms moeten we bewerkingen uitvoeren op die arrays. Vervolgens gebruiken we enkele JS-methoden zoals slice () & splice () . U kunt hieronder zien hoe u een array in JavaScript declareert:

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

Laten we nu een andere array met verschillende gegevenstypen declareren. Ik zal het hieronder in voorbeelden gebruiken:

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

Dit gebruik is geldig in JavaScript. Een array met verschillende gegevenstypen: tekenreeks, getallen en een boolean.

Plakje ()

De methode slice () kopieert een bepaald deel van een array en retourneert dat gekopieerde deel als een nieuwe array. Het verandert de oorspronkelijke array niet.

array.slice(from, until);

  • Van: segmenteer de array beginnend bij een elementindex
  • Tot: segmenteer de array tot een ander elementindex

Ik wil bijvoorbeeld de eerste drie elementen uit de bovenstaande array snijden. Omdat het eerste element van een array altijd op 0 wordt geïndexeerd, begin ik met het segmenteren van "van" 0.

array.slice(0, until);

Nu is hier het lastige gedeelte. Als ik de eerste drie elementen wil segmenteren, moet ik de parameter tot opgeven als 3. De methode slice () bevat niet het laatst opgegeven element.

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

Dit kan voor enige verwarring zorgen. Daarom noem ik de tweede parameter "tot".

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

Ten slotte wijs ik de gesneden Array toe aan de variabele newArray . Laten we nu het resultaat bekijken:

Belangrijke opmerking: de Slice () - methode kan ook worden gebruikt voor strings.

Splitsing ()

De naam van deze functie lijkt sterk op slice () . Deze gelijkenis bij naamgeving brengt ontwikkelaars vaak in de war. De methode splice () verandert een array door er elementen aan toe te voegen of te verwijderen. Laten we eens kijken hoe we elementen kunnen toevoegen en verwijderen met splice ( ) :

Elementen verwijderen

Om elementen te verwijderen, moeten we de parameter index opgeven , en het aantal te verwijderen elementen :

array.splice(index, number of elements);

Index is het startpunt voor het verwijderen van elementen. Elementen met een kleiner indexnummer uit de opgegeven index worden niet verwijderd:

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

Als we de tweede parameter niet definiëren, wordt elk element dat begint met de opgegeven index, verwijderd uit de array:

Als tweede voorbeeld geef ik de tweede parameter als 1, dus elementen die beginnen met index 2 zullen een voor een worden verwijderd elke keer dat we de splice () methode aanroepen:

array.splice(2, 1);

Na 1e oproep:

Na 2e oproep:

Dit kan doorgaan totdat er geen index 2 meer is.

Elementen toevoegen

Om elementen toe te voegen, moeten we ze geven als de 3e, 4e, 5e parameter (afhankelijk van het aantal toe te voegen) aan de splice () methode:

array.splice (index, aantal elementen, element, element);

Als voorbeeld voeg ik a en b toe helemaal aan het begin van de array en ik verwijder niets:

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

Splitsen ()

De methoden Slice () en splice () zijn voor arrays. Demethode split () wordt gebruikt voor tekenreeksen . Het verdeelt een string in subtekenreeksen en retourneert deze als een array. Er zijn 2 parameters nodig, en beide zijn optioneel.

string.split(separator, limit);

  • Scheidingsteken: definieert hoe een string moet worden gesplitst ... door een komma, teken enz.
  • Limiet: beperkt het aantal splitsingen met een bepaald aantal

De methode split () werkt niet rechtstreeks voor arrays . We kunnen echter eerst de elementen van onze array naar een string converteren, daarna kunnen we de methode split () gebruiken.

Laten we eens kijken hoe het werkt.

Ten eerste converteren we onze array naar een string met de methode toString () :

let myString = array.toString();

Laten we nu myString splitsen door komma's, ze beperken tot drie subtekenreeksen en ze teruggeven als een array:

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

Zoals we kunnen zien, wordt myString opgesplitst door komma's. Omdat we split beperken tot 3, worden alleen de eerste 3 elementen geretourneerd.

OPMERKING: Als we een gebruik als dit hebben:array.split("");dan wordt elk teken van de string verdeeld als subtekenreeksen:

Overzicht:

Plakje ()

  • Kopieert elementen uit een array
  • Retourneert ze als een nieuwe array
  • Verandert de originele array niet
  • Begint met het snijden van ... tot de gegeven index: array.slice (van, tot)
  • Slice bevat geen indexparameter "tot"
  • Kan zowel voor arrays als strings worden gebruikt

Splitsing ()

  • Wordt gebruikt voor het toevoegen / verwijderen van elementen uit een array
  • Retourneert een reeks verwijderde elementen
  • Verandert de array
  • Voor het toevoegen van elementen: array.splice (index, aantal elementen, element)
  • Voor het verwijderen van elementen: array.splice (index, aantal elementen)
  • Kan alleen worden gebruikt voor arrays

Splitsen ()

  • Verdeelt een string in subtekenreeksen
  • Retourneert ze in een array
  • Heeft 2 parameters nodig, beide zijn optioneel: string.split (scheidingsteken, limiet)
  • Verandert de originele string niet
  • Alleen te gebruiken voor strijkers

Er zijn veel andere ingebouwde methoden voor JavaScript-arrays en strings, die het werken met JavaScript-programmering vergemakkelijken. Vervolgens kun je mijn nieuwe artikel over JavaScript-substringmethoden bekijken.

Als je meer wilt weten over webontwikkeling, volg me dan gerust op Youtube !

Bedankt voor het lezen!