itthon / Windows leckék / JavaScript tömb módszerek. Egy adott JavaScript tömbelem eltávolítása

JavaScript tömb módszerek. Egy adott JavaScript tömbelem eltávolítása

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ék

A 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ás

Ha 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ók Specifikáció Állapot Megjegyzés
ECMAScript 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.
Böngésző kompatibilitás

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.jstoldás
Chrome teljes támogatás 1Edge Teljes támogatás 12Firefox teljes támogatás 1IE teljes támogatás 5.5

Megjegyzések

Teljes támogatás 5.5

Megjegyzé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 IgenA Safari teljes támogatása 1WebView Android Teljes támogatás IgenChrome Android Teljes támogatás 18Firefox Android Teljes támogatás 4Opera Android Teljes támogatás IgenSafari iOS teljes támogatás 1Samsung Internet Android Teljes támogatás Igennodejs Teljes támogatás Igen
Jelmagyarázat Teljes támogatás Teljes támogatás Lásd a megvalósítási megjegyzéseket. Lásd a végrehajtási megjegyzéseket.

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.

nyom

A push() metódus értéket ad a tömb végéhez.

Legyen arr = ; arr.push(312); console.log(arr); // →

pop

A 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áshoz

Az unshift() metódus hozzáad egy elemet a tömb elejéhez.

Legyen arr = ; arr.unshift(312); console.log(arr); // →

váltás

A 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ított

A 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

csatlakozik

A 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"

szelet

A 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ás

A 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.
Visszatérési érték Leírás

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ított

A 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ép

A 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ás

Az 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ás

Angol 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ás

A 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ás Módszer
Opera
IExplorer
Él
splice()IgenIgenIgenIgenIgenIgen
JavaScript szintaxis: // csak indexjelzéssel sor.splice( Rajt) // jelzi az eltávolítandó elemek indexét és számát sor.splice( Rajt, deleteCount) // jelzi az indexet, az eltávolítandó és a hozzáadandó elemek számát sor.splice( Rajt, deleteCount, elem1, elem2, ..., elemX) JavaScript verzió ECMAScript 3 (JavaScript 1.2-ben implementálva) Paraméterértékek Paraméter Leírás
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.
Példa a var x = használatára; // az x.splice(3 ) tömböt tartalmazó változó inicializálása; x.splice(-3 ); // változó értéke x.splice(2 , 2 ); // változó értéke x.splice(-2 , 2 ); // változó értéke x.splice(0 , 2 , "z ", true ); // változó értéke ["z", igaz, 3, "a", "b", "c"] x.splice(3, 0, "z", "z", "z"); // változó érték A splice() metódus a Javascript tömbökben megváltoztatja a tömb tartalmát, új elemeket ad hozzá, régieket eltávolít.

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.
Visszatérési érték

A kibontott tömböt adja vissza az átadott paraméterek alapján.

Példa

Pró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);

Kimenet 1 hozzáadása után: narancs, dinnye, víz, tej, cukor, kávé eltávolítva: 1 hozzáadása után: narancs, dinnye, víz, cukor, kávé eltávolítva: tej