Nie je to tak dávno, čo mi to trvalo JavaScript vytvára asociatívne pole... Prekvapivo som ho nikdy predtým nepotreboval. JavaScript... Začal som hľadať na internete, ako to urobiť. A bol som veľmi prekvapený, že veľký počet ľudí píše, že je to nemožné JavaScript to nieje. Našťastie moje dlhoročné skúsenosti mi povedali, že sú to nezmysly. Nakoniec som to teda zistil ako vytvoriť asociatívne pole v JavaScripte, o ktorom vám poviem v tomto článku.
Nasleduje kód, v ktorom vytvorí sa asociatívne pole, potom sa pridá ešte jeden prvok a nakoniec sa pole opakuje v slučke:
V tomto článku sme sa zaoberali vytváranie asociatívnych polí, ich zmena, ako aj úplný výpočet cyklu pre... Osobne som použil asociatívne polia v JavaScripte iba raz, ale je nevyhnutné vedieť o takejto možnosti.
- I. Iterácia nad skutočnými poľami
- Metóda ForEach a súvisiace metódy
- Pre slučku
- Správne použitie slučky for ... in
- For ... of loop (implicitné použitie iterátora)
- Výslovné použitie iterátora
- Použitie metód na iteráciu cez skutočné polia
- Konvertuje sa na skutočné pole
- Poznámka k runtime objektom
I. Iterácia nad skutočnými poľami
Zapnuté tento moment Existujú tri spôsoby, ako iterovať prvky skutočného poľa:- Array.prototype.forEach metóda;
- klasika pre slučku;
- „Dobre tvarovaný“ pre ... slučku.
- for ... of loop (implicitné použitie iterátora);
- explicitné použitie iterátora.
1. Metóda forEach a súvisiace metódy
Ak je váš projekt navrhnutý tak, aby podporoval možnosti štandardu ECMAScript 5 (ES5), môžete použiť jednu z jeho inovácií - metódu forEach.Príklad použitia:
var a = ["a", "b", "c"]; a.forEach (funkcia (záznam) (console.log (záznam);));
Vo všeobecnosti používanie forEach vyžaduje pripojenie emulačnej knižnice es5-shim pre prehliadače, ktoré pre túto metódu nemajú natívnu podporu. Patria sem IE 8 a staršie verzie, ktoré sa používajú dodnes.
Výhodou forEach je, že nie je potrebné deklarovať lokálne premenné na ukladanie indexu a hodnoty aktuálneho prvku poľa, pretože sú automaticky odosielané do funkcie spätného volania ako argumenty.
Ak máte obavy z možných nákladov na spätné volanie pre každú položku, nebojte sa a prečítajte si to.
ForEach je navrhnutý tak, aby iteroval všetky prvky poľa, ale okrem toho ES5 ponúka niekoľko ďalších užitočných metód na iteráciu všetkých alebo niektorých prvkov a navyše s nimi vykonáva niektoré akcie:
- every - vráti hodnotu true, ak pre každý prvok poľa vráti spätné volanie hodnotu, ktorá je prenášaná na hodnotu true.
- some - vráti hodnotu true, ak pre aspoň jeden prvok poľa vráti spätné volanie hodnotu, ktorá je prenášaná na hodnotu true.
- filter - vytvorí nové pole obsahujúce tie prvky pôvodného poľa, pre ktoré spätné volanie vracia hodnotu true.
- mapa - vytvorí nové pole pozostávajúce z hodnôt vrátených spätným volaním.
- zmenšiť - zníži pole na jednu hodnotu, pričom spätné volanie použije postupne na každý prvok poľa, začínajúc prvým (môže byť užitočné pri výpočte súčtu prvkov poľa a ďalších konečných funkcií).
- Redukcia doprava - funguje podobne ako pri redukcii, ale opakuje prvky v opačnom poradí.
2. Slučka for
Staré dobré na pravidlá:Var a = ["a", "b", "c"]; var index; pre (index = 0; index< a.length; ++index) {
console.log(a);
}
Ak sa dĺžka poľa nemení v celej slučke a samotná slučka patrí do kódu, ktorý je kritický z hľadiska výkonu (čo je nepravdepodobné), potom môžete na uloženie dĺžky použiť „optimálnejšiu“ verziu pole:
Var a = ["a", "b", "c"]; var index, len; pre (index = 0, len = dĺžka; index< len; ++index) {
console.log(a);
}
Tento kód by mal teoreticky bežať o niečo rýchlejšie ako predchádzajúci.
Ak poradie iterácie nie je dôležité, potom môžete ísť ešte ďalej, pokiaľ ide o optimalizáciu, a zbaviť sa premennej na ukladanie dĺžky poľa zmenou poradia iterácie na opačnú stranu:
Var a = ["a", "b", "c"]; var index; pre (index = dĺžka -1; index> = 0; --index) (console.log (a);)
V moderných jazykoch JavaScript však tieto optimalizované hry zvyčajne nič neznamenajú.
3. Správne použitie slučky for ... in
Ak vám odporúčame použiť slučku for ... in, nezabudnite, že iterácia cez polia nie je určená. Na rozdiel od bežnej mylnej predstavy, slučka for ... in ne iteruje cez indexy poľa, ale vymenované vlastnosti objektu.V niektorých prípadoch, ako je napríklad iterácia po riedkych poliach, môže byť užitočné ... in, ak urobíte určité opatrenia, ako ukazuje nasledujúci príklad:
// a je riedke pole var a =; a = "a"; a = "b"; a = "c"; for (var key in a) (if (a.hasOwnProperty (key) && /^0$|^\d*$/.test(key) && key<= 4294967294) {
console.log(a);
}
}
V tomto prípade sa pri každej iterácii cyklu vykonajú dve kontroly:
- že pole má svoju vlastnú vlastnosť s názvom key (nie je zdedené z jeho prototypu).
- tento kľúč je reťazec obsahujúci desatinnú notáciu celého čísla, ktorého hodnota je menšia ako 4294967294. Odkiaľ pochádza posledné číslo? Z definície indexu poľa v ES5, ktorá znamená, že najväčší index, ktorý môže prvok v poli mať, je (2 ^ 32 - 2) = 4294967294.
Aby ste nepísali taký ťažkopádny kód kontrol zakaždým, keď potrebujete iterovať pole, môžete ho navrhnúť ako samostatnú funkciu:
Funkcia arrayHasOwnIndex (pole, kľúč) (vrátiť pole.hasOwnProperty (kľúč) && /^0$|^\d*$/.test(key) && kľúč<= 4294967294;
}
Potom sa telo slučky z príkladu výrazne zníži:
Pre (zadajte a) (ak (arrayHasOwnIndex (a, kľúč)) (console.log (a);))
Vyššie uvedený kód kontrol je univerzálny a vhodný pre všetky prípady. Namiesto toho však môžete použiť kratšiu verziu, aj keď formálne nie je úplne správna, ale vo väčšine prípadov je vhodná:
For (key in a) (if (a.hasOwnProperty (key) && String (parseInt (key, 10)) === key) (console.log (a);)))
4. Slučka pre ... z (implicitné použitie iterátora)
ES6, aj keď je stále v stave konceptu, by mal do jazyka JavaScript zavádzať iterátory.Iterátor
je objektovo implementovaný protokol, ktorý definuje štandardný spôsob získavania postupnosti hodnôt (konečných alebo nekonečných).
Iterátor je objekt, v ktorom je definovaná metóda next () - funkcia bez argumentov, ktorá vracia objekt s dvoma vlastnosťami:
- done (boolean) - true, ak iterátor dosiahol koniec iterovanej sekvencie. V opačnom prípade nepravda.
- hodnota - definuje hodnotu vrátenú iterátorom. Môže byť nedefinované (chýba), ak je hodnota vlastnosti true.
Príklad použitia pre ... z:
Var val; var a = ["a", "b", "c"]; pre (val a) (console.log (val);)
Vo vyššie uvedenom príklade slučka for ... of implicitne volá iterátor objektu Array, aby získal každú hodnotu v poli.
5. Výslovné použitie iterátora
Iterátory je možné použiť aj explicitne, v tomto prípade sa však kód stáva oveľa komplikovanejším v porovnaní so slučkou for ... of. Vyzerá to takto:Var a = ["a", "b", "c"]; var it = a.entries (); var vstup; while (! (entry = it.next ()). hotovo) (console.log (entry.value);)
V tomto prípade metóda Array.prototype.entries vracia iterátor, ktorý sa používa na zobrazenie hodnôt poľa. Pri každej iterácii entry.value obsahuje pole vo formáte [kľúč, hodnota].
II. Prechádzka po poli podobných objektom
JavaScript okrem skutočných polí obsahuje aj pole podobné objekty ... Spoločné s reálnymi poliami je to, že majú vlastnosť dĺžka a vlastnosti s názvami vo forme čísel zodpovedajúcich prvkom poľa. Medzi príklady patrí DOM kolekcie NodeList a pseudo-pole argumentov dostupné v rámci akejkoľvek funkcie / metódy.1. Použitie metód iterácie cez skutočné polia
Prinajmenšom väčšinu, ak nie všetky, metódy iterácie cez skutočné polia je možné použiť na iteráciu objektov podobných poľom.Konštrukcie for a for ... v môžu byť aplikované na objekty podobné poliam úplne rovnako ako na skutočné polia.
ForEach a ďalšie metódy Array.prototype platia aj pre objekty podobné poliam. Na to musíte použiť hovor na Function.call alebo Function.apply.
Napríklad, ak chcete podať žiadosť oVšetky na vlastnosť childNodes objektu Node, môžete to urobiť takto:
Array.prototype.forEach.call (node.childNodes, function (child) (// urobte niečo s podradeným objektom));
Na uľahčenie opätovného použitia tejto techniky môžete deklarovať odkaz na metódu Array.prototype.forEach v samostatnej premennej a použiť ju ako skratku:
// (To predpokladá, že všetok nižšie uvedený kód je v rovnakom rozsahu) var forEach = Array.prototype.forEach; // ... forEach.call (node.childNodes, function (child) (// urob niečo s podradeným objektom));
Ak má objekt podobný poľu iterátor, potom ho možno použiť explicitne alebo implicitne na iteráciu objektu rovnakým spôsobom ako pre skutočné polia.
2. Previesť na skutočné pole
Existuje aj ďalší, veľmi jednoduchý spôsob iterácie objektu podobného poľu: konvertujte ho na skutočné pole a použite ktorýkoľvek z vyššie uvedených spôsobov na iteráciu skutočných polí. Na konverziu môžete použiť všeobecnú metódu Array.prototype.slice, ktorú je možné použiť na akýkoľvek objekt podobný poliam. To sa robí veľmi jednoducho, ako ukazuje nasledujúci príklad:Var trueArray = Array.prototype.slice.call (arrayLikeObject, 0);
Napríklad, ak chcete previesť kolekciu NodeList na skutočné pole, potrebujete kód takto:
Var divs = Array.prototype.slice.call (document.querySelectorAll ("div"), 0);
Aktualizácia: Ako je uvedené v komentároch rocku a torbasowa, v ES6 môžete namiesto Array.prototype.slice použiť popisnejšiu metódu Array.from.
3. Poznámka k runtime objektom
Ak na objekty runtime (napr. Kolekcie DOM) použijete metódy Array.prototype, potom by ste mali mať na pamäti, že nie je zaručené, že tieto metódy budú správne fungovať vo všetkých runtime prostrediach (vrátane prehliadačov). Závisí to od správania konkrétneho objektu v konkrétnom runtime, presnejšie od toho, ako je do tohto objektu implementovaná abstraktná operácia HasProperty. Problém je v tom, že samotný štandard ES5 umožňuje možnosť nesprávneho správania sa objektu k tejto operácii (pozri §8.6.2).Preto je dôležité otestovať fungovanie metód Array.prototype v každom runtime (prehliadači), v ktorom plánujete aplikáciu používať.
Článok, v ktorom sa pozrieme na príklady využívajúce funkciu a metódu knižnice jQuery.
V knižnici jQuery sú dve rôzne entity, ktoré sa nazývajú každá.
Prvý (jQuery.each) je generická funkcia jQuery, ktorú je možné použiť na iteráciu prvkov poľa alebo objektu.
Druhý (každý) je metóda, ktorá sa používa na zbierku položiek a prechádza cez ne.
Každá slučka (jQuery.each). Príklady použitia
Syntax pre každú funkciu je:
// pole alebo objekt - pole alebo objekt, ktorého prvky alebo vlastnosti je potrebné iterovať cez // spätné volanie - funkcia, ktorá sa vykoná pre každý prvok vlastnosti poľa alebo objektu $ .each (pole alebo objekt, spätné volanie);
Pozrime sa na príklady, ako pracovať s každou funkciou.
Príklad č. 1. V ňom budeme iterovať všetky prvky poľa (poľa).
// pole 3 riadkov var arr = ["Auto", "Nákladné auto", "Autobus"]; // iterácia cez pole arr $ .each (arr, function (index, value) (// akcie, ktoré sa vykonajú pre každý prvok poľa // index je aktuálny index prvku poľa (číslo) // hodnota je hodnota aktuálneho prvku poľa // vytlačte index a hodnotu poľa na konzolu console.log ("Index:" + index + "; Hodnota:" + hodnota);)); / * Výsledok (v konzole): Index: 0; Hodnota: Auto Index: 1; Hodnota: Index nákladného vozidla: 2; Hodnota: Autobus * /
Vo vyššie uvedenom kóde sa každá funkcia používa na iteráciu cez pole. Funkcia má 2 požadované parametre... Prvým parametrom je entita (pole alebo objekt), ktorej prvky (vlastnosti) je potrebné iterovať. V tomto prípade ide o pole arr. Druhým parametrom je funkcia spätného volania, ktorá sa vykoná pre každý prvok (v tomto prípade) poľa. Má 2 parametre, ktoré sú v ňom k dispozícii prostredníctvom zodpovedajúcich premenných. Prvým parametrom je radové číslo prvku (počítanie sa vykonáva od 0). Druhý parameter je hodnota aktuálneho prvku poľa.
Príklad č. 2. V tomto prípade budeme iterovať všetky vlastnosti objektu.
// objekt smartfónu s 5 vlastnosťami var smartphone = ("name": "LG G5 se", "year": "2016", "screen-size": "5,3", "screen-resolution": "2560 x 1440" , "os": "Android 6.0 (Marshmallow)"); // slučka nad objektom smartfónu $ .each (smartphone, funkcia (kľúč, hodnota) (// akcie, ktoré sa budú vykonávať pre každú vlastnosť objektu // kľúč - aktuálny názov vlastnosti poľa // hodnota - hodnota aktuálnej vlastnosti objektu // zobrazí názov vlastnosti a jej hodnotu na konzole console.log ("Vlastníctvo:" + kľúč + "; Hodnota:" + hodnota);)); / * Výsledok (v konzole): Vlastníctvo: názov; Hodnota: LG G5 se Vlastníctvo: rok; Hodnota: 2016 Vlastníctvo: veľkosť obrazovky; Hodnota: 5,3 Vlastnosť: rozlíšenie obrazovky; Hodnota: 2560 x 1440 Vlastníctvo: os; Hodnota: Android 6.0 (Marshmallow) * / Každú funkciu je možné použiť na iteráciu objektov JavaScript. Rozdiel v jeho použití je iba v tom, že parametre funkcie spätného volania majú rôzne hodnoty. Prvý parameter ukladá názov vlastnosti objektu a druhý ukladá hodnotu tejto vlastnosti.
Príklad č. 3. V ňom budeme iterovať zložitejšiu štruktúru (uvidíme, ako používať vnorené).
// predmet pozostávajúci z 2 vlastností. Každá vlastnosť tohto objektu má ako svoju hodnotu pole, ktorého prvkami sú tiež objekty var articles = ("Bootstrap": [("id": "1", "title": "Úvod"), ("id" : "2", "title": "Ako nainštalovať"), ("id": "3", "title": "Mriežka")], "JavaScript": [("id": "4", " title ":" Základy "), (" id ":" 5 "," title ":" Výber prvkov ")]); $ .each (články, funkcie (kľúč, údaje) (console.log („Sekcia:“ + kľúč); $ .each (údaje, funkcia (index, hodnota)) (console.log („článok: id =“ + hodnota ["id"] + "; Title =" + hodnota ["názov"]);));)); / * Výsledok: Sekcia: Bootstrap Článok: id = 1; Nadpis = Úvod Článok: id = 2; Názov = Ako nainštalovať článok: id = 3; Nadpis = Mriežková sekcia: JavaScript Článok: id = 4; Názov = základy Článok: id = 5; Názov = výber prvkov * /
Ako môžem prerušiť každý (opustiť slučku)?
Každá slučka je prerušená príkazom return, ktorý musí vrátiť hodnotu false.
Prerušíme napríklad vykonanie každej slučky potom, čo v poli arr nájdeme číslo 7:
// pole 5 čísiel var arr =; // číslo, ktoré sa má nájsť var find = 7; // iterácia cez pole arr $ $each (arr, funkcia (index, hodnota) (// ak sa nájde požadované číslo, potom .. if (hodnota === nájsť) (// vytlačte ho na konzolu konzoly. log ("Hurá! Bolo nájdené číslo"+ nájsť+ "! Toto číslo má index:"+ index); // prerušenie vykonávania slučky return false;) else (// inak vytlačte aktuálne číslo na console console.log ("Aktuálne číslo:"+ hodnota);))); / * Výsledok (v konzole): Aktuálne číslo: 5 Aktuálne číslo: 4 Hurá! Našlo sa číslo 7! Toto číslo má index: 2 * /
Ako môžem prejsť na ďalšiu iteráciu (každá pokračovať)?
V každom sa preruší vykonanie aktuálnej iterácie a prechod na nasledujúci sa vykoná pomocou príkazu return, ktorý musí mať inú hodnotu ako false.
// pole čísiel var arr =; // pole, ktoré musí obsahovať všetky prvky poľa arr, s výnimkou párnych čísel var newarr =; // iterácia v poli arr $ $ .each (arr, function (index, value) (// ak je prvok párny, preskočte ho, ak (hodnota% 2 === 0) (// prerušte aktuálnu iteráciu a presuňte sa na ďalší návrat;) // pridanie hodnoty do poľa newarr newarr.push (hodnota);)); console.log ("Pôvodné pole (arr):" + arr.join ()); console.log ("Pole výsledkov (newarr):" + newarr.join ()); / * Výsledok (v konzole): Pôvodné pole (arr): 3,5,4,9,17,19,30,35,40 Výsledkové pole (newarr): 3,5,9,17,19,35 * /
Iterácia nad aktuálnymi položkami (. Každé)
Syntax pre každú metódu (platí iba pre vybrané prvky):
.každá (funkcia); // funkcia - funkcia, ktorá bude vykonaná pre každý prvok aktuálneho objektu Pozrime sa, ako metóda.each funguje, na nasledujúcom príklade (iterácia cez prvky div):
Vo vyššie uvedenom príklade každá metóda používa aktuálnu množinu (položky vybrané voličom $ („div“)). Obslužná rutina každej metódy je vždy funkciou, ktorá sa vykoná pre každý prvok v aktuálnej sade (v tomto prípade pre každý prvok div). Táto funkcia má 2 voliteľné parametre. Jeden z nich (index) je radou aktuálnej iterácie a druhý (prvok) je odkazom DOM na aktuálny prvok. Toto kľúčové slovo je navyše k dispozícii vo funkcii, ktorá, podobne ako druhý parameter, obsahuje odkaz DOM na aktuálny prvok.
Poďme si napríklad do konzoly vytlačiť hodnotu atribútu href pre všetky prvky na stránke:
$ ("a"). each (function () (console.log ($ (this) .attr ("href"));));
$ ("a"). each (function () (var link = $ (this) .attr ("href"); if ((link.indexOf ("http: //") == 0) || (link .indexOf ("https: //") == 0)) (console.log ("link href =" + odkaz);))); // Ak sa na stránke nachádzajú nasledujúce odkazy: // Yandex // Ako funguje JavaScript?// Bootstrap // Potom v konzole uvidíme nasledujúci výsledok: // https://www.yandex.ru/ // http://getbootstrap.com/
Pozrime sa napríklad na to, ako prechádzať každým prvkom DOM, ktorý má názov triedy (zopakujme všetky prvky tej istej triedy).
Pozrime sa napríklad na to, ako iterovať všetky prvky na stránke.
Poďme napríklad vytlačiť hodnotu všetkých vstupných prvkov na stránke.
$ ("vstup"). každý (funkcia () (console.log ($ (this) .val ());));
Opakujme napríklad všetky deti nachádzajúce sa v ul s id = "myList" (každé dieťa).
- Html
- JavaScript
Pozrime sa na spôsob, ako určiť posledný index (prvok) v každej metóde jQuery.
// vyberte položky var myList = $ ("ul li"); // stanovenie počtu prvkov vo výbere var total = myList.length; // iterácia vybraných prvkov myList.each (funkcia (index) (if (index === total - 1) (// toto je posledný prvok vo výbere)));
Definícia a aplikácia
Metóda JavaScript pre každý () vám umožňuje vykonať odovzdanú funkciu raz pre každý prvok v poli vo vzostupnom poradí indexu.
Upozorňujeme, že funkcia spätného volania prešla ako parameter metódy pre každý () nebudú vyzvané pre vymazané alebo chýbajúce prvky poľa.
Rozsah položiek spracovaných touto metódou pre každý () nainštalovaný predtým prvý vyvolaním funkcie spätného volania. Ak boli do poľa pridané prvky po jeho zavolaní, funkcia sa na takýchto prvkoch nebude volať.
Ak sa hodnoty existujúcich prvkov poľa zmenia v čase vykonania, potom hodnota odovzdaná funkcii bude hodnotou v čase, keď metóda pre každý () ich navštevuje. Ak sú položky odstránené pred návštevou, tieto položky nebudú navštívené. Ak prvky, ktoré už boli navštívené, budú odstránené pri prechode poľom, neskoršie prvky budú preskočené.
Podpora prehliadača
| Metóda | Opera | IExplorer | Hrana |
|||
|---|---|---|---|---|---|---|
| pre každý () | Áno | Áno | Áno | Áno | 9.0 | Áno |
Syntax JavaScriptu:
// iba s funkciou spätného volania pole.forEach (funkcia ( súčasná hodnota, index, arr)); // pomocou objektu, na ktorý môže odkazovať toto kľúčové slovo pole.forEach (funkcia ( súčasná hodnota, index, arr), thisValue);Verzia JavaScript
ECMAScript 5.1 (implementovaný v JavaScripte 1.6)Hodnoty parametrov
| Parameter | Popis |
|---|---|
| funkciu | Spustí sa funkcia spätného volania jeden krát pre každý prvok v poli. Funkcia má nasledujúce parametre:
Ak je ako parameter metódy odovzdané niečo, čo nie je funkčným objektom, bude vyvolaná výnimka Zadajte chybu. Požadovaný parameter. |
| thisValue | Objekt, na ktorý môže odkazovať toto kľúčové slovo vo funkcii spätného volania. Ak parameter thisValue sa nepoužije, potom sa ako táto hodnota použije nedefinovaný (v konečnom dôsledku to bude závisieť od bežných pravidiel kontextu vykonávania funkcie). Voliteľný parameter. |
Príklad použitia
V nasledujúcom príklade sa pozrieme na to, ako získať súčet všetkých prvkov poľa pomocou JavaScript metóda pre každý ():
var pole =; var súčet = 0; // inicializácia premennej obsahujúcej číselnú hodnotu pole.pre každý ( // iterácia cez všetky prvky poľa funkcia sumNumber ( súčasná hodnota) { súčet += súčasná hodnota; )); konzola .log ( súčet); // vytlačte hodnotu premennej súčtu rovnajúcu sa 50V nasledujúcom príklade sa pozrieme na používanie druhý argument metódy pre každý () ktorý ukazuje na objekt, na ktorý sa môžeme odvolávať pomocou kľúčové slovo toto vo funkcii spätného volania:
var čísla =; // inicializácia premennej obsahujúcej pole číselných hodnôt var na druhú =; // inicializácia premennej obsahujúcej prázdne pole var myObject = ( // inicializácia premennej obsahujúcej objektštvorec: funkcia ( súčasná hodnota) { // objektová metóda, ktorá má hodnotu vrátiť sa súčasná hodnota * súčasná hodnota; // a vráti ju na druhú } } ; čísla.pre každý ( // iterácia cez všetky prvky poľa čísel funkcia ( súčasná hodnota) { štvorcový.push (toto. štvorec ( súčasná hodnota)); // pridanie návratovej hodnoty štvorcovej metódy myObject do štvorcového poľa } , myObject // objekt, na ktorý odkazujeme, pomocou tohto kľúčového slova); konzola .log ( štvorcový); // vytlač hodnotu štvorcovej premennej rovnajúcu sa;