Să clarificăm confuzia din jurul metodelor slice (), splice () și split () în JavaScript

Metodele încorporate JavaScript ne ajută foarte mult în timpul programării, odată ce le înțelegem corect. Aș dori să explic trei dintre ele în acest articol: a slice(), splice()și split()metode. Poate pentru că numirea lor este atât de similară, sunt deseori confuzi, chiar și în rândul dezvoltatorilor cu experiență.

Îi sfătuiesc pe studenți și dezvoltatorii juniori să citească cu atenție acest articol, deoarece aceste trei metode pot fi solicitate și în INTERVIURILE DE POST.

Puteți găsi un rezumat al fiecărei metode la final. Dacă preferați, puteți viziona și versiunea video de mai jos:

Asadar, hai sa incepem…

Matrice JavaScript

În primul rând, trebuie să înțelegeți cum funcționează matricile JavaScript . Ca și în alte limbaje de programare, folosim tablouri pentru a stoca mai multe date în JS. Dar diferența este că matricile JS pot conține diferite tipuri de date simultan.

Uneori trebuie să facem operații pe aceste matrice. Apoi folosim câteva metode JS, cum ar fi slice () și splice () . Puteți vedea mai jos cum să declarați o matrice în JavaScript:

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

Acum să declarăm o altă matrice cu diferite tipuri de date. Îl voi folosi mai jos în exemple:

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

Această utilizare este valabilă în JavaScript. O matrice cu diferite tipuri de date: șir, numere și un boolean.

Felie ()

Cele slice () metoda copiilor o anumită parte a unei matrice și se întoarce pe care a copiat o parte ca o nouă matrice. Nu schimbă matricea originală.

array.slice(from, until);

  • De la: Feliați matricea începând de la un index de element
  • Până: Feliați matricea până la un alt index de element

De exemplu, vreau să feliez primele trei elemente din matricea de mai sus. Deoarece primul element al unui tablou este întotdeauna indexat la 0, încep să feliez „de la” 0.

array.slice(0, until);

Iată acum partea dificilă. Când vreau să feliez primele trei elemente, trebuie să dau parametrul until ca 3. Metoda slice () nu include ultimul element dat.

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

Acest lucru poate crea o oarecare confuzie. De aceea numesc al doilea parametru „până”.

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

În cele din urmă, atribui Array în felii variabilei newArray . Acum să vedem rezultatul:

Notă importantă: metoda Slice () poate fi utilizată și pentru șiruri.

Splice ()

Numele acestei funcții este foarte asemănător cu slice () . Această asemănare de denumire încurcă adesea dezvoltatorii. Matisare () Metoda se schimbă o matrice, prin adăugarea sau eliminarea elementelor din ea. Să vedem cum să adăugați și să eliminați elemente cu splice ( ) :

Eliminarea elementelor

Pentru eliminarea elementelor, trebuie să oferim parametrul index și numărul de elemente care trebuie eliminate:

array.splice(index, number of elements);

Indexul este punctul de plecare pentru eliminarea elementelor. Elementele care au unnumăr de index mai mic din indexul dat nu vor fi eliminate:

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

Dacă nu definim al doilea parametru, fiecare element care începe de la indexul dat va fi eliminat din matrice:

Ca al doilea exemplu, dau al doilea parametru ca 1, astfel încât elementele care încep de la indexul 2 vor fi eliminate unul câte unul de fiecare dată când numim metoda splice () :

array.splice(2, 1);

După primul apel:

După al doilea apel:

Acest lucru poate continua până când nu mai există index 2.

Adăugarea de elemente

Pentru adăugarea de elemente, trebuie să le dăm ca al treilea, al patrulea, al cincilea parametru (depinde de câte să adăugați) la metoda splice () :

array.splice (index, număr de elemente, element, element);

De exemplu, adaug a și b chiar la începutul matricei și nu elimin nimic:

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

Despică ( )

Metodele Slice () și splice () sunt pentru tablouri. Metoda split () este utilizată pentru șiruri . Împarte un șir în subșiruri și le returnează ca o matrice. Este nevoie de 2 parametri și ambii sunt opționali.

string.split(separator, limit);

  • Separator: definește modul de împărțire a unui șir ... printr-o virgulă, un caracter etc.
  • Limită: limitează numărul de împărțiri cu un număr dat

Metoda split () nu funcționează direct pentru tablouri . Cu toate acestea, putem converti mai întâi elementele matricei noastre într-un șir, apoi putem folosi metoda split () .

Să vedem cum funcționează.

În primul rând, ne convertim matricea într-un șir cu metoda toString () :

let myString = array.toString();

Acum să împărțim myString prin virgule, să le limităm la trei șiruri și să le returnăm ca o matrice:

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

După cum putem vedea, myString este împărțit prin virgule. Deoarece limităm împărțirea la 3, sunt returnate doar primele 3 elemente.

NOTĂ: Dacă avem o utilizare ca aceasta:array.split("");atunci fiecare caracter al șirului va fi împărțit ca șiruri de caractere:

Rezumat:

Felie ()

  • Copiază elemente dintr-o matrice
  • Le returnează ca o nouă matrice
  • Nu modifică matricea originală
  • Începe tranșarea de la ... până la indexul dat: array.slice (de la, până la)
  • Slice nu include parametrul index „până”
  • Poate fi folosit atât pentru tablouri, cât și pentru șiruri

Splice ()

  • Folosit pentru adăugarea / eliminarea elementelor din matrice
  • Returnează o serie de elemente eliminate
  • Schimbă matricea
  • Pentru adăugarea de elemente: array.splice (index, număr de elemente, element)
  • Pentru eliminarea elementelor: array.splice (index, număr de elemente)
  • Poate fi utilizat numai pentru tablouri

Despică ( )

  • Împarte un șir în subșiruri
  • Le returnează într-o matrice
  • Ia 2 parametri, ambii sunt opționali: string.split (separator, limită)
  • Nu modifică șirul original
  • Poate fi folosit doar pentru corzi

Există multe alte metode încorporate pentru matrici și șiruri JavaScript, care facilitează lucrul cu programarea JavaScript. Apoi, puteți consulta noul meu articol despre metodele de sub șir JavaScript.

Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați să mă urmați pe Youtube !

Mulțumesc că ai citit!