A splice() metódus megváltoztatja a tömb tartalmát a meglévő elemek eltávolításával vagy cseréjével és/vagy új elemek hozzáadásával.
Ennek az interaktív példának a forrása egy GitHub-tárolóban van tárolva. Ha szeretne hozzájárulni az interaktív példák projekthez, kérjük, klónozza a https://github.com/mdn/interactive-examples oldalt, és küldjön lehívási kérelmet.
Szintaxis let arrDeletedItems = tömb .splice(start [, deleteCount [, item1 [, item2 [, ...]]]]) Paraméterek start Az index, amelynél a tömb módosítását el kell kezdeni. Ha nagyobb, mint a tömb hossza, a start a tömb hosszára lesz beállítva. Ha negatív, akkor a sok elem a tömb végétől kezdődik. (Ebben az esetben az origó -1 , azaz -n az n-edik utolsó elem indexe, ezért ekvivalens a .length - n tömb indexével.) Ha az array .length + start kisebb, mint 0, akkor 0 indextől kezdődik. deleteCount Nem kötelező Egy egész szám, amely a tömbben az elejétől eltávolítandó elemek számát jelzi. Ha a deleteCount kimaradt, vagy ha értéke egyenlő vagy nagyobb, mint array .length - start (vagyis ha egyenlő vagy nagyobb, mint a tömbben maradt elemek száma, az elején kezdődően), akkor az összes elem a tömb elejétől a végéig törlődik.Megjegyzés: Az IE8-ban nem törli az összeset, ha a deleteCount kimarad.
Ha a deleteCount értéke 0 vagy negatív, akkor a rendszer nem távolítja el az elemeket. Ebben az esetben legalább egy új elemet meg kell adni (lásd alább). item1 , item2 , ... Nem kötelező A tömbhöz hozzáadandó elemek az elejétől kezdve . Ha nem ad meg elemeket, a splice() csak elemeket távolít el a tömbből.
Visszatérési értékA törölt elemeket tartalmazó tömb.
Ha csak egy elemet távolítunk el, egy elemből álló tömb kerül visszaadásra.
Ha nem távolítanak el elemeket, akkor üres tömb kerül visszaadásra.
LeírásHa a beszúrandó elemek meghatározott száma eltér az eltávolítandó elemek számától, a tömb hossza a hívás végén eltérő lesz.
Példák Távolítson el 0 (nulla) elemet a 2. indexből, és illessze be a "dob" kifejezést, hagyja, hogy myFish = ["angyal", "bohóc", "mandarin", "tokhal"] let removed = myFish.splice(2, 0, "dob" ) // myFish is ["angel", "bohóc", "dob", "mandarin", "sturgeon"] // eltávolítva van, nincs elem eltávolítva. Távolítson el 0 (nulla) elemet a 2. indexből, és helyezze be a "dob" kifejezést és "gitár" let myFish = ["angyal", "bohóc", "mandarin", "tokhal"] let removed = myFish.splice(2, 0, "drum", "gitar") // myFish is ["angel" , "bohóc", "dob", "gitár", "mandarin", "sturgeon"] // eltávolítva van , nincs elem eltávolítva 1 elem eltávolítása a 3. indexből let myFish = ["angel", "bohóc", "dob" , "mandarin", "sturgeon"] let removed = myFish.splice(3, 1) // Remove is ["mandarin"] // myFish is ["angyal", "bohóc", "dob", "tokhal"] Távolítson el 1 elemet a 2. indexből, és illessze be a "trombita" szöveget, let myFish = ["angyal", "bohóc", "dob", "tokhal"] let removed = myFish.splice(2, 1, "trumpet") // myFish is ["angyal", "bohóc", "trombita", "torka"] // eltávolítva van ["dob"] Távolítson el 2 elemet a 0-s indexből, és illessze be a "papagáj", "kökörcsin" és "kék" szavakat, hagyja, hogy myFish = ["angyal", "bohóc", "trombita", "tokhal"] let removed = myFish.splice(0, 2, "papagáj", "kökörcsin", "kék") // myFish is ["papagáj", " anemone", "blue", "trumpet", "sturgeon"] // eltávolítva: ["angel", "bohóc"] Távolítson el 2 elemet a 2-es indexből let myFish = ["papagáj", "kökörcsin", "kék", "trumpet", "sturgeon"] let removed = myFish.splice(2, 2) // myFish is ["papagáj", "kökörcsin", "sturgeon"] // Remove is ["blue", "trumpet"] Remove 1 elem a -2 indexből let myFish = ["angyal", "bohóc", "mandarin", "tokhal"] let remove = myFish.splice(-2, 1) // myFish is ["angyal", "bohóc" , "sturgeon"] // Távolítsa el az összes elemet a 2. index után (beleértve) let myFish = ["angel", "bohóc", "mandarin", "sturgeon"] let removed = myFish.splice (2) // myFish is ["angyal", "bohóc"] // eltávolítva: ["mandarin", "torkhal"] SpecifikációkECMAScript legújabb vázlat (ECMA-262) |
Piszkozat | |
ECMAScript 2015 (6. kiadás, ECMA-262) Az "Array.prototype.splice" meghatározása a specifikációban. |
Alapértelmezett | |
ECMAScript 5.1 (ECMA-262) Az "Array.prototype.splice" meghatározása a specifikációban. |
Alapértelmezett | |
ECMAScript 3rd Edition (ECMA-262) | Alapértelmezett | Kezdeti meghatározás. JavaScript 1.2-ben implementálva. |
Az ezen az oldalon található kompatibilitási táblázat strukturált adatokból jön létre. Ha hozzá szeretne járulni az adatokhoz, kérjük, nézze meg a https://github.com/mdn/browser-compat-data webhelyet, és küldjön lehívási kérelmet.
Frissítse a kompatibilitási adatokat a GitHubon
Asztali mobil szerver | ||||||||||||
Chrome Edge Firefox internet böngésző Opera Safari Android webnézet Chrome Androidra Firefox Androidra Opera Androidra Safari iOS rendszeren Samsung Internet Node.js | ||||||||||||
Chrome teljes támogatás 1 | Edge Teljes támogatás 12 | Firefox teljes támogatás 1 | IE teljes támogatás 5.5 Megjegyzések Teljes támogatás 5.5Megjegyzések Megjegyzések Internet Explorer 5.5 és 8 között a tömb összes eleme nem törlődik, ha a deleteCount kihagyja. Ezt a viselkedést az Internet Explorer 9 javította. | Opera Teljes támogatás Igen | A Safari teljes támogatása 1 | WebView Android Teljes támogatás Igen | Chrome Android Teljes támogatás 18 | Firefox Android Teljes támogatás 4 | Opera Android Teljes támogatás Igen | Safari iOS teljes támogatás 1 | Samsung Internet Android Teljes támogatás Igen | nodejs Teljes támogatás Igen |
A JavaScriptben és más programozási nyelvekben is különböző módszereket használnak a tömbökkel való munkavégzéshez.
A módszerek leegyszerűsítik a logika felépítését és szkriptben való megvalósítását.
Az alábbiakban bemutatjuk a JS tömbökkel való munkavégzésének alapvető módszereit.
nyomA push() metódus értéket ad a tömb végéhez.
Legyen arr = ; arr.push(312); console.log(arr); // →
popA pop() metódus eltávolítja az utolsó elemet a tömbből, vagy visszaadja annak értékét.
Legyen arr = ; arr.pop(); console.log(arr); // →
Példaként a tömb utolsó elemének értékének lekérésének lehetőségével megkaphatjuk a képformátumot:
Legyen img = "https://example.com/img/name.png"; let format = img.split(".").pop(); console.log(formátum); // → png console.log(img.split(".")); // → ["https://example", "com/img/name", "png"]
váltáshozAz unshift() metódus hozzáad egy elemet a tömb elejéhez.
Legyen arr = ; arr.unshift(312); console.log(arr); // →
váltásA shift() metódus eltávolítja az első elemet a tömbből.
Legyen arr = ; arr.shift(); console.log(arr); // → ;
Meg kell értenie, hogy a shift és unshift metódusok használatakor a tömb minden eleme megváltoztatja az indexét. Ez lelassíthatja a program végrehajtását, ha a tömb nagy.
hasítottA split() metódus egy karakterlánc tömbbé alakítására szolgál. A Split felosztja a karakterláncot a megadott paraméter szerint.
Legyen str = "Anya, Masha, Sasha, Dasha"; // ez egy karakterlánc let arr = str.split(", "); console.log(arr); // → ["Anya", "Masha", "Sasha", "Dasha"] egy tömb
csatlakozikA join() metódus a tömbelemeket egy karakterláncba egyesíti a paraméterben megadott határoló használatával.
Legyen arr = ["Notpad++", "Sublime", "VSCode"]; // ez egy tömb let str = arr.join(", "); console.log("Kód szerkesztői: " + str); // → "Kódszerkesztők: Notpad++, Sublime, VSCode"
szeletA slice() metódus létrehoz egy új tömböt, amelybe a forrásból elemeket másol, kezdve a metódusnak átadott első paraméter indexével rendelkező elemtől a második paraméter indexével rendelkező elemig.
Például: a slice(3, 7) 3, 4, 5, 6 indexű elemeket ad vissza. A 7-es indexű elem nem kerül bele a tömbbe.
Ha negatív értékű paramétert adunk át a slice(-nek), akkor az egy új tömböt ad vissza a paraméterben megadott számú elemmel, de már az eredeti tömb végéről vett.
A slice metódus nem változtatja meg az eredeti tömböt.
Íme néhány példa a slice() metódus működésére:
Legyen arr = ["A", "B", "C", "D", "E", "F", "G"]; // 2-től 5-ig terjedő indexű elemeket tartalmazó tömböt ad vissza console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Egy új tömböt ad vissza, amely 3-tól arr.length-ig terjedő indexű elemeket tartalmaz konsole.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Az eredeti tömb másolatát adja vissza console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Egy új tömböt ad vissza, amely az eredeti console.log utolsó három eleméből áll. (arr.slice (-3)); // → ["E", "F", "G"]
toldásA splice() metódus a meglévő elemek eltávolításával és/vagy újak hozzáadásával módosítja a tömb tartalmát.
Szintaxis:
Array.splice(start, deleteCount[, item1[, item2[, ...]]])
Lehetőségek:
- start – Az index, amelynél el kell kezdeni a tömb módosítását. Ha nagyobb, mint a tömb hossza, a valós index a tömb hosszára lesz beállítva. Ha negatív, megadja az elem indexét a végétől.
- deleteCount – A tömbből törölni kívánt régi elemek számát jelző egész szám. Ha a deleteCount értéke 0, akkor egyetlen elem sem törlődik. Ebben az esetben legalább egyet meg kell adni új elem. Ha a deleteCount nagyobb, mint a tömbben maradt elemek száma az index kezdetétől kezdve, akkor a tömb végéig minden elem törlődik.
- itemN – Opcionális paraméterek. A tömbhöz hozzáadandó elemek. Ha nem ad meg egyetlen elemet sem, a splice() egyszerűen eltávolítja az elemeket a tömbből.
Ha a beszúrandó elemek száma eltér az eltávolítandó elemek számától, a tömb hossza a hívás után megváltozik.
Legyen arr = ["Barca", "Shakhtar", "Manchester United", "Milan", "Real", "Ajax", "Juventus"]; legyen nax = arr.splice(2, 3); arr.splice(2, 3); console.log(nax); // → ["Manchester United", "Milan", "Real"] console.log(arr); // → ["Barca", "Shakhtar"] arr.splice(1, 0, "Zenit", "CSKA", "Spartak"); console.log(arr); // → [Barça, Zenit, CSZKA, Spartak, Shakhtar]
fordítottA reverse() metódus megfordítja a tömbelemek sorrendjét. Ennek eredményeként a tömb első eleme az utolsó, az utolsó elem pedig az első.
Legyen arr = ; console.log(arr.reverse()); // → console.log(["Alice", "BG", "GO", "DDT"].reverce()); // → ["DDT", "GO", "BG", "Alice"]
térképA map() metódus végigmegy a tömb elemein, meghatározott műveleteket hajt végre rajtuk, és visszaadja a tömb másolatát a megváltozott elemekkel.
Az alábbi példában minden tömbelemhez hozzáadjuk ennek az elemnek az indexértékét (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):
Legyen arr = ; legyen testMap = arr.map((elem, index) => elem + index); console.log(testMap); //
vagy szorozza meg a tömb minden értékét például 12-vel
Legyen arr = ; legyen testMap = arr.map(a => a * 12); console.log(testMap); // →
szűrőA filter() metódus a tömbök szűrésére szolgál. A tömbön keresztül iterál, és csak azokat az elemeket adja vissza, amelyek megfelelnek egy adott feltételnek.
Például szűrjük meg egy számtömb értékeit, és csak azokat hagyjuk meg, amelyek nagyobbak 21-nél
Legyen arr = ; legyen testFilter = arr.filter(elem => elem > 21); console.log(tesztFilter); // →
Kérjük, vegye figyelembe, hogy a 21 nem szerepelt a tömb eredményében, mivel a feltétel az volt, hogy valami 21-nél nagyobb értéket adjon vissza. Ahhoz, hogy a 21 szerepeljen a tömbben, a feltételt nagyobbnak vagy egyenlőnek állítjuk be, mint: elem >= 21
A JavaScript fejlesztői között gyakori félreértés van a két módszer közötti különbséggel kapcsolatban. Tudod mi a különbség a szelet és a splice között?
Mindkét módszert arra tervezték, hogy egy JavaScript-tömböt darabokra bontsanak, de ha nem értjük, mikor kell szeletet és mikor illesztést használni, az nehezen észrevehető hibákhoz vezet. Nézzük meg a két módszert külön-külön, akkor nyilvánvalóvá válik a különbség.
Szelet - vágás és létrehozásAz angol slice igét „vágni” fordítják. Őszintén szólva nem értem, hogy mi vezérelte a specifikáció fejlesztőit, de nem hagyatkozhat a szavak fordítására a JS-ben. Az ECMAScript 5.1 specifikációja szerint a slice metódus két argumentumot használ: egy kezdő és egy végindexet. Ezután egy új tömb jön létre, amely a régi elemeit tartalmazza a kezdő indextől a befejezésig. A legfontosabb, hogy mindig új tömb jöjjön létre, pl. a tömb, amelyre a metódust alkalmazták, ugyanaz marad. Azt sem szabad elfelejteni, hogy a második paraméter nem az elemek számát adja meg, hanem a végindexet, tehát a második paraméternek mindig nagyobbnak kell lennie, mint az elsőnek, különben üres tömb kerül visszaadásra. Nézzünk példákat.
Var a = ; console.log(a); // var b = a.slice(3, 5); console.log(a); // console.log(b); // var c = a.slice(4, 2); console.log(a); // console.log(c);//
A JS-ben megszokott módon, csak emlékeznie kell arra, hogy a slice visszaadja a megadott kezdőindex elemeit (beleértve magát az elemet is) a megadott záróindexbe, de a záróelem nélkül.
Összeillesztés - vágás és felosztásAngol splice-ből - splice. Ismét nincs kapcsolat az ige és a metódus cselekvései között. A fő különbség a splice között az, hogy módosítja az eredeti tömböt. A metódus továbbra is használ egy kezdő és záró indexet, de ne feledje, hogy az eredeti tömb elveszti a levágott elemeket.
Var a = ; console.log(a); // var b = a.splice(3, 5); console.log(a); // console.log(b); // var c = a.splice(4, 2); console.log(a); // console.log(c); //
Ismét csak emlékezni kell arra, hogy a splice levágja az eredeti tömböt a megadott kezdőindexről (beleértve magát az elemet is) a megadott záró indexre (magát az elemet is beleértve). Ebben az esetben a metódus az összes levágott elemet visszaadja, és külön-külön elmentheti őket.
A splice módszer kényelmesen használható tömbelemek eltávolítására is. Hadd emlékeztesselek, hogy a szokásos törlés a; nem távolítja el magát az elemet, hanem undefined értékre állítja. Egy elem eltávolításához a legjobb az a.splice(1, 1);
Var a = ; törölje a; console.log(a); // var a = ; a.splice(1, 1); console.log(a); //
Megjegyzem az utolsóban Google verziók Az első esetben a Chrome-konzol ezt az eredményt jeleníti meg: . Valószínűleg egyszerűen nem jelenítette meg a definiálatlan elemet, mert valójában nem történt törlés.
Meghatározás és alkalmazásA JavaScript splice() metódus lehetővé teszi egy tömb tartalmának megváltoztatását a meglévő elemek eltávolításával és/vagy új elemek hozzáadásával a tömbhöz.
Vegye figyelembe, hogy a splice() metódus módosít egy meglévő tömböt, és nem ad vissza újat. Az eltávolított elemek új tömbobjektumként kerülnek visszaadásra.
Böngésző támogatássplice() | Igen | Igen | Igen | Igen | Igen | Igen |
Rajt | Egy egész szám, amely megadja annak a tömbnek az indexét, amelyből az elemeket eltávolítjuk a tömbből és/vagy hozzáadjuk a tömbhöz. Negatív értékek megengedettek, ebben az esetben az indexet, amelyből a módszert meghívják, a következő képlet segítségével számítják ki: hossza (tömb hossza) + Rajt. Kötelező érték. |
deleteCount | Egy egész szám, amely megadja a tömbből eltávolítandó elemek számát, a -ban megadott indextől kezdve Rajt. Ha deleteCount 0, akkor az elemek nem kerülnek eltávolításra. Ha az érték deleteCount nagyobb, mint a tömbben maradt elemek száma, akkor a tömb összes többi eleme törlődik. Opcionális érték, negatív értékek nem megengedettek. |
elem(ek) | A tömbhöz hozzáadott elem vagy elemek. Annak a tömbnek az indexe, amelybe új elemek kerülnek beillesztésre, megfelel a paraméternek Rajt. Opcionális érték. |
A szintaxisa a következő:
Array.splice(index, mennyi, [, ..., elemN]);
A paraméterek részletei- index – Az index, amelynél a tömb változni kezd.
- howMany – Az eltávolítandó régi tömbelemek számát jelző egész szám. Ha a howMany értéke 0, akkor a rendszer nem távolítja el az elemeket.
- elem1, ..., elemN – A tömbhöz hozzáadott elemek. Ha nem ad meg egyetlen elemet sem, a splice egyszerűen eltávolítja az elemeket a tömbből.
A kibontott tömböt adja vissza az átadott paraméterek alapján.
PéldaPróbálja ki a következő példát.
JavaScript - Tömbök. Method splice var arr = ["narancs", "dinnye", "tej", "cukor", "kávé"]; var eltávolítva = arr.splice(2, 0, "víz"); document.write("1 hozzáadása után: " + arr); document.write("
eltávolítva: " + eltávolítva); eltávolítva = arr.splice(3, 1); document.write("
1 hozzáadása után: " + arr); document.write("
eltávolítva: " + eltávolítva);