Nizovi su jedan od najčešće korištenih tipova varijabli koji vam omogućavaju pohranjivanje mnogih sekvencijalnih vrijednosti na "jednom mjestu". Međutim, kada je u pitanju JavaScript, postoji prostor za poboljšanje.

U ovom članku ćemo pogledati tri malo poznate tehnike koje se mogu koristiti pri radu s nizovima.

1. Dodavanje prilagođenih svojstava nizovima

Ako koristite pretragu da biste pronašli definiciju niza unutar JavaScript jezika, većina izvora će navesti da je ova vrsta vrijednosti varijable predstavljena kao objekt.

Uopšteno govoreći, mnoge stvari sa kojima se susrećemo u JavaScript-u su objekti. Bilo bi pošteno napomenuti da jezik sadrži i „primitivne“ tipove podataka, ali se njihove vrijednosti na neki način koriste u svojstvima unutar objekata.

2. Pristup elementima niza unutar petlje

Pošto indeksi niza mogu imati samo pozitivne vrijednosti, brojanje počinje od nule. Kasnije možemo koristiti ovaj indeks za pristup elementu niza u datoj iteraciji petlje.

ECMAScript6 je uveo način skrolovanja kroz niz bez upotrebe indeksa, već kroz novu for…of petlju.

Petlja for...of je dizajnirana za ponavljanje kroz elemente niza bez utjecaja na indeks elementa.

Var ary = ["narandža","jabuka","liči"]; for (neka stavka od ary)( console.log(item); ) // "orange", "apple", "lychee" Za poređenje: izlaz indeksa stavke u for petlji. var ary = ["narandža","jabuka","liči"]; za (var stavka = 0; stavka< ary.length; item++){ console.log(item); } // 0, 1, 2

3. Broj elemenata nije dimenzija niza

Kada govorimo o veličini niza, obično o njemu razmišljamo kao o broju elemenata pohranjenih u njemu. Zapravo, ovo nije sasvim tačno - svojstvo dužine se izračunava u zavisnosti od maksimalnog indeksa elementa.

Svojstvo dužine je vrlo dvosmisleno. Da biste to potvrdili, samo pogledajte sljedeće manipulacije:

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

U posljednjem primjeru bilo je dovoljno staviti element na petu poziciju, zbog čega je dužina niza postala 6. Ako mislite da će se indeksi od 0 do 4 automatski kreirati, griješite. Ovo se može provjeriti pomoću in operatora.

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 u ary); // false

U ovom slučaju, bilo bi pošteno nazvati ary niz "sparse".

Takođe možemo manipulisati svojstvom dužine da bismo skratili nizove. Donji primjer pokazuje "gubljenje" elementa na indeksu 5 smanjenjem svojstva dužine ary niza.

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // nedefinisano

Opisao sam samo neke od metoda za rad sa nizovima.

Ovdje ćemo govoriti o dodavanju i uklanjanju elemenata niza. O okretanju i sortiranju niza, kao i o rezanju, zamjeni i kombiniranju nizova.

Dodavanje elemenata u niz.

Možete koristiti svojstvo dužine da dodate nove elemente u niz:

Var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; myArray = "Yahoo!"; console.log(myArray); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]

Ovo će uspjeti jer... elementi niza su numerisani počevši od nule, i dužina još jedan. Dužina uvek ekvivalentan indeks + 1, tako da je vrlo lako dodati novi element na kraj niza. Čudno, možete dodati element na poziciju koja je mnogo veća od dužine samog niza:

Var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; myArray = "Lindsey Buckingham"; console.log(myArray); // ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards", nedefinirano × 95, "Lindsey Buckingham"] console.log(myArray.length); // 100

Kao što je prikazano u komentarima, ovo će dodati 95 praznih slotova i element "Lindsey Buckingham" na kraj niza. Nakon ovoga dobićemo dužinu od 100. Drugi način da dodate novi element u niz je korištenje metode guranje():

Var myArray = ["Paul McCartney", "John Lennon", "George Harrison"]; myArray.push("Ringo Starr", "George Martin"); console.log(myArray); // ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr", "George Martin"]

Metoda guranje() uvijek vraća novu dužinu niza (u našem slučaju 5). Možete dodati element koristeći spoj ():

Var myArray = ["žir", "bukva", "mongongo", "makadamija"]; myArray.splice(2, 0, "indijski orah"); // dodaje "indijski orah" u indeks 2 console.log(myArray); // ["žir", "bukva", "indijski orah", "mongongo", "makadamija"]

Kada je drugi argument 0, to znači da nijedan element neće biti uklonjen, i stoga će svi naredni argumenti biti dodani u niz na poziciji navedenoj u prvom argumentu.

Uklanjanje elemenata iz niza

Uklanjanje elementa je malo teže od dodavanja. Da biste uklonili element s kraja niza, možete koristiti pop():

Var myArray = ["7-up", "Sprite", "Ginger Ale", "Lemonade"]; myArray.pop(); console.log(myArray); // ["7-up", "Sprite", "Ginger Ale"]

Metoda pop() uvijek uklanja posljednji element u nizu i vraća ga.

Također možete koristiti spoj () metoda:

Var myArray = ["maniokoka", "muškatni oraščić", "lupin", "rabarbara"]; myArray.splice(2, 1); // uklanjanje elementa s indeksom 2 console.log(myArray); // ["maniokoka", "muškatni oraščić", "rabarbara"]

Za razliku od metode spoj () koji se koristi za dodavanje elemenata, ovdje je drugi argument 1, što kaže da želimo ukloniti element sa indeksom 2 (ili 3. po redu). U ovom slučaju, element "lupin" je uklonjen.

Možete ukloniti element iz niza pomoću operatora izbriši:

Var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Michelangelo"]; console.log(myArray.length); // 4 brisanje myArray; // izbriši Eliza console.log(myArray.length); // 4 console.log(myArray); // ["Byte Bandit", nedefinirano × 1, "Jeefo", "Michelangelo"]

Prva važna napomena: delete() ne mijenja dužinu niza nakon uklanjanja elementa (čak i ako je to bio posljednji element u nizu). Sekunda: delete() mijenja vrijednost elementa koji treba ukloniti u nedefiniranu, tako da prilikom pristupa myArray = nedefinisano.

Dobar način da uklonite element iz niza je da koristite Array.remove Johna Resiga. Ispod je primjer upotrebe preuzet sa njegove stranice:

// Uklanjanje niza - Autor John Resig (licencirani MIT) Array.prototype.remove = funkcija (od, do) ( var rest = this.slice((do || from) + 1 || this.length); this.length = od< 0 ? this.length + from: from; return this.push.apply(this, rest); }; // Удаление 2 элемента из массива array.remove(1); // Удаление 2-ого элемента с конца массива array.remove(-2); // Удаление второго и третьего элемента array.remove(1,2); // Удаление последнего и предпоследнего элемента array.remove(-2,-1);

Možda biste željeli pogledati rješenje Viral Patela, jednu od funkcija u Underscore.js, ili jQuery-jev grep().

Osim toga, u JavaScript postoji metoda shift(), koji uklanja prvi element u nizu i vraća njegovu vrijednost. Pogledajmo kod:

Var myArray = ["Matt Kramer", "Jason Bieler", "Tom Defile", "Phil Varone"]; console.log(myArray.length); // 4 var firstItem = myArray.shift(); console.log(firstItem); // Matt Kramer console.log(myArray.length); // 3 console.log(myArray); // ["Jason Bieler", "Tom Defile", "Phil Varone"]

Koristeći metodu shift() uklonili smo element, ali smo pohranili njegovu vrijednost u našu varijablu firstIte. Dužina niza se promijenila sa 4 na 3.

Ova metoda može biti korisna zajedno s metodom guranje(). Koristeći ih zajedno možemo efikasno staviti elemente u red u nizu. Održavamo dužinu niza uklanjanjem elementa s početka i dodavanjem novog na kraj.

Naprotiv, možemo koristiti metodu unshift() da dodate element na početak niza:

Var myArray = ["apito", "castanets", "maraca"]; console.log(myArray.length); // 3 myArray.unshift("chime bar", "tan-tan"); console.log(myArray.length); // 5 console.log(myArray); // ["chime bar", "tan-tan", "apito", "castanets", "maraca"]

Korištenje metode unshift() sa metodom pop(), možete kreirati redove u obrnutom smjeru dodavanjem elemenata na početak i uklanjanjem s kraja niza.

Preokretanje i sortiranje elemenata niza.

Da bismo obrnuli elemente u nizu možemo koristiti obrnuto():

Var myArray = ["countdown", "final", "the"]; console.log(myArray); // ["countdown", "final", "the"] myArray = myArray.reverse(); console.log(myArray); // ["the", "final", "countdown"]

Pomoću metode moguće je sortirati elemente niza po abecednom redu sortiraj():

Var myArray = ["ksilofoni", "zebre", "jagernauti", "avokado"]; console.log(myArray); // ["xylophones", "zebras", "juggernauts", "avocados"] myArray = myArray.sort(); console.log(myArray); // ["avokado", "jagernauti", "ksilofoni", "zebre"]

Ali ovo neće raditi s brojevima.

Var myArray = ; console.log(myArray); // myArray = myArray.sort(); console.log(myArray); //

Ako trebate sortirati brojeve, možete koristiti sljedeći kod:

Funkcija compareNumbers(a, b) ( return a - b; ) var myArray = ; console.log(myArray); // myArray = myArray.sort(compareNumbers); console.log(myArray); //

Kao što je gore prikazano, sa jednostavnom funkcijom umetnutom sortiraj(), niz koji sadrži brojeve će biti pravilno sortiran.

Kombinovanje nizova.

Možemo kombinovati 2 ili više nizova i dobiti 1 niz koji sadrži elemente spojenih nizova. Za to koristimo metodu concat():

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myArray2 = ["Chris Murphy", "Patrick Pentland"]; var myNewArray = myArray.concat(myArray2); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myNewArray = myArray.concat("Chris Murphy", "Patrick Pentland"); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Podjela niza.

Pomoću funkcije možemo kreirati novi niz koji sadrži 1 ili više elemenata iz postojećeg niza kriška():

Var myArray = ["Vokali", "Bas", "Gitara", "Bubnjevi", "Jabuke", "Narandže"]; var myNewArray = myArray.slice(4); console.log(myNewArray); // ["Jabuke", "Naranče"]

Metoda kriška() uzima 1 ili 2 argumenta. Ako je proslijeđen 1 argument (indeks), tada se kreira novi niz od svih elemenata starog, počevši od ovog indeksa. Ako su proslijeđena 2 argumenta, tada se kreira novi niz od elemenata počevši od prvog argumenta pa do elementa s indeksom proslijeđenim u drugom parametru, ne uključujući posljednji. Da bude jasnije, pogledajmo kod u nastavku:

Var myArray = ["Vokali", "Bas", "Gitara", "Bubnjevi", "Jabuke", "Narandže"]; var myNewArray = myArray.slice(0, 4); console.log(myNewArray); // ["vokali", "bas", "gitara", "bubnjevi"]

Zamjena elemenata u nizu.

Koristimo spoj () da uklonimo elemente iz niza, ali također možemo zamijeniti element u nizu novim elementima:

Var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"]; myArray.splice(3, 1, "Scott Shriner"); // zamijeniti 1 element s indeksom 3 console.log(myArray); // ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]

Metoda spoj () uvijek vraća niz koji sadrži elemente koji su uklonjeni. Linija 2 će vratiti 1 element "Brian Bell".

Zaključak

Ovi članci opisuju metode za rad sa nizovima u JavaScript-u. Postoje neke dodatne stavke koje možete pogledati na MDN-u koje nisam uključio u ovaj post. Oni rade samo u IE9+, tako da možda neće biti korisni.

Želite li nešto dodati? Ili znate neku zanimljivu biblioteku koja će vam pomoći u upravljanju nizovima? Molim komentar!

U ovom članku ćemo pogledati JavaScript niz i njegove komponente. JavaScript je idealno dizajniran za programiranje. U stvari, implementira ECMAScript jezik (ECMA-262 standard).

Gdje se koristi JavaScript? Koristi se kao ugrađeni jezik za definiranje putanje programa do predmeta aplikacije. Može se naći u pretraživačima gdje se koristi kao skriptni jezik koji web stranice čini interaktivnim.

Najvažnije arhitektonske karakteristike ovog proizvoda su dinamično i slabo kucanje, automatsko upravljanje memorijom, savršeno programiranje i prvoklasne objektne funkcije.

Generalno, na JavaScript su uticali različiti razlozi, jer su tokom razvoja želeli da stvore jezik sličan Javi, ali jednostavan za programere. Inače, JavaScript jezik nije u vlasništvu nijedne kompanije ili organizacije, što ga čini za razliku od brojnih programskih stilova koje koriste web programeri.

Treba napomenuti da je JavaScript registrovani zaštitni znak kompanije Oracle Corporation.

Šta je niz?

Niz je onaj koji pohranjuje numerirane vrijednosti. Svaka takva vrijednost naziva se komponenta niza, a cifra kojoj je komponenta pridružena naziva se indeks. JavaScript niz nije otkucan. To znači da dijelovi niza mogu biti bilo kojeg tipa, a različiti dijelovi koji pripadaju istom nizu imaju potpuno različite tipove.

Osim toga, JavaScript niz je dinamičan, što znači da nema potrebe za deklarisanjem fiksne veličine. Na kraju krajeva, možete dodati nove detalje u bilo kojem trenutku.

Proizvodnja nizova

Koristeći JavaScript, kreiranje niza uopće nije teško. Za to postoje dvije metode. Prvi uključuje kreiranje niza pomoću literala - uglatih zagrada, unutar kojih se nalazi lista dijelova, odvojenih zarezima.

• var prazno = ; //prazan niz;
• var numbers = ; //niz sa pet digitalnih komponenti;
• var diff = ; //niz sa tri elementa različitih tipova.

Obično se ne zahtijeva da vrijednosti ovdje budu jednostavne (nizovi i brojevi). To također mogu biti bilo koji drugi izrazi, na primjer, literali subjekta, druge funkcije i nizovi.

Drugi način za kreiranje niza je pozivanje dizajnera Array(). Možete ga pozvati na tri načina:

• Pozivanje dizajnera bez argumenata: var b - new Array(). Ovo omogućava kreiranje praznog niza, ekvivalentnog praznom literalu.
• Konstruktor eksplicitno specificira vrijednost n komponenti niza: var b = novi niz (1, 3, 5, 8, “string”, istina). U ovom slučaju, dizajneru se prikazuje lista argumenata koji se pretvaraju u komponente novog niza. Argumenti se zapisuju u niz na lokaciji na kojoj su navedeni.
• Definiranje područja za naknadnu dodjelu vrijednosti. Ovo se radi navođenjem, prilikom identifikacije niza, jednog broja zatvorenog u zagrade: var b = new Array(5). Ova metoda identifikacije uključuje dodjeljivanje potrebnog broja komponenti nizu (od kojih je svaka navedena kao nedefinirana) s mogućnošću naknadnog dodjeljivanja vrijednosti tokom procesa prezentacije. Ovaj obrazac se obično koristi za prethodno dodeljivanje Javascript niza čija je dužina unapred poznata.

Pisanje, čitanje i dodavanje detalja niza

Možete pristupiti komponentama niza pomoću operatora. Inače, sve komponente u JavaScript-u, počevši od nule, su numerisane. Da biste dobili traženi element, njegov broj je naveden u U pravilu se detalji mogu mijenjati. A da biste dodali JavaScript u niz, samo trebate dodijeliti novu vrijednost.

Treba napomenuti da JavaScript nizovi mogu pohraniti bilo koji broj elemenata bilo koje vrste.

Dužina niza

Dakle, znamo da je dužina niza općenito zanimljiv fenomen. Pogledajmo to izbliza. Svi nizovi, bilo da su napravljeni pomoću dizajnera Array() ili otkriveni kroz literal niza, imaju specifično svojstvo dužine koje ukazuje na ukupan broj pohranjenih elemenata. Pošto niz može sadržavati nedefinirane dijelove (označene sa undefined), precizniji izraz je: kvalitet dužine je uvijek za jedan veći od najvećeg broja (indeksa) komponente niza. Kvalitet dužine se podešava automatski, ostajući precizan kada se novi dijelovi pojave u nizu.

Da bi se pojavila konačna komponenta niza, možete koristiti svojstvo dužine.

Posljednji dio ima indeks jedan manji od veličine niza. Uostalom, odbrojavanje uvijek počinje od nule. Oh, ovaj JavaScript! Dužina niza zavisi od tačnog broja elemenata. Dakle, ako ne znate koliko bi ih trebalo biti, ali trebate pristupiti konačnom elementu niza, trebate koristiti notaciju: v.length - 1.

Iteracija preko detalja niza

Vrlo često se svojstvo dužine koristi za ponavljanje detalja niza u petlji:

• var fruits = [“jagoda”, “breskva”, “jabuka”, “banana”];
• for(var I = 0; i< fruits.lenght; i++);
• document.write(voće[i] + "...").

U ovom primjeru čini se da su komponente postavljene kontinuirano i počinju s prvim dijelom koji posjeduje indeks nula. Ako to nije slučaj, prije pozivanja svakog elementa niza morate provjeriti da li je definiran.

Petlja se također ponekad koristi za inicijalizaciju komponenti.

Povećajte i skraćite niz

Pitam se kako dodati string u niz koristeći JavaScript? Kako radimo s nizovima, kvalitetna dužina se automatski poboljšava, zbog čega se sami moramo pobrinuti za to. Neophodno je zapamtiti jedan detalj - svojstvo dužine nije samo čitljivo, već i upisano. Ako se kvalitetu dužine dodijeli vrijednost koja je manja od trenutne, tada se niz smanjuje na specificiranu veličinu. Sve komponente koje nisu u novom rasponu indeksa se odbacuju i njihove vrijednosti se gube, čak i ako se dužina kasnije vrati - vrijednosti se ne vraćaju.

Prilično je lako obrisati niz ovako: foo.length = 0.

Ako je kvalitet dužine veći od trenutne vrijednosti, na kraju niza će se pojaviti novi neidentificirani dijelovi, koji će ga povećati na željenu veličinu.

Uklanjanje dijelova uzorka

Operator delete specificira nedefiniranu vrijednost u komponenti niza, ali ona nastavlja postojati. Ako trebate ukloniti element JavaScript niza tako da se preostali dijelovi premjeste u slobodni prostor, trebate koristiti jednu od ponuđenih metoda niza. Metoda Array.shift() eliminira prvu komponentu, pop() eliminira završnu komponentu, a metoda splice() eliminira jednu ili niz komponenti bilo gdje u nizu.

Višedimenzionalni nizovi

Čini se da smo to malo shvatili, dvodimenzionalni nizovi su ono što trebamo sljedeće razmotriti. Sjećate li se da JavaScript nizovi mogu sadržavati druge elemente kao komponente? Ova karakteristika se koristi za proizvodnju višedimenzionalnih nizova. Da biste posjetili komponente u nizu nizova, jednostavno dvaput koristite uglaste zagrade.

Asocijativni nizovi

Hajde sada da istražimo kako JavaScript zaštitni znak koristi asocijativne nizove. Da bismo to učinili, moramo pogledati teoriju: asocijativni nizovi se ponekad nazivaju hash tablicama. Zahvaljujući njima, umjesto indeksa se koriste nizovi. Upotreba takvih konstrukcija podsjeća na korištenje imena svojstva jednostavnog objekta, ali u ovoj verziji kada se rad izvodi u formatu niza. Budući da JavaScript nema načina za rad sa asocijativnim nizovima, oni se koriste mnogo rjeđe od običnih. Treba napomenuti da oni i dalje mogu biti korisni za pohranjivanje podataka i olakšati pamćenje detalja kojima treba pristupiti.

Izlaz niza

Šta ćemo sada naučiti o JavaScriptu? Prikazivanje niza u dijaloškom okviru (na ekranu monitora), kao i prikaz vrijednosti komponenti niza.

Ako trebate prikazati vrijednosti svih komponenti u programu, onda je zgodno koristiti izraz for. Zanimljivo je da se varijabla brojača pravila for koristi kao indeks komponente niza.

Čišćenje

Da biste filtrirali JavaScript niz, morate resetirati njegovu dužinu na nulu:

• var myArray = ;
• myArray.length = 0.

• clear: function() (;
• this.length = 0;
• vrati ovo;

Dodavanje i uklanjanje komponenti

Pa, hajde da nastavimo sa proučavanjem ovog zanimljivog JavaScript jezika. Element niza može se izbrisati ili dodati na isti način kao i redovna svojstva drugih objekata. Ali postoje neke razlike: dodavanje numeričkih svojstava može promijeniti kvalitet dužine, a izmjena svojstva dužine može eliminirati numeričke kvalitete. U principu, algoritam za postavljanje kvaliteta za nizove je sljedeći:

• Kada se dodaje nepoznato digitalno svojstvo i, ako je dužina jednaka ili manja od i, dužina se definira kao i+1.
• Kada se kvalitet dužine promijeni, izvode se sljedeće radnje: ako je dodijeljena vrijednost manja od nule, tada se baca RangeError. Svi numerički kvaliteti i indeksi koji su jednaki novoj dužini i koji su veći se eliminišu.

Općenito, brisanje elementa JavaScript niza nije teško. Uostalom, čak i kada postavljate dužinu, morate ukloniti "dodatne" komponente iz nje. Ovo dovodi do opcije brisanja niza. Ako iz nekog razloga zadata varijabla praznog novog niza nije zadovoljavajuća, a potrebno je resetirati trenutni, dovoljno je kvalitetu dužine dodijeliti vrijednost nula.

unshift, shift, pop i push metode

Iako se komponente niza mijenjaju ručno, mnogi ljudi preporučuju korištenje ugrađenih metoda za to. Upravo ova nijansa jamči ispravnu vrijednost kvalitete dužine i odsustvo praznina u nizu. Usput, ispravan kvalitet dužine odgovara broju komponenti.

Push metoda pomiče proslijeđene dijelove na kraj niza. Pop metoda vraća prateću komponentu i uklanja je.

Općenito, u Internet Exploreru mlađoj od osme verzije, unshift može vratiti nedefiniranu; u drugim pretraživačima, novu vrijednost dužine. Zato je bolje ne oslanjati se na vrijednost vraćenu iz nesmjene.

Dodavanje i eliminisanje delova u sredini niza

Ako treba da izbrišem JavaScript niz, šta da radim? Poznato je da metoda spajanja ima potpis Array.prototype.splice.

Uklanja deleteCount komponente iz niza, počevši od indikatora početka. Ako je proslijeđeno više od dva argumenta, svi sljedeći argumenti u nizu se stavljaju umjesto eliminisanih. Ako je početak negativan, onda će indeks iz kojeg će se nastaviti povlačenje biti jednak dužini + početak. Niz se vraća iz uklonjenih elemenata.

U stvari, koristeći metodu spajanja, možete ukloniti komponente iz sredine niza ili dodati bilo koji broj komponenti bilo gdje u nizu.

U najjednostavnijoj verziji, ako trebate ukloniti komponentu s indeksom i, trebate zatražiti metodu spajanja iz niza s parametrima i i 1.

U principu, drugi parametar metode spajanja nije obavezan, ali ponašanje funkcije s jednim argumentom je različito u svakom pretraživaču.

Na primjer, u Firefoxu, u najnovijim varijacijama Opera, u Safariju i u Chromeu, svi detalji do kraja niza će biti uklonjeni.

Nijedna komponenta neće biti eliminisana u IE. U prvim varijantama Opera-a nemoguće je predvidjeti ponašanje - jedan dio sa indeksnim startom - 1 će biti uklonjen. Stoga uvijek morate proći najmanje dvije komponente ovoj metodi.

Ključevi

Naravno, prilikom učenja JavaScript-a, treba imati na umu i asocijativne nizove, kao što je ranije spomenuto. Ovo je apstraktna vrsta informacija (sučelje za pohranu podataka), koja vam omogućava da sačuvate parove oblika "(ključ, vrijednost)" i podržavaju operacije dodavanja para, kao i brisanje i traženje para po ključu:

FIND (ključ).

INSERT (vrijednost, ključ).

UKLONI (ključ).

Pretpostavlja se da se dva para sa sličnim ključevima ne mogu pohraniti u asocijativni niz. U paru k + v, v se zove vrijednost pridružena ključu k. Semantika i nazivi gore navedenih operacija mogu biti različiti u različitim implementacijama takvih nizova.

Dakle, akcija FIND (ključ) vraća vrijednost pridruženu datom ključu, ili neki specifični UNDEF objekt koji pokazuje da ne postoji vrijednost pridružena datom ključu. Druge dvije akcije ne vraćaju ništa (osim da li je operacija bila uspješna).

Općenito, sa stanovišta sučelja, prikladno je asocijativni niz smatrati jednostavnim nizom u kojem se kao indeksi mogu koristiti ne samo cijeli brojevi, već i vrijednosti drugih tipova - na primjer, nizovi.

Inače, podrška za takve nizove je dostupna u mnogim programskim jezicima visokog nivoa, kao što su PHP, Perl, Ruby, Python, Tcl, JavaScript i drugi. Za jezike koji nemaju ugrađene alate za rad sa asocijativnim nizovima, stvoren je kolosalan broj implementacija u obliku biblioteka.

Primjer asocijativnog niza je telefonski imenik. U ovoj verziji značenje je kompleks „F. I. O. + adresa”, a ključ je broj telefona. Jedan telefonski broj ima jednog vlasnika, ali jedna osoba može posjedovati više brojeva.

Asocijativna proširenja

Treba napomenuti da najpoznatija proširenja uključuju sljedeće:

• SVAKI - “prođite” kroz sve sačuvane parove.
• CLEAR - ukloniti sve zapise.
• MIN - pronađite par sa najmanjom vrijednošću ključa.
• MAX - pronađite par sa najvećom vrijednošću ključa.

Zadnje dvije opcije zahtijevaju da tipke označavaju radnju poređenja.

Implementacije asocijativnih nizova

Postoji mnogo različitih implementacija asocijativnog niza. Najčešća implementacija može biti zasnovana na jednostavnom nizu čije su komponente parovi (vrijednost, ključ). Da biste ubrzali operacije pretraživanja, možete naručiti komponente ovog niza po ključu i izvršiti pretragu koristeći Ali to će povećati vremenski period potrebno za dodavanje novog para, jer će biti potrebno "razdvojiti" komponente niz kako bi se novi zapis spakovao u praznu ćeliju koja se pojavi.

Najpoznatije implementacije su one zasnovane na različitim stablima pretraživanja. Na primjer, u tipičnom C++ STL čitaču, kontejner mape je implementiran na osnovu stabla crnog mahagonija. Ruby, Tcl, Python stilovi koriste jednu vrstu hash tablice. Postoje i druge implementacije.

Općenito, svaka implementacija ima svoje nedostatke i prednosti. Važno je da se sve tri akcije izvode i u prosjeku iu najgoroj nijansi tokom perioda O(log n), gdje je n trenutni broj parova koji se čuvaju. Za podudarna stabla pretraživanja (uključujući crno-crvena stabla), ovaj uvjet je ispunjen.

Poznato je da implementacije zasnovane na hash tablici imaju prosječno vrijeme od O(1), što je bolje od implementacija zasnovanih na stablu pretraživanja. Naravno, ovo ne garantuje veliku brzinu izvršavanja pojedinačnih operacija: najgore vreme INSERT označeno je sa O(n). INSERT proces traje dugo kada faktor popunjavanja dostigne najvišu tačku i indeks hash tabele treba da se rekonstruiše.

Inače, ove hash liste su loše jer je na njihovoj osnovi nemoguće izvršiti brze dodatne radnje MAX, MIN i algoritam za prelazak svih sačuvanih parova u silaznom ili rastućem redoslijedu ključeva.

• Prevod

Većina aplikacija razvijenih ovih dana zahtijeva interakciju s nekom vrstom skupa podataka. Rukovanje elementima u kolekcijama je uobičajena operacija s kojom ste se vjerovatno susreli. Kada radite, na primjer, s nizovima, možete bez razmišljanja koristiti običnu for petlju, koja izgleda otprilike ovako: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Pretpostavimo da treba da prikažemo listu proizvoda i, ako je potrebno, podelimo je u kategorije, filtriramo, izvršimo pretragu, izmenimo ovu listu ili njene elemente. Možda trebate brzo izvršiti neke kalkulacije koje uključuju elemente liste. Recimo da trebate nešto dodati s nečim, nešto pomnožiti s nečim. Da li je moguće pronaći alate u JavaScript-u koji vam omogućavaju da takve probleme rješavate brže i praktičnije od korištenja obične for petlje?

U stvari, postoje takvi objekti u JavaScriptu. O nekima od njih govori se u materijalu, čiji prijevod danas predstavljamo vašoj pažnji. Konkretno, govorimo o operatoru širenja, petlji for...of i metodama include(), some(), every(), filter(), map() i reduce(). Ovdje ćemo uglavnom govoriti o nizovima, ali tehnike o kojima se ovdje raspravlja općenito su pogodne za rad s drugim vrstama objekata.

Treba napomenuti da pregledi modernih pristupa razvoju JS obično uključuju primjere pripremljene korištenjem funkcija strelica. Možda ih ne koristite često – možda zato što vam se ne sviđaju, možda zato što ne želite da trošite previše vremena učeći nešto novo, ili možda jednostavno nisu pravi za vas. Stoga će ovdje u većini situacija biti prikazane dvije opcije za izvođenje istih radnji: korištenje redovnih funkcija (ES5) i korištenje funkcija strelice (ES6). Za one koji su novi u radu sa funkcijama strelice, funkcije strelice nisu ekvivalent deklaracijama funkcija i funkcijskim izrazima. Ne biste trebali zamijeniti jedno drugim. To je posebno zbog činjenice da se ključna riječ this ponaša drugačije u običnim funkcijama i funkcijama strelice.

1. Operator proširenja

Operator širenja vam omogućava da "proširite" nizove zamjenom njihovih elemenata umjesto nizova na mjestu gdje se koristi ovaj operator. Sličan pristup je predložen za objektne literale.

▍Snage operatora proširenja

• Ovo je jednostavan i brz način da se "izvuku" pojedinačni elementi iz niza.
• Ovaj operator je pogodan za rad sa literalima niza i objekata.
• Ovo je brza i intuitivna metoda rada s argumentima funkcije.
• Operator ekstenzije ne zauzima puno prostora u kodu - izgleda kao tri tačke (...).

▍Primjer

Recimo da imate zadatak da navedete svoje omiljene poslastice bez upotrebe petlje. Koristeći operator ekstenzije ovo se radi na sljedeći način:

2. Petlja za...od

Naredba for…of je dizajnirana da prelazi objekte koji se mogu ponavljati. On daje pristup pojedinačnim elementima takvih objekata (posebno elementima niza), što, na primjer, omogućava njihovo modificiranje. Može se smatrati zamjenom za uobičajenu for petlju.

▍Snage for...of petlje

• Ovo je jednostavan način za dodavanje ili ažuriranje stavki kolekcije.
• Petlja for…of vam omogućava da izvršite različite proračune koristeći elemente (zbrajanje, množenje, itd.).
• Pogodan je za korištenje kada trebate provjeriti bilo koje uvjete.
• Njegova upotreba dovodi do pisanja čistijeg i čitljivijeg koda.

▍Primjer

Recimo da imate strukturu podataka koja opisuje sadržaj alata i želite da prikažete te alate. Evo kako to učiniti koristeći for...of petlju:

3. Metoda include().

Metoda include() koristi se za provjeru prisutnosti određenog elementa u kolekciji, posebno, na primjer, određenog niza u nizu koji sadrži nizove. Ova metoda vraća true ili false u zavisnosti od rezultata testa. Kada ga koristite, vrijedi uzeti u obzir da je osjetljiv na velika i mala slova. Ako, na primjer, kolekcija sadrži string element SCHOOL i uključuje() provjerava njegovo prisustvo pomoću škole nizova, metoda će vratiti false.

▍Snage metode include().

• Metoda include() korisna je u kreiranju jednostavnih mehanizama za pronalaženje podataka.
• Programeru daje intuitivan način da odredi prisustvo određenih podataka u nizu.
• Pogodno je koristiti u uslovnim izrazima za modifikovanje, filtriranje elemenata i izvođenje drugih operacija.
• Njegova upotreba dovodi do poboljšane čitljivosti koda.

▍Primjer

Pretpostavimo da imate garažu, predstavljenu nizom sa listom automobila, a ne znate da li je određeni automobil u ovoj garaži ili ne. Da biste riješili ovaj problem, potrebno je da napišete kod koji vam omogućava da provjerite da li se automobil nalazi u garaži. Koristimo metodu include():

4. some() metoda

Metoda some() vam omogućava da provjerite da li neki od elemenata koje tražite postoje u nizu. Na osnovu rezultata provjere, vraća true ili false . Sličan je gornjoj metodi include(), osim što je njen argument funkcija, a ne, na primjer, običan string.

▍Snage metode some().

• Metoda some() nam omogućava da provjerimo da li niz sadrži barem jedan od elemenata koji nas zanimaju.
• Izvodi test stanja koristeći funkciju koja mu je proslijeđena.
• Ova metoda je pogodna za korištenje.

▍Primjer

Pretpostavimo da ste vlasnik kluba i uopšte vas ne zanima ko tačno dolazi u vaš klub. Međutim, pojedinim posjetiteljima nije dozvoljen ulazak u klub jer su skloni prekomjernoj konzumaciji alkoholnih pića, barem ako se sami zateknu u vašem objektu, a sa njima nema ko da ih pazi. U tom slučaju, grupa posjetitelja može ući u klub samo ako barem jedan od njih ima najmanje 18 godina. Kako bismo automatizirali ovu vrstu provjere, koristit ćemo metodu some(). U nastavku je prikazana njegova primjena u dvije verzije.

ES5

ES6

5. Metoda Every().

Metoda every() ponavlja niz niz i testira svaki element u odnosu na određeni uslov, vraćajući true ako se svi elementi niza podudaraju sa uslovom, i false u suprotnom. Možete vidjeti da je sličan metodi some().

▍ Prednosti metode every().

• Metoda every() vam omogućava da provjerite da li svi elementi niza ispunjavaju uvjet.
• Uvjeti se mogu postaviti pomoću funkcija.
• Promoviše deklarativni pristup programiranju.

▍Primjer

Vratimo se na prethodni primjer. Tamo ste pustili posjetioce mlađe od 18 godina u klub, ali je neko napisao izjavu policiji, nakon čega ste se našli u neprijatnoj situaciji. Nakon što se sve sredilo, zaključili ste da vam sve ovo ne treba i pooštrili ste pravila posjete klubu. Sada grupa posjetitelja može ući u klub samo ako svaki član grupe ima najmanje 18 godina. Kao i prošli put, razmotrit ćemo rješavanje problema u dvije verzije, ali ovaj put ćemo koristiti metodu every().

ES5

ES6

6. filter() metoda

Metoda filter() vam omogućava da kreirate, na osnovu određenog niza, novi niz koji sadrži samo one elemente originalnog niza koji zadovoljavaju dati uslov.

▍Snage metode filter().

• Metoda filter() izbjegava modifikaciju originalnog niza.
• Omogućava vam da se riješite nepotrebnih elemenata.
• Poboljšava čitljivost koda.

▍Primjer

Pretpostavimo da trebate sa liste cijena odabrati samo one koje su veće ili jednake 30. Koristimo metodu filter() da riješimo ovaj problem.

ES5

ES6

7. Metoda Map().

Metoda map() je slična metodi filter() po tome što također vraća novi niz. Međutim, koristi se za modifikaciju elemenata originalnog niza.

▍Snage metode map().

• Metoda map() izbjegava potrebu za promjenom elemenata originalnog niza.
• Može se koristiti za zgodnu modifikaciju elemenata niza.
• Poboljšava čitljivost koda.

▍Primjer

Recimo da imate listu proizvoda sa cijenama. Vašem menadžeru je potrebna nova lista proizvoda čije su cijene snižene za 25%. Koristimo metodu map() da riješimo ovaj problem.

ES5

ES6

8. reducira() metoda

Metoda reduce(), u svom najjednostavnijem obliku, omogućava vam da zbrojite elemente numeričkih nizova. Drugim riječima, svodi niz na jednu vrijednost. To vam omogućava da ga koristite za obavljanje različitih proračuna.

▍Snage metode reduciranja().

• Koristeći metodu reduce(), možete izračunati zbir ili prosjek elemenata niza.
• Ova metoda ubrzava i pojednostavljuje proračune.

▍Primjer

Recimo da trebate izračunati svoje troškove za sedmicu, koji su pohranjeni u nizu. Rešimo ovaj problem pomoću metode reduciranja().

ES5

ES6

Dodaj oznake

• Prevod

• I. Iteracija preko realnih nizova
  1. forEach metoda i srodne metode
  2. za petlju
  3. Pravilna upotreba for...in petlje
  4. for...of petlje (implicitna upotreba iteratora)
  5. Eksplicitna upotreba iteratora
• 1. Korištenje metoda za ponavljanje stvarnih nizova
  2. Pretvorite u pravi niz
  3. Napomena o objektima izvođenja

I. Iteracija preko realnih nizova

Trenutno postoje tri načina za ponavljanje elemenata realnog niza:

1. metoda Array.prototype.forEach ;
2. klasična for petlja
3. "ispravno" konstruisana for...in petlja.

Osim toga, uskoro, s pojavom novog ECMAScript 6 (ES 6) standarda, očekuju se još dvije metode:

1. for...of petlje (implicitna upotreba iteratora);
2. eksplicitna upotreba iteratora.

1. Metoda forEach i povezane metode

Ako je vaš projekat dizajniran da podržava karakteristike standarda ECMAScript 5 (ES5), možete koristiti jednu od njegovih inovacija - metodu forEach.

Primjer upotrebe:
var a = ["a", "b", "c"]; a.forEach(funkcija(unos) (console.log(entry); ));
Općenito, korištenje forEach zahtijeva povezivanje biblioteke emulacije es5-shim za pretraživače koji izvorno ne podržavaju ovu metodu. To uključuje IE 8 i ranije, koji su još uvijek u upotrebi na nekim mjestima.

Prednost forEach-a je u tome što nema potrebe za deklarisanjem lokalnih varijabli za pohranjivanje indeksa i vrijednosti trenutnog elementa niza, budući da se one automatski prosljeđuju funkciji povratnog poziva kao argumenti.

Ako ste zabrinuti zbog mogućih troškova pozivanja povratnog poziva za svaki element, ne brinite i pročitajte ovo.

ForEach je dizajniran za ponavljanje svih elemenata niza, ali pored njega, ES5 nudi još nekoliko korisnih metoda za ponavljanje kroz sve ili neke elemente plus izvođenje nekih radnji na njima:

• every - vraća true ako za svaki element niza povratni poziv vraća vrijednost koja se može pretvoriti u true.
• some - vraća true ako za barem jedan element niza povratni poziv vraća vrijednost koja se može pretvoriti u true.
• filter - kreira novi niz koji uključuje one elemente originalnog niza za koje povratni poziv vraća true .
• map - kreira novi niz koji se sastoji od vrijednosti koje vraća povratni poziv.
• reducira - smanjuje niz na jednu vrijednost, primjenjujući povratni poziv na svaki element niza redom, počevši od prvog (može biti korisno za izračunavanje sume elemenata niza i drugih funkcija sažetka).
• reducira pravo - radi slično reduciranju, ali se ponavlja kroz elemente obrnutim redoslijedom.

2. For petlja

Dobro staro za pravila:

Var a = ["a", "b", "c"]; var indeks; za (indeks = 0; indeks< a.length; ++index) { console.log(a); }
Ako je dužina niza konstantna u cijeloj petlji, a sama petlja pripada dijelu koda koji je kritičan za performanse (što je malo vjerovatno), tada možete koristiti „optimalniju“ verziju za koja pohranjuje dužinu niza :

Var a = ["a", "b", "c"]; var indeks, len; za (indeks = 0, len = a.dužina; indeks< len; ++index) { console.log(a); }
U teoriji, ovaj kod bi trebao raditi malo brže od prethodnog.

Ako redoslijed elemenata nije važan, onda možete ići još dalje u smislu optimizacije i riješiti se varijable za pohranjivanje dužine niza, mijenjajući redoslijed pretraživanja na obrnuti:

Var a = ["a", "b", "c"]; var indeks; za (indeks = a.dužina - 1; indeks >= 0; --index) ( console.log(a); )
Međutim, u modernim JavaScript motorima takve igre optimizacije obično ne znače ništa.

3. Ispravna upotreba for...in petlje

Ako vam se savjetuje da koristite for...in petlju, zapamtite da ponavljanje nizova nije ono za što je namijenjeno. Suprotno uobičajenoj zabludi, for...in petlja se ne ponavlja preko indeksa niza, već radije kroz nabrojiva svojstva objekta.

Međutim, u nekim slučajevima, kao što je iteracija preko rijetkih nizova, for...in može biti korisno, sve dok preduzmete mjere opreza, kao što je prikazano u primjeru ispod:

// a - rijetki niz var a = ; a = "a"; a = "b"; a = "c"; for (var ključ u a) ( if (a.hasOwnProperty(ključ) && /^0$|^\d*$/.test(ključ) && ključ<= 4294967294) { console.log(a); } }
U ovom primjeru, dvije provjere se izvode na svakoj iteraciji petlje:

1. da niz ima svoje vlastito svojstvo zvano ključ (nije naslijeđeno od svog prototipa).
2. taj ključ je niz koji sadrži decimalni prikaz cijelog broja čija je vrijednost manja od 4294967294. Odakle dolazi posljednji broj? Iz definicije indeksa niza u ES5, koja pokazuje da je najviši indeks koji element u nizu može imati: (2^32 - 2) = 4294967294 .

Naravno, takve provjere će oduzimati nepotrebno vrijeme prilikom izvršavanja petlje. Ali u slučaju rijetkog niza, ova metoda je efikasnija od for petlje, jer se u ovom slučaju ponavljaju samo oni elementi koji su eksplicitno definirani u nizu. Dakle, u gornjem primjeru, samo 3 iteracije će biti izvedene (za indekse 0, 10 i 10000) - naspram 10001 u for petlji.

Kako ne biste pisali tako težak kod za provjeru svaki put kada trebate iterirati niz niz, možete ga napisati kao zasebnu funkciju:

Funkcija arrayHasOwnIndex(niz, ključ) (vrati array.hasOwnProperty(ključ) && /^0$|^\d*$/.test(ključ) && ključ<= 4294967294; }
Tada će se tijelo petlje iz primjera značajno smanjiti:

Za (ključ u a) ( if (arrayHasOwnIndex(a, ključ)) ( console.log(a); ) )
Provjera o kojoj se govori gore je univerzalna, pogodna za sve slučajeve. Ali umjesto toga, možete koristiti kraću verziju, iako formalno nije sasvim ispravna, ali je ipak prikladna za većinu slučajeva:

Za (ključ u a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === ključ) ( console.log(a); ) )

4. For...of petlje (implicitna upotreba iteratora)

ES6, koji je još uvijek u statusu nacrta, trebao bi uvesti iteratore u JavaScript.

Iterator je protokol implementiran od strane objekta koji definira standardni način za dobivanje niza vrijednosti (konačnih ili beskonačnih).
Iterator je objekat koji definira next() metodu - funkciju bez argumenata koja vraća objekt s dva svojstva:

1. done (boolean) - tačno ako je iterator stigao do kraja iterativnog niza. Inače je vrijednost lažna.
2. vrijednost - definira vrijednost koju vraća iterator. Može biti nedefinirano (nedostaje) ako je svojstvo done istinito.

Mnogi ugrađeni objekti, uklj. realni nizovi podrazumevano imaju iteratore. Najjednostavniji način za korištenje iteratora na realnim nizovima je korištenje nove for...of konstrukcije.

Primjer korištenja za...od:

Varval; var a = ["a", "b", "c"]; za (val od a) ( console.log(val); )
U gornjem primjeru, for...of petlja implicitno poziva iterator objekta Array da bi dobila svaku vrijednost niza.

5. Eksplicitna upotreba iteratora

Iteratori se takođe mogu eksplicitno koristiti, međutim, u ovom slučaju kod postaje mnogo komplikovaniji u odnosu na for...of petlju. To izgleda otprilike ovako:

Var a = ["a", "b", "c"]; var it = a.entries(); var unos; dok (!(entry = it.next()).done) ( console.log(entry.value); )
U ovom primjeru, metoda Array.prototype.entries vraća iterator koji se koristi za prikaz vrijednosti niza. Na svakoj iteraciji, entry.value sadrži niz oblika [ključ, vrijednost] .

II. Iteracija preko objekata sličnih nizu

Pored realnih nizova, postoje i u JavaScriptu objekti nalik nizu . Ono što im je zajedničko sa stvarnim nizovima je da imaju svojstvo dužine i svojstva nazvana brojevima koji odgovaraju elementima niza. Primjeri uključuju DOM kolekcije NodeList i pseudo-niz argumenata, dostupnih unutar bilo koje funkcije/metode.

1. Upotreba metoda za ponavljanje realnih nizova

U najmanju ruku, većina, ako ne i sve, metode iteracije preko realnih nizova mogu se koristiti za iteraciju preko objekata sličnih nizu.

For i for...in konstrukcije se mogu primijeniti na objekte slične nizu na potpuno isti način kao što se primjenjuju na stvarne nizove.

ForEach i druge metode Array.prototype također se primjenjuju na objekte slične nizu. Da biste to učinili, trebate koristiti Function.call ili Function.apply.

Na primjer, ako želite primijeniti forEach na svojstvo childNodes objekta Node, uradili biste to ovako:

Array.prototype.forEach.call(node.childNodes, function(child) ( // uradi nešto sa podređenim objektom));
Da biste olakšali ponovnu upotrebu ovog trika, možete deklarirati referencu na metodu Array.prototype.forEach u zasebnoj varijabli i koristiti je kao prečicu:

// (Pod pretpostavkom da je sav kod ispod u istom opsegu) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // uradi nešto sa podređenim objektom));
Ako objekt sličan nizu ima iterator, on se može koristiti eksplicitno ili implicitno za iteraciju preko objekta na isti način kao i za stvarne nizove.

2. Pretvorite u pravi niz

Postoji i još jedan, vrlo jednostavan način iteracije preko objekta sličnog nizu: pretvorite ga u pravi niz i koristite bilo koju od metoda o kojima je gore raspravljano za ponavljanje preko realnih nizova. Za konverziju možete koristiti generičku metodu Array.prototype.slice, koja se može primijeniti na bilo koji objekt sličan nizu. To se radi vrlo jednostavno, kao što je prikazano u primjeru ispod:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Na primjer, ako želite konvertirati kolekciju NodeList u stvarni niz, trebat će vam kod otprilike ovako:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Ažuriraj: Kao što je navedeno u komentarima