Tisztítsuk meg a szelet (), a splice () és a split () metódusok körüli zavart a JavaScript-ben

Programozás

A beépített JavaScript-módszerek sokat segítenek nekünk a programozás során, ha jól értjük őket. A cikkből hármat szeretnék elmagyarázni: a slice(), splice()és a split()módszereket. Talán azért, mert a névadásuk nagyon hasonló, gyakran összezavarodnak, még a tapasztalt fejlesztők körében is.

Azt tanácsolom a diákoknak és az ifjúsági fejlesztőknek, hogy olvassák el figyelmesen ezt a cikket, mert ez a három módszer megkérdezhető a MUNKÁK INTERJÚJÁBAN is.

A végén megtalálhatja az egyes módszerek összefoglalóját. Ha szeretné, megnézheti az alábbi videó verziót is:

Tehát kezdjük ...

JavaScript tömbök

Először is meg kell értenie a JavaScript tömbök működését. A többi programozási nyelvhez hasonlóan tömbökkel is több adatot tárolunk a JS-ben. De a különbség az, hogy a JS tömbök különböző típusú adatokat tartalmazhatnak egyszerre.

Néha műveleteket kell végrehajtanunk ezeken a tömbökön. Ezután néhány JS metódust használunk, például slice () & splice () . Az alábbiakban láthatja, hogyan lehet deklarálni egy tömböt a JavaScript-ben:

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

Nyújtsunk be egy másik tömböt különböző adattípusokkal. Az alábbiakban a példákban fogom használni:

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

Ez a használat érvényes a JavaScript-ben. Különböző típusú adattömb: karakterlánc, számok és logikai érték.

Szelet ()

A szelet () módszer példányban egy adott részét egy tömb, és visszatér, hogy a másolt részt egy új tömböt. Ez nem változtatja meg az eredeti tömböt.

array.slice(from, until);

  • Ország: szelet a tömb kiindulási származó egy elem indexet
  • Amíg: Slice a tömb , amíg egy másik elem indexe

Például fel akarom szeletelni az első három elemet a fenti tömbből. Mivel egy tömb első elemét mindig 0-nál indexeljük, a „ 0- tól” kezdek szeletelni .

array.slice(0, until);

Itt van a trükkös rész. Amikor az első három elemet fel akarom szeletelni, akkor az till paramétert 3-ként kell megadnom . A slice () metódus nem tartalmazza az utoljára megadott elemet.

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

Ez némi zavart okozhat. Ezért hívom a második paramétert „amíg”.

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

Végül a szeletelt Array-t hozzárendelem az newArray változóhoz. Most nézzük meg az eredményt:

Fontos megjegyzés: a Slice () metódus karakterláncokhoz is használható .

Csatlakozás ()

Ennek a függvénynek a neve nagyon hasonlít a slice () -re . Ez a névadási hasonlóság gyakran megzavarja a fejlesztőket. A splice () metódus megváltoztat egy tömböt, hozzáadva vagy eltávolítva belőle az elemeket. Nézzük meg, hogyan lehet elemeket hozzáadni és eltávolítani a toldással ( ) :

Elemek eltávolítása

Az elemek eltávolításához meg kell adnunk az index paramétert és az eltávolítandó elemek számát :

array.splice(index, number of elements);

Az index azelemek eltávolításának kiindulópontja . Azokat az elemeketnem távolítjuk el,amelyekindexszáma kisebb az adott indexnél:

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

Ha nem definiáljuk a második paramétert, akkor az adott indexből kiinduló minden elem eltávolításra kerül a tömbből:

Második példaként a második paramétert 1-ként adom meg, így a 2-es indexből kiinduló elemek minden egyesével eltávolításra kerülnek, amikor meghívjuk a splice () metódust:

array.splice(2, 1);

1. hívás után:

2. hívás után:

Ez addig folytatódhat, amíg már nincs index 2.

Elemek hozzáadása

Az elemek hozzáadásához meg kell adnunk őket 3., 4., 5. paraméterként (attól függően, hogy hányat kell hozzáadni) a splice () módszerhez:

array.splice (index, elemek száma, elem, elem);

Példaként a tömb legelején hozzáadom az a és b elemeket, és semmit sem távolítok el

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

Hasított ( )

A Slice () és a splice () módszerek tömbökre vonatkoznak. A karakterláncokhoz a split () metódust használják. Felosztja a karakterláncot részstruktúrákra, és tömbként adja vissza őket. 2 paraméter szükséges, és mindkettő opcionális.

string.split(separator, limit);

  • Elválasztó: Meghatározza a karakterlánc felosztásának módját vesszővel, karakterrel stb.
  • Limit: Korlátozza az osztások számát egy adott számmal

A split () metódus nem működik közvetlenül tömböknél . Először azonban átalakíthatjuk tömbünk elemeit karakterláncra, majd használhatjuk a split () metódust.

Nézzük meg, hogyan működik.

Először átalakítjuk a tömböt karakterláncba a toString () metódussal:

let myString = array.toString();

Most osztott sajatString által vesszővel, azt korlátozza a három alkarakterláncok és vissza őket, mint egy tömb:

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

Mint láthatjuk, a myString vesszőkkel van elválasztva. Mivel a felosztást 3-ra korlátozzuk, csak az első 3 elem kerül visszaadásra.

MEGJEGYZÉS: Ha van ilyen felhasználásunk:array.split("");akkor a karakterlánc minden karaktere felsorolásként fel lesz osztva:

Összegzés:

Szelet ()

  • Elemeket másol egy tömbből
  • Visszaadja őket új tömbként
  • Nem változtatja meg az eredeti tömböt
  • Elkezdi a szeletelést… -tól az adott indexig : array.slice (tól, -ig)
  • A szelet nem tartalmazza az „ig” index paramétert
  • Tömbökhöz és karakterláncokhoz egyaránt használható

Csatlakozás ()

  • Elemek hozzáadásához / eltávolításához használják a tömbből
  • Az eltávolított elemek tömbjét adja eredményül
  • Megváltoztatja a tömböt
  • Elemek hozzáadásához: array.splice (index, elemek száma, elem)
  • Elemek eltávolításához: array.splice (index, elemek száma)
  • Csak tömbökhöz használható

Hasított ( )

  • Felosztja a karakterláncot részsorokra
  • Visszaadja őket tömbben
  • 2 paramétert vesz fel, mindkettő választható: string.split (elválasztó, korlát)
  • Nem változtatja meg az eredeti karakterláncot
  • Csak húrokhoz használható

Sok más beépített módszer létezik a JavaScript tömbökhöz és karakterláncokhoz, amelyek megkönnyítik a JavaScript programozással való munkát. Ezután megnézheti az új cikkemet a JavaScript Substring Methods-ról.

Ha szeretne többet megtudni a webfejlesztésről, kövessen bátran a Youtube-on !

Köszönöm, hogy elolvasta!