Metodele încorporate JavaScript ne ajută foarte mult în timp ce programăm, odată ce le înțelegem corect. Aș dori să explic trei dintre acestea în acest articol: 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 POSTULUI.

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 Matrice JavaScript muncă. Ca și în alte limbaje de programare, folosim tablouri pentru a stoca mai multe date în JS. Dar diferența este că JS tablourile pot conține diferite tipuri de date simultan.

Uneori trebuie să facem operații pe aceste matrice. Apoi folosim câteva metode JS precum slice () & 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 ()

felie () metodă copii o parte dată dintr-o matrice și returnează partea copiată ca o matrice nouă. Nu schimbă matricea originală.

array.slice(from, until);

  • Din: Feliați matricea începând din un indice de element
  • Pana cand: Feliați matricea pana cand alt element index

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 “din”0.

array.slice(0, until);

Iată acum partea dificilă. Când vreau să feliez primele trei elemente, trebuie să dau pana cand parametru 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 “pana cand”.

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

În cele din urmă, atribui Array-ul în felii la newArray variabil. Acum să vedem rezultatul:

Sa clarificam confuzia din jurul metodelor slice splice
Felie matrice și atribuiți membrii către newArray
1611734946 54 Sa clarificam confuzia din jurul metodelor slice splice
newArray variabila este acum o matrice, iar cea originală rămâne aceeași

Notă importantă: Felie () metoda poate fi folosită și pentru siruri de caractere.

Splice ()

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

Eliminarea elementelor

Pentru eliminarea elementelor, trebuie să oferim index parametru și numărul de elemente de eliminat:

array.splice(index, number of elements);

Index este punct de start pentru îndepărtarea elementelor. Elemente care au un mai mici numărul indexului din indexul dat nu va fi eliminat:

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:

1611734946 828 Sa clarificam confuzia din jurul metodelor slice splice
numai indicele 0 și 1 sunt încă acolo

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 splice ()metodă:

array.splice(2, 1);

1611734946 246 Sa clarificam confuzia din jurul metodelor slice splice
Array la început

După primul apel:

1611734946 202 Sa clarificam confuzia din jurul metodelor slice splice
3 este eliminat astfel “Salut Lume” are acum indice 2

După al doilea apel:

1611734946 835 Sa clarificam confuzia din jurul metodelor slice splice
De data asta, “Salut Lume” este eliminat ca index: 2

Aceasta 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 adăugări) la splice () metodă:

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

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

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

1611734946 642 Sa clarificam confuzia din jurul metodelor slice splice
A și b adăugat la începutul matricei, fără elemente eliminate

Despică ( )

Felie () și splice () metodele sunt pentru tablouri. Despică( ) metoda este utilizată pentru siruri de caractere. Împarte un șir în șiruri de caractere și le returnează ca o matrice. Este nevoie de 2 parametri și ambii sunt opțional.

string.split(separator, limit);

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

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

Să vedem cum funcționează.

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

let myString = array.toString();

1611734946 421 Sa clarificam confuzia din jurul metodelor slice splice

Acum hai să ne despărțim myString de virgule, limitează-le la Trei șiruri de caractere și le returnează ca o matrice:

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

1611734946 49 Sa clarificam confuzia din jurul metodelor slice splice
Doar primele 3 elemente sunt returnate

Așa 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 astfel de utilizare: array.split(""); atunci fiecare caracter al șirului va fi împărțit ca șiruri de caractere:

1611734946 489 Sa clarificam confuzia din jurul metodelor slice splice
Fiecare personaj se împarte unul câte unul

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 “pana cand” parametru index
  • 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
  • Prinde 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 JavaScript Substring.

Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați urmărește-mă pe Youtube!

Mulțumesc că ai citit!