Home-theater-designers
A weboldal fejlesztői minden képzettségi szinttől kezdve az újonc programozóktól a kódolási szakértőkig felismerik a JavaScript fontosságát a modern weboldalak fejlesztésében. A JavaScript annyira domináns, hogy elengedhetetlen készség, hogy tudja -e, hogy webes alkalmazásokat fog -e létrehozni.
A JavaScript nyelvbe épített egyik legerősebb építőelem a tömbök. A tömbök gyakran megtalálhatók számos programozási nyelven, és hasznosak az adatok tárolására.
A JavaScript hasznos funkciókat is tartalmaz, amelyeket tömb módszereknek neveznek. Íme tizenöt, amelyet alaposan meg kell vizsgálnia, hogy fejlesztje készségeit fejlesztőként.
Mik azok a tömb módszerek?
Tömb módszerek a JavaScriptbe beépített függvények, amelyeket a tömbökre alkalmazhat. Minden módszer egyedi funkcióval rendelkezik, amely módosítást vagy számítást végez a tömbön, így elkerülheti a gyakori függvények kódolását.
A JavaScript tömbmódszerei a tömbváltozóhoz csatolt pontjelöléssel futtathatók. Mivel ezek csak JavaScript függvények, mindig zárójelben végződnek, amely nem kötelező argumentumokat tartalmazhat. Íme egy módszer, amely egy egyszerű tömbhöz kapcsolódik, az ún myArray .
let myArray = [1,2,3]; myArray.pop();Ez a kód egy ún pop a tömbhöz.
Példa tömb
Minden példa esetében használjon egy minta tömböt, amelyet meghívunk myArray , hogy végrehajtsa a módszereket. Nyugodtan húzza fel a konzolt és a kódot.
let myArray = [2,4,5,7,9,12,14];Ezek a példák feltételezik, hogy ismeri az alapot mi a JavaScript és hogyan működik . Ha nem, nem baj, mindannyian itt vagyunk, hogy tanuljunk és fejlődjünk.
Vájjon bele ebbe a tizenöt hatékony tömb módszerbe!
1. Array.push ()
Mit csinál: nyom() elveszi a tömbjét, és hozzáad egy vagy több elemet a tömb végéhez, majd visszaadja a tömb új hosszát. Ez a módszer módosítja a meglévő tömböt.
Futtassa a 20 -as számot a tömbhöz nyom() , 20 -at használva érvként.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Ellenőrizze, hogy működött -e:
console.log(myArray); [2,4,5,7,9,12,14,20]Futtatása a nyom() metódus a myArray -n hozzáadta az argumentumban megadott értéket a tömbhöz. Ebben az esetben 20. Ha a konzolon ellenőrzi a myArray -t, látni fogja, hogy az érték hozzá lett adva a tömb végéhez.
2. Array.concat ()
Mit csinál: konc () két vagy több tömböt egyesíthet egy új tömbbe. Nem módosítja a meglévő tömböket, hanem újat hoz létre.
Vesz myArray és egyesítse az úgynevezett tömböt newArray bele.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Ez a módszer csodákat tesz, ha több tömböt vagy értéket kell összevonnia, amelyeket egy egyszerű lépésben kell elvégeznie a változók használatakor.
3. Array.join ()
Mit csinál: csatlakozik() tömböt vesz, és a tömb tartalmát vesszővel elválasztva összefűzi. Az eredmény egy karakterláncba kerül. Megadhat elválasztót, ha a vessző alternatíváját szeretné használni.
Nézze meg, hogyan működik ez a myArray használatával. Először az alapértelmezett metódust használja elválasztó argumentum nélkül, amely vesszőt használ.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'A JavaScript karakterláncot ad ki, a tömb minden értékét vesszővel elválasztva. A függvény argumentumaival megváltoztathatja az elválasztót. Figyelje meg két érvvel: egyetlen szóköz és karakterlánc.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'Az első példa egy szóköz, amely könnyen olvasható karakterláncot készít.
A második példa használja ('és') , és itt két dolgot kell tudni.
Először is az „és” szót használjuk az értékek elkülönítésére. Másodszor, az „és” szó mindkét oldalán szóköz található. Ezt fontos szem előtt tartani használat közben csatlakozik() . A JavaScript szó szerint olvassa az érveket; így ha ezt a helyet kihagyjuk, akkor minden össze lesz törve (pl. '2 és 4 és 5 ...' stb.) Nem túl jól olvasható kimenet!
4. Array.forEach ()
Mit csinál: az egyes() (kis- és nagybetűk megkülönböztetése!) funkciót hajt végre a tömb minden elemén. Ez a függvény bármilyen létrehozott függvény, hasonlóan ahhoz, hogy a 'for' ciklus használatával függvényt alkalmazzunk egy tömbre, de sokkal kevesebb munkával kell kódolni.
Van még egy kicsit az egyes() ; nézze meg a szintaxist, majd hajtson végre egy egyszerű funkciót annak bemutatására.
myArray.forEach(function(item){
//code
});
Mi használjuk myArray , az egyes() pont jelöléssel kerül alkalmazásra. A használni kívánt függvényt az argumentum zárójelbe helyezi, azaz függvény (elem) a példában.
Vessünk egy pillantást függvény (elem) . Ez a forEach () belsejében végrehajtott függvény, és megvan a maga argumentuma. Hívjuk a vitát tétel . Két dolgot kell tudni erről az érvelésről:
- Amikor a forEach () hurkok a tömb fölött, a kódot alkalmazza erre az argumentumra. Tekintse úgy, mint egy ideiglenes változót, amely az aktuális elemet tartalmazza.
- Ön választja az argumentum nevét, bárminek nevezheti, amit akar. Általában ezt a nevet könnyebben érthetőnek nevezik, például „elem” vagy „elem”.
Ezt a két dolgot szem előtt tartva nézze meg ezt az egyszerű példát. Adjon hozzá 15 -öt minden értékhez, és a konzol jelenítse meg az eredményt.
myArray.forEach(function(item){
console.log(item + 15);
});
Mi használjuk tétel ebben a példában változóként, így a függvény úgy van írva, hogy 15 -öt adjon hozzá minden értékhez tétel . Ezután a konzol kinyomtatja az eredményeket. Így néz ki a Google Chrome konzolon.
Az eredmény a tömb minden száma, de hozzá kell adni 15 -öt!
5. Array.map ()
Mit csinál: térkép() funkciót hajt végre a tömb minden elemén, és az eredményt egy új tömbbe helyezi.
Funkció futtatása minden elemen úgy hangzik, mint a forEach (). A különbség itt van térkép() futtatásakor új tömböt hoz létre. A forEach () nem hoz létre automatikusan új tömböt, ehhez egy adott függvényt kell kódolnia.
A map () segítségével duplázza meg a myArray minden elemének értékét, és helyezze el őket egy új tömbben. Ugyanezt fogja látni függvény (elem) szintaxis egy kis gyakorláshoz.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Ellenőrizze az eredményeket a konzolon.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray változatlan:
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift ()
Működése: Hasonló a push () módszer működéséhez, a váltás nélküli () metódus felveszi a tömböt, és a vége helyett egy vagy több elemet ad a tömb elejéhez, és visszaadja a tömb új hosszát. Ez a módszer módosítja a meglévő tömböt.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);A tömbnek a konzolra történő bejelentkezésekor a tömb elején a 0 számot kell látnia.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort ()
Működése: A rendezés az egyik leggyakoribb művelet, amelyet tömbön végeznek, és rendkívül hasznos. JavaScript fajta() tömb metódus használható számok vagy akár karakterláncok tömbjének rendezésére egyetlen kódsorral. Ez a művelet a helyén van, és a kezdeti tömb módosításával visszaadja a rendezett tömböt. Vegyünk egy másik számkészletet myArray ezúttal.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Mivel a rendezés a helyén történik, nem kell külön változót deklarálnia a rendezett tömbhöz.
console.log(myArray); [10, 12, 34, 55, 65]Alapértelmezés szerint a tömb növekvő sorrendben van rendezve, de tetszés szerint átadhat egy egyéni függvényt a fajta() módszer a tömb kívánt módon történő rendezésére. Ebben az esetben átmentem egy szokáson nyíl funkció hogy a tömböt numerikusan növekvő sorrendbe rendezze.
8. Array.reverse ()
Mit csinál: Ahogy a neve is sugallja, a fordított() metódust használják a tömb elemeinek sorrendjének megfordítására. Ne feledje, hogy ez nem fordítja vissza a tömb tartalmát, hanem csak magát a sorrendet. Íme egy példa a módszer jobb megértéséhez:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()A művelet ellenőrzéséhez jelentkezzen be a kimenetre a konzolra.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Mint látható, az elemek sorrendje megfordult. Korábban az utolsó indexben lévő elem (14. elem a 6. indexnél) most a nulla index indexe és így tovább.
9. Array.slice ()
Mit csinál: szelet() egy tömb egy részének sekély másolatának lekérésére szolgál. Egyszerűbben fogalmazva, ez a módszer lehetővé teszi, hogy meghatározott elemeket válasszon ki egy tömbből az indexük alapján. Átadhatja annak az elemnek a kezdőindexét, amelyből le szeretné tölteni, és az elemeket, és opcionálisan a végindexet is.
Ha nem adja meg a záróindexet, a kezdő indextől a tömb végéig minden elem lekérésre kerül. Ez a módszer új tömböt ad vissza, és nem módosítja a meglévőt.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);A fenti kódban a második indextől az utolsó indexig minden elem lekérésre kerül, mivel a végindex paraméter nem kerül átadásra. Jelentkezzen be mindkét tömbbe a konzolba.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Nyilvánvaló, hogy a kezdeti tömb nem módosul a slice () metódussal, és ehelyett egy új tömböt ad vissza, amelyet a szeletelt tömb változó. Íme egy példa, amelyben a végindex paramétert is átadja a szelet() módszer.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Array.splice ()
Mit csinál: összeillesztés () egy hasznos tömb módszer a tömb elemeinek eltávolítására vagy cseréjére. Az index és a törölni kívánt elemek számának megadásával módosítja a tömböt.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);A fenti példában a myArray tömb a 2. indexből össze van kötve, és a 3. elemeket eltávolítjuk belőle. A tömb most a következőkből áll:
[2, 4, 12, 14]Az elemek cseréje helyett a törlés helyett tetszőleges számú opcionális paramétert adhat át a cserélni kívánt elemekkel, például:
hogyan lehet korhatáros videókat nézni a youtube -on
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Array.filter ()
Mit csinál: A szűrő() A metódus egy hasznos tömb módszer, amely egy tesztet tartalmazó függvényt vesz fel, és egy új tömböt ad vissza a teszten áteső összes elemmel. Nevéhez híven ezt a módszert használják a szükséges elemek kiszűrésére a többi elemből. A szűrés egy függvény segítségével történik, amely logikai értéket ad vissza.
Íme egy példa a szűrő() módszer, amellyel csak azokat az elemeket kapjuk meg a tömbből, amelyek oszthatók 2 -vel.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);A fenti példában egy nyílfüggvény kerül átadásra, mint paraméter, amely minden számot az eredeti tömbből vesz, és a modulo ( % ) és egyenlőség ( === ) operátor. Így néz ki a kimenet:
[2, 4, 12, 14]12. Array.reduce ()
Mit csinál: csökkent () egy tömb módszer, amely redukciós függvényt vesz fel és végrehajtja minden tömb elemen, hogy visszatéréskor egyetlen értéket adjon ki. Szükséges paraméterekként redukciós függvényt tartalmaz, amely egy akkumulátor -változót és egy aktuális elem -változót tartalmaz. Az akkumulátor értéke az összes iteráció során megmarad, és végül a végső iteráció után visszatér.
Ennek a módszernek egy népszerű felhasználási módja a tömb összes elemének összegének kiszámítása. Ennek a funkciónak a megvalósítása a következő:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);A fenti példában a 0 paraméter kerül átadásra második paraméterként, amelyet az akkumulátor változó kezdeti értékeként használunk. Az sumOfNums változó tartalmazza a visszatérési értékét csökkent () módszer, amely várhatóan a tömb összes elemének összege lesz.
console.log(sumOfNums); 5313. Array.includes ()
Működése: Egy elem keresése egy tömbből annak ellenőrzésére, hogy jelen van-e, gyakran használt művelet, ezért a JavaScript beépített módszert kínál erre. magába foglalja() tömb módszer. Így használhatja:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Ez a módszer megköveteli a szükséges paramétert, a keresendő elemet és egy opcionális paramétert, a tömbindexet, amelyből a keresést el kell kezdeni. Attól függően, hogy az elem jelen van -e vagy sem, visszatér igaz vagy hamis illetőleg. Ezért a kimenet a következő lesz:
true
false
true
false14. Array.indexOf ()
Mit csinál: indexe() metódust használjuk annak az indexnek a kiderítésére, amelynél a megadott elem első előfordulása megtalálható a tömbben. Bár hasonló az include () metódushoz, ez a módszer a numerikus indexet adja vissza, vagy -1 -et, ha az elem nincs jelen a tömbben.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));indexe() A módszer szigorú egyenlőséget használ annak ellenőrzésére, hogy van -e elem, ami azt jelenti, hogy az értéknek és az adattípusnak is azonosnak kell lennie. Az opcionális második paraméter az indexet használja a keresés megkezdéséhez. Ezen feltételek alapján a kimenet a következőképpen fog kinézni:
1
-1
415. Array.fill ()
Működése: Gyakran előfordulhat, hogy a tömb összes értékét statikus értékre kell állítania, például 0. A ciklus használata helyett megpróbálhatja a tölt() módszer ugyanarra a célra. Ezt a módszert meghívhatja egy olyan tömbön, amelynek 1 kötelező paramétere van: a tömb kitöltendő értéke és 2 választható paraméter: a kezdő és a befejező index, amelyek között ki kell tölteni. Ez a módszer módosítja a kilépő tömböt.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);A kimenet konzolra történő bejelentkezésekor a következőket láthatja:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]A JavaScript -utazás következő lépései
A tömbök a JavaScript nyelv erőteljes részét képezik, ezért olyan sok olyan módszer van beépítve, amelyek megkönnyítik fejlesztői életét. E tizenöt módszer elsajátításának legjobb módja a gyakorlás.
Amint folytatja a JavaScript tanulását, Az MDN nagyszerű forrás részletes dokumentációért. Érezze jól magát a konzolban, majd fejlessze készségeit a legjobb JavaScript -szerkesztőkkel a programozók számára. Készen áll a webhely létrehozására JavaScript segítségével? Miért nem vessen egy pillantást néhány keretrendszerre, amelyeket fontolóra vehet.
Részvény Részvény Csipog Email 6 JavaScript keretrendszer, amit érdemes megtanulniSok JavaScript keretrendszer létezik, amelyek segítik a fejlesztést. Íme néhány, amit tudnia kell.
Olvassa tovább Kapcsolódó témák- Programozás
- JavaScript
- Kódolási tippek
Nitin lelkes szoftverfejlesztő és számítástechnikai hallgató, aki webes alkalmazásokat fejleszt JavaScript technológiák segítségével. Szabadúszó webfejlesztőként dolgozik, szabadidejében szeret Linuxra és programozásra írni.
Továbbiak Nitin Ranganath -tólIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide