Javascript prechádzajúci poľom. Všetky spôsoby iterácie cez pole v JavaScripte. pre každú metódu a súvisiace metódy

Článok, v ktorom sa pozrieme na príklady použitia jQuery každej funkcie a metódy.

Knižnica jQuery má 2 rôzne entity nazývané každá.

Prvá (jQuery.each) je univerzálna funkcia jQuery, ktorú možno použiť na iteráciu prvkov poľa alebo objektu.

Druhá (každý) je metóda, ktorá sa aplikuje na množinu prvkov, aby sa cez ne pretočila.

Každá slučka (jQuery.each). Príklady použitia

Syntax každej funkcie:

// pole alebo objekt - pole alebo objekt, ktorého prvky alebo vlastnosti je potrebné opakovať // 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ácu s každou funkciou pomocou príkladov.

Príklad č.1. V ňom budeme iterovať cez všetky prvky poľa.

// pole pozostávajúce z 3 riadkov var arr = ["Auto","Nákladné auto","Autobus"]; // iterujme 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 //výstup indexu a hodnoty poľa do konzoly console.log("Index: " + index + "; Hodnota: " + hodnota); )); /* Výsledok (v konzole): Index: 0; Hodnota: Car 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 dostupné cez zodpovedajúce premenné. Prvým parametrom je sériové číslo prvku (počítané od 0). Druhým parametrom je hodnota aktuálneho prvku poľa.

Príklad č.2. V tomto príklade budeme opakovať 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)" ); // iterujte cez objekt smartfónu $.each(smartphone, function(key, value) ( ​​​​// akcie, ktoré sa vykonajú pre každú vlastnosť objektu // kľúč - aktuálny názov vlastnosti poľa // hodnota - hodnota aktuálnej vlastnosti objektu // zobrazenie názvu vlastnosti a jej hodnoty konzole console.log("Vlastnosť: " +kľúč + "; Hodnota: " + hodnota); )); /* Vysledok (v konzole): Vlastnost: name; Hodnota: LG G5 se Majetok: rok; Hodnota: 2016 Vlastnosť: veľkosť obrazovky; Hodnota: 5,3 Vlastnosť: rozlíšenie obrazovky; Hodnota: 2560 x 1440 Vlastnosť: os; Hodnota: Android 6.0 (Marshmallow) */

Každá funkcia môže byť použitá na iteráciu objektov JavaScriptu. Jediný rozdiel v jeho použití je v tom, že parametre funkcie spätného volania majú rôzny význam. Prvý parameter ukladá názov vlastnosti objektu a druhý - hodnotu tejto vlastnosti.

Príklad č.3. V ňom vymenujeme zložitejšiu štruktúru (pozrime sa, ako použiť vnorené každé ).

// objekt pozostávajúci z 2 vlastností. Každá vlastnosť tohto objektu má ako svoju hodnotu pole, ktorého prvkami sú tiež objekty var články = ( "Bootstrap": [ ("id":"1", "title":"Úvod"), ("id" :"2" , "title":"Ako nainštalovať"), ("id":"3", "title":"Grid") ], "JavaScript": [ ("id":"4", " title":"Základy "), ("id":"5", "title":"Výber prvkov") ]); $.each(články,funkcia(kľúč,údaje) ( console.log("Sekcia: " + kľúč); $.each(údaje, funkcia(index,hodnota) (​console.log("Článok: id = " + hodnota ["id"] + "; Názov = "+ hodnota["názov"]); )); )); /* Výsledok: Sekcia: Bootstrap Článok: id = 1; Title = Úvod Článok: id = 2; Title = Ako nainštalovať článok: id = 3; Názov = Sekcia mriežky: Článok JavaScript: id = 4; Title = Základný článok: id = 5; Meno = Výber prvkov */

Ako prerušiť každý (ukončiť slučku)?

Prerušenie každej slučky sa vykonáva pomocou príkazu return, ktorý musí vrátiť false .

Napríklad, prerušme vykonávanie každej slučky potom, čo nájdeme číslo 7 v poli arr:

// pole pozostávajúce z 5 čísel var arr = ; // číslo na nájdenie var find = 7; // iterujme cez pole arr $.each(arr, funkcia (index, hodnota) ( ​​ // ak sa nájde požadované číslo, potom.. if (hodnota === nájsť) ( // vytlačí sa do console console.log("Hurá! Číslo " + find + " bolo nájdené! Toto číslo má index: " + index); // prerušenie cyklu návrat false; ) else ( // inak vypíše aktuálne číslo do konzoly console.log("Aktuálne číslo: " + hodnota); ) )); /* Výsledok (v konzole): Aktuálne číslo: 5 Aktuálne číslo: 4 Hurá! Číslo 7 nájdené! Toto číslo má index: 2 */

Ako prejsť na ďalšiu iteráciu (každá pokračovanie)?

V každom sa prerušenie aktuálnej iterácie a prechod na ďalšiu vykoná pomocou príkazu return, ktorý musí mať inú hodnotu ako false.

// pole pozostávajúce z čísel var arr = ; // pole, ktoré musí obsahovať všetky prvky poľa arr, okrem párnych čísel var newarr = ; // iterujte cez pole arr $.each(arr, funkcia (index, hodnota) ( ​​// ak je prvok párny, potom ho preskočte, ak (hodnota % 2 === 0) ( // prerušte aktuálnu iteráciu a prejdite na ďalší return; ) // pridajte hodnotu do poľa newarr newarr.push(value); )); console.log("Počiatočné pole (arr): " + arr.join()); console.log("Výsledné pole (newarr): " + newarr.join()); /* Výsledok (v konzole): Počiatočné pole (arr): 3,5,4,9,17,19,30,35,40 Výsledné pole (newarr): 3,5,9,17,19,35 */

Slučovanie cez aktuálne prvky (.každý)

Syntax každej metódy (platí len pre vybrané prvky):

.každý(funkcia); // funkcia - funkcia, ktorá sa vykoná pre každý prvok aktuálneho objektu

Pozrime sa, ako metóda .each funguje pomocou nasledujúceho príkladu (prejdime si cez prvky div):

// po načítaní DOM stránky vykonajte $(function())( // iterujte cez prvky div na stránke $("div").each(function (index, element) ( // index (číslo) - aktuálny index iterácie (cyklu) / / táto hodnota je číslo // začína počítať od 0 a končí počtom prvkov v aktuálnej množine mínus 1 // prvok - obsahuje DOM referenciu na aktuálnu konzolu prvku. log("index prvku Div: " + index + "; id prvku = " + $(prvok).attr("id")); )); )); // Výsledok: // Index prvku div: 0; id prvku = id1 // index prvku div: 1; id prvku = id2 // index prvku div: 2; id prvku = id3

Vo vyššie uvedenom príklade používa každá metóda aktuálnu množinu (prvky vybrané pomocou selektora $("div")). Obslužný program každej metódy je vždy funkcia, ktorá sa vykoná pre každý prvok aktuálnej množiny (v tomto prípade pre každý prvok div). Táto funkcia má 2 voliteľné parametre. Jeden z nich (index) je sériové číslo aktuálnej iterácie a druhý (prvok) je odkaz DOM na aktuálny prvok. Okrem toho je vo funkcii dostupné kľúčové slovo this, ktoré rovnako ako druhý parameter obsahuje odkaz DOM na aktuálny prvok.

Napríklad vypíšme do konzoly 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) || (odkaz .indexOf("https://") == 0)) ( console.log("href odkazy = " + 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 zorganizovať každú slučku nad prvkami DOM, ktoré majú triedu názvu (prejdime si cez všetky prvky tej istej triedy).

Raspberry pi s jednou doskou vypočítajte Intel Galileo Gen2 $19 Pine A64 Plus // pomocou funkcie jQuery.each ($.each) $.each($(.name),function(index,data) ( console.log( "Ordinal číslo: " + index + " ; Obsah: " +$(údaje).text()); )); // pomocou metódy jQuery .each $(".name").each(function(index,data) ( console.log("Ordinal: " + index + " ; Content: " +$(data).text( ) );)); // Dostaneme nasledujúcu odpoveď: // Poradové číslo: 0 ; Obsah: Raspberry pi // Poradové číslo: 1 ; Obsah: Intel Galileo Gen2 // Poradové číslo: 2 ; Obsah: Borovica A64 Plus

Pozrime sa napríklad na to, ako iterovať cez všetky prvky na stránke.

$("*").každý(funkcia() ( console.log(this); ));

Ukážme si napríklad hodnotu všetkých vstupných prvkov na stránke.

$("vstup").each(funkcia() ( console.log($(this).val()); ));

Prejdime napríklad cez všetky podradené prvky umiestnené v ul s id="myList" (každý potomok).

• HTML
• JavaScript

$("ul#myList").deti().každý(funkcia())( console.log($(this).text()); )); // Výsledok: // HTML // CSS // JavaScript

Pozrime sa na spôsob, ako určiť posledný index (položku) v každej metóde jQuery.

// výber prvkov var myList = $("ul li"); // určenie počtu prvkov vo výbere var total = myList.length; // iteruje cez vybrané prvky myList.each(function(index) ( if (index === total - 1) ( // toto je posledný prvok vo výbere ) ));

22 odpovedí

Po vykonaní tohto testu s väčšinou moderných prehliadačov...

Momentálne najrýchlejšia forma slučky (a podľa mňa syntakticky najzrejmejšia).

štandard pre slučku dĺžky medzipamäte

Pre (var i = 0, len = myArray.length; i< len; i++) { }

Povedal by som, že toto je určite prípad, keď tlieskam vývojárom JavaScript engine. Runtime by malo byť optimalizované pre prehľadnosť, nie pre pohodlie.

Od júna 2016 niekoľko testov v najnovšom prehliadači Chrome (71 % trhu prehliadačov v máji 2016 a stále viac):

• Najrýchlejšia slučka je slučka, s dĺžkou vyrovnávacej pamäte aj bez nej, ktorá poskytuje veľmi podobný výkon. (Slučka for s dĺžkou vo vyrovnávacej pamäti niekedy poskytuje lepšie výsledky ako slučka bez vyrovnávacej pamäte, ale rozdiel je takmer zanedbateľný, čo znamená, že motor môže byť optimalizovaný v prospech štandardnej a možno najjednoduchšej slučky bez vyrovnávacej pamäte).
• Cyklus while so znižovaním bol asi 1,5-krát pomalší ako cyklus for.
• Cyklus využívajúci funkciu spätného volania (napr. štandardný forEach) bol asi 10-krát pomalší ako cyklus for.

Domnievam sa, že toto vlákno je príliš staré a programátori majú pocit, že potrebujú uložiť dĺžku do vyrovnávacej pamäte alebo použiť priesečníky so spätným znížením na dosiahnutie lepšieho výkonu, pričom píšu kód, ktorý je menej vyberavý a náchylnejší na chyby než len jednoduchý cyklus for-loop. Preto odporúčam:

Ak vaša aplikácia iteruje cez veľa prvkov alebo sa váš kód slučky nachádza vo funkcii, ktorá sa často používa, odpoveďou je priama slučka:

Pre (var i = 0; i< arr.length; i++) { // Do stuff with arr[i] or i }

Ak vaša aplikácia skutočne neopakuje veľa prvkov alebo len potrebujete sem-tam vykonať malé iterácie, použitie štandardu forEach callback alebo akejkoľvek podobnej funkcie z vašej knižnice JS podľa výberu môže byť čistejšie a menej náchylné na chyby, pretože index rozsah premennej je súkromný a vy Nie je potrebné používať zátvorky, ktoré priamo pristupujú k hodnote poľa:

Arr.forEach(function(value, index) ( // Robiť veci s hodnotou alebo indexom ));

Ak skutočne potrebujete zmiešať niekoľko milisekúnd pri iterácii cez miliardy riadkov a dĺžka poľa sa v procese nezmení, môžete zvážiť uloženie dĺžky do medzipamäte v slučke for. Aj keď si myslím, že v dnešnej dobe to naozaj nie je potrebné:

Pre (var i = 0, len = arr.dĺžka; i< len; i++) { // Do stuff with arr[i] }

Je len rok 2018, takže aktualizácia by mohla byť dobrá...

A naozaj musím nesúhlasiť s prijatou odpoveďou. Závisí to od rôznych prehliadačov. niektoré robia forEach rýchlejšie, niektoré for-loop a niektoré zatiaľ testujú všetky metódy http://jsben.ch/mW36e

Arr.forEach(a => ( // ... )

a keďže môžete vidieť veľa slučiek for(a = 0;...) ako for(a = 0;...), stojí za zmienku, že bez premenných bude „var“ definovaný globálne a to môže mať významný vplyv rýchlosť, takže to bude pomalé.

var arr = arr = new Array(11111111).fill(255); var lavice = [ [ "prázdne", () =>< l; a++); }] , ["for-loop", () =>( for(var a = 0, l = arr.length; a< l; ++a) var b = arr[a] + 1; }] , ["for-loop++", () =>( for(var a = 0, l = arr.length; a< l; a++) var b = arr[a] + 1; }] , ["for-loop - arr.length", () =>(pre(var a = 0; a< arr.length; ++a) var b = arr[a] + 1; }] , ["reverse for-loop", () =>( for(var a = arr.length - 1; a >= 0; --a) var b = arr[a] + 1; )] ,["while-loop", () => ( var a = 0 , l = arr.length; while(a< l) { var b = arr[a] + 1; ++a; } }] , ["reverse-do-while-loop", () =>( var a = arr.length - 1; // POZOR do ( var b = arr[a] + 1; ) while(a--); )] , ["forEach", () => ( arr.forEach( a => ( var b = a + 1; )); )], ["pre..in (iba 3,3%)", () => ( var ar = arr.slice(0,arr.length/33) ; for(const a in ar) ( var b = a + 1; ) )] , ["Duff device", () => ( var i = 0; var r = arr.length % 8; var n = (arr .length - r) / 8; if (r > 0) do ( var b = arr + 1; ) while (--r); if (n > 0) do ( var b = arr[i] + 1; var c = arr + 1; var d = arr + 1; var e = arr + 1; var f = arr + 1; var g = arr + 1; var h = arr + 1; var k = arr + 1; i = --n >>> 3; ) while (n); )] , ["Duff device negative", () => ( var r = arr.length % 8; var n = (arr.length-r) / 8 ; ///Math.floor(arr.length / 8); var i = arr.length ; // -1; while(r)( var b = arr[--i] + 1; --r; ) while (n)( var b = arr[i] + 1; var c = arr + 1; var d = arr + 1; var e = arr + 1; var f = arr + 1; var g = arr + 1; var h = arr + 1; var j = arr + 1; i = --n >>> 3; ) )]]; function bench(title, f) ( var t0 = performance.now(); var res = f(); return performance.now() - t0; // console.log("$(title) trvalo $(t1-t0 ) msec"); ) var globalVarTime = bench("for-loop bez "var"", () => ( // Ak zabudnete zadať "var", tak premenné"budú globálne pre (a = 0, l) =arr.length;a< l; ++a) var b = arr[a] + 1; }); var times = benches.map(function(a) { arr = new Array(11111111).fill(255); return }).sort((a,b) =>a-b); var max = časy; times = times.map(a => (a = (a/max)*100; return a; )); var template = (title, time, n) => "" + "$(title) " + " $(Number(time.toFixed(3)))msec" + ""; var strRes = times.map(t => template(...t)).join("\n") + "

for-loop bez "var" $(globalVarTime) msec."; var $container = document.getElementById("container"); $container.innerHTML = strRes; body ( color:#fff; background:#333; font-family :helvetica; ) body > div > div ( clear:both ) body > div > div > span ( float:left; width:43%; margin:3px 0; text-align:right; ) body > div > div > span :nth-child(2) ( text-align:left; background:darkorange; animation:showup .37s .111s; -webkit-animation:showup .37s .111s; ) @keyframes showup ( from ( width:0; ) ) @-webkit-keyframes showup ( from ( width:0; ) )

2014 Kým predtým

Myslite logicky.

Pozri sa na toto

For(var index = 0 , dĺžka = pole.dĺžka ; index< length ; index++) { //do stuff }

• Musíte vytvoriť aspoň 2 premenné (index, dĺžka)
• Je potrebné skontrolovať, či je indikátor dĺžky menší ako
• Index je potrebné zvýšiť
• cyklus for má 3 parametre

Teraz mi povedzte, prečo by to malo byť rýchlejšie ako:

Dĺžka varu = pole.dĺžka; while(--length) ( //alebo length-- //robiť veci )

• Jedna premenná
• Žiadne kontroly
• index klesá (stroje to uprednostňujú)
• Kým má iba jeden parameter

Bol som úplne zmätený, keď Chrome 28 ukázal, že cyklus for je rýchlejší ako čas. Malo by to byť niečo podobné

"No, každý používa for loop, zamerajme sa na to, keď pre chrome."

Ale teraz v roku 2014 sa slučka while vracia do chrómu. je to 2x rychlejsie, v inych/starych prehliadacoch to bolo vzdy rychlejsie.

V poslednej dobe som robil nejaké nové testy. Teraz v skutočnom svete prostredia sú tieto krátke kódy bezcenné a jsperf nemôže v skutočnosti správne vykonať cyklus while, pretože potrebuje znovu vytvoriť súbor array.length, čo si tiež vyžaduje čas.

NEMÔŽETE získať skutočnú rýchlosť cyklu while na jsperf.

musíte si vytvoriť svoju vlastnú funkciu a skontrolovať ju pomocou window.performance.now()

A áno... neexistuje spôsob, ako byť chvíľková slučka rýchlejšia.

Skutočným problémom je skutočná manipulácia / čas prehrávania / čas kreslenia alebo ako to chcete nazvať.

Napríklad mám scénu na plátne, kde potrebujem vypočítať súradnice a kolízie... to sa robí medzi 10-200 mikrosekúnd (nie milisekúnd). všetko v skutočnosti trvá niekoľko milisekúnd. Rovnako ako v DOM.

V niektorých prípadoch existuje ďalší super efektívny spôsob použitia slučky... napríklad na kopírovanie/klonovanie poľa

For(var i = pole.dĺžka; i > 0; Kopírovanie poľa[ --i ] = pole[ i ] // robenie vecí);

Všimnite si prosím nastavenia parametrov:

• Rovnako ako v slučke while. Používam iba jednu premennú
• Musíte skontrolovať, či je index väčší ako 0;
• Ako môžete vidieť, tento prístup sa líši od bežnej slučky, ktorú každý používa, pretože robím veci v rámci 3. parametra a tiež znižujem priamo v poli.

Hovorí sa, že to potvrdzuje, že stroje ako napr

napísal, že som si myslel, že to skrátim a odstránim nejaké zbytočné veci, a napísal som toto rovnakým štýlom:

For(var i = array.length ; i-- ; arrayCopy[ i ] = array[ i ] // robenie vecí);

Aj keď je to kratšie, zdá sa, že použitie i znova všetko spomalí. Toto je o 1/5 pomalšie ako predchádzajúca slučka for a while.

Poznámka: ; veľmi dôležité po pre looo bez ()

Aj keď som vám práve povedal, že jsperf nie je najlepší spôsob testovania skriptov. Tu som pridal 2 slučky.

A tu je ďalšia odpoveď o výkone v javascripte

Táto odpoveď by mala ukázať výkonné spôsoby písania javascriptu. Takže ak toto neviete prečítať, opýtajte sa a dostanete odpoveď alebo si prečítajte knihu o javascripte http://www.ecma-international.org/ecma-262/5.1/

Najnovšia revízia testu, ktorý som pripravil (opätovným použitím staršieho), ukazuje jednu vec.

Dĺžka cache nie je až taká dôležitá, ale neublíži.

Každé prvé spustenie vyššie uvedeného testu (na novo otvorenej karte) poskytuje najlepšie výsledky pre posledné 4 fragmenty (3., 5., 7. a 10. miesto v grafoch) v prehliadačoch Chrome, Opera a Firefox na mojom 64-bitovom Debian Squeeze ( hardvér môjho počítača). Nasledujúce jazdy dávajú úplne iný výsledok.

Závery týkajúce sa výkonu sú jednoduché:

• Prejdite do cyklu for (dopredu) a namiesto toho skontrolujte pomocou !==< .
• Ak nepotrebujete pole znova použiť neskôr, potom je účinná aj slučka so zníženou dĺžkou a deštruktívnym shift() -ing poľa.

V súčasnosti (2011.10) sa šablóna nižšie javí ako najrýchlejšia.

Pre (var i = 0, len = arr.length; i !== len; i++) ( ... )

Pamätajte, že ukladanie arr.length tu nie je rozhodujúce, takže môžete len otestovať i !== arr.length a nedôjde k žiadnemu zásahu do výkonu, ale získate kratší kód.

PS: Viem, že vo fragmente s shift() je možné použiť jeho výsledok namiesto prístupu k 0-tému prvku, ale nejako som prehliadol, že po opätovnom použití predchádzajúcej revízie (ktorá mala počas cyklov nesprávnu hodnotu) a Neskôr som nechcel stratiť už dosiahnuté výsledky.

„Najlepšie“ ako v čistom výkone? alebo výkon A?

Čistý „najlepší“ výkon je ten, ktorý používa vyrovnávaciu pamäť a operátor prefixu ++ (moje údaje: http://jsperf.com/caching-array-length/189)

Pre (var i = 0, len = myArray.length; i< len; ++i) { // blah blah }

Povedal by som, že slučka bez vyrovnávacej pamäte je najlepšou rovnováhou času vykonávania a času čítania programátora. Každý programátor začínajúci s C/C++/Java nestrávi ms na prečítanie tohto

For(var i=0; i< arr.length; i++){ // blah blah }

** Uchovávajte dĺžku poľa vo vnútri slučky, niekoľko sekúnd času unikne. Závisí od prvkov v poli, ak je v poli viac prvkov, existuje veľký rozdiel, pokiaľ ide o čas Ms*

SArr; //Pole; for(var i = 0 ; i = 0) ( doSomething(pole[i]); )

Ak je dôležité poradie priorít, použite tento prístup.

Nech ii = pole.dĺžka; nech i = 0; kým< ii) { doSomething(array[i]); ++i; }

Vždy píšem prvým štýlom.

Aj keď je kompilátor dostatočne inteligentný na to, aby ho optimalizoval pre polia, je stále inteligentný, ak tu použijeme DOMNodeList alebo nejaký komplexný objekt s vypočítanou dĺžkou?

Viem, že otázka sa týka polí, ale myslím si, že je dobrým zvykom písať všetky vaše slučky rovnakým štýlom.

Var arr = ; // Pole var i = 0; kým< arr.length) { // Do something with arr[i] i++; }

i++ je rýchlejšie ako ++i, --i a i -

Ahoj! V minulej lekcii sme sa pozreli na to, čo sú predmety a prečo sú potrebné a dnes sa pozrieme na to, ako pracovať s vlastnosťami objektu a ako vlastne všetky tieto vlastnosti triediť. Na tieto účely sa používa slučka vlastností for..in (o slučkách si môžete prečítať v JavaScripte).

Slučka pre...vstup

Syntax:

For (zadajte obj) ( /* ... akcie s obj ... */ )

Cyklus for..in bude postupne iterovať cez vlastnosti objektu obj, pričom do kľúča zapíše názov každej vlastnosti.

Deklarovanie premennej v slučke for (kľúč var v obj)

V tejto slučke môžete deklarovať kľúčovú premennú:

Pre (kľúč var v menu1) ( // ... )

Pozrime sa na príklad iterácie cez vlastnosti objektu pomocou cyklu for...in:

Var menu = (šírka: 400, výška: 300, nadpis: "Menu My" ); for (kľúč var v menu) ( // tento kód bude fungovať pre každú vlastnosť objektu // ..a podľa toho zobrazí názov vlastnosti a jej hodnotu alert("Kľúč: " + kľúč + " hodnota: " + ponuka) ;)

Chcel by som upriamiť vašu pozornosť na skutočnosť, že v príklade sme použili menu hranatých zátvoriek. Ak totiž uložíme názov vlastnosti do premennej, potom sa k nej dostaneme len cez hranaté zátvorky, ale nie cez bodku.

Slučka pre...z

K dispozícii je tiež nová slučka na prechádzanie objektmi a poľami. Jeho syntax je veľmi podobná cyklu for...in, ale rozdiely sú v tom, že nevypisuje kľúče alebo indexy poľa, ale jeho hodnoty. Tu je príklad:

Var menu = (šírka: 400, výška: 300, nadpis: "Menu My" ); for (kľúč var ponuky) ( // tento kód bude fungovať pre každú vlastnosť objektu // ..a podľa toho zobrazí hodnotu vlastnosti alert("value: " + kľúč +","); //400, 300, "Moje menu")

Počet vlastností v objekte

Čo ak však potrebujete poznať počet vlastností v objekte? Ako to môžem spraviť?

Bohužiaľ neexistujú žiadne hotové riešenia tohto problému.

Najjednoduchší spôsob je prejsť cez vlastnosti a vypočítať takto:

Var menu = (šírka: 400, výška: 300, nadpis: "Menu My" ); počet var = 0; for (kľúč var v menu) ( count++; ) alert("Celkové vlastnosti: " + počet);

Výsledky

• Na iteráciu vlastností objektu sa používa kľúčová slučka: for (kľúč v obj).

Úlohy Zistite, či je objekt prázdny

Vytvorte funkciu isEmptyObject(obj), ktorá vráti hodnotu true, ak objekt nemá žiadne vlastnosti, a hodnotu false, ak existuje aspoň jedna vlastnosť.

Malo by to fungovať takto:

Function isEmptyObject(obj) ( /* váš kód */ ) var obj = (); alert(isEmptyObject(obj)); // true obj["8:30"] = "vzostup"; alert(isEmptyObject(obj)); // nepravda

Vypočítajte aritmetický priemer všetkých vlastností objektu

Je tam mzdový objekt s platmi. Napíšte kód, ktorý zobrazí aritmetický priemer všetkých platov.
Ak je objekt prázdny, výsledok by mal byť 0.
Napríklad.

Ahoj! Pokračujeme v štúdiu metód poľa a v tejto lekcii sa pozrieme na metódy pre iteráciu poľa. Tieto metódy vám umožňujú prechádzať poľom a vykonávať určité akcie na jeho prvkoch. Áno, zabudol som povedať, že všetky tieto metódy nie sú podporované v IE 8. Aj keď je to teraz také dôležité, že nie sú podporované týmto prehliadačom, ale ak chcete podporu IE8, ES5-shim vám pomôže. A budeme pokračovať

pre každú metódu

Táto metóda sa používa na prechádzanie poľa v slučke, ale môžete jej odovzdať funkciu, v ktorej môžete vykonávať určité akcie s prvkami poľa. Pozrime sa na príklad.

Var mas = ["Banán", "Avokádo", "Mrkva"]; mas.forEach(funkcia(položka, i, mas) ( alert(i + ": " + položka + " (pole: " + mas + ")"); ));

Tu v príklade sa do metódy forEach odovzdá funkcia, ktorá špecifikuje 3 parametre:

item — prvok poľa

i — číslo prvku poľa

mas je pole, ktoré sa spracováva.

Túto metódu možno použiť namiesto cyklu for na iteráciu cez pole.

filtračná metóda

Táto metóda, podobne ako metóda forEach, sa používa na iteráciu cez pole a odovzdá sa jej funkcia ako argument, ale umožňuje filtrovať pole a vráti nové pole, ktoré obsahuje iba tie prvky, pre ktoré funkcia, ktorú odovzdáme tejto metóde vráti hodnotu true.

Je to trochu mätúce, tak sa na to pozrime na príklade.

Var mas = ; var positiveNum = mas.filter(function(num) ( return num > 0; )); document.write(positiveNum); // 1,4,3

V príklade je pole s číslami a potrebujeme získať ďalšie pole, ktoré by obsahovalo iba kladné čísla z pôvodného poľa. Aby sme to dosiahli, aplikujeme na pole metódu filtrovania a zavoláme funkciu, ktorá skontroluje každý prvok, to znamená, že vráti všetky kladné čísla a výsledok sa uloží do iného poľa, v príklade je to positiveNum.

mapová metóda

Metóda map vytvorí ďalšie pole, ktoré bude pozostávať z výsledkov volania funkcie pôvodného poľa, ale v tejto funkcii prebehnú niektoré akcie na prvkoch pôvodného poľa a výsledok sa objaví v novom poli tak, ako je. Pozrime sa na príklad, inak si myslím, že je to úplne nejasné.

Var mas = ; var newMas = mas.map(funkcia(položka) ( návrat položka*položka; )); // získal pole so štvorcami alert(newMas); // 1,4,9

V príklade je počiatočné pole s číslami, je naň aplikovaná metóda map, v ktorej sa každý prvok poľa vynásobí sám sebou a výsledok sa zapíše do iného poľa. V dôsledku toho dostaneme pole so štvorcami čísel v pôvodnom poli.

Metódy každý/niektoré

Tieto metódy kontrolujú, či je prvok prítomný v poli. Robia to prostredníctvom funkcie, ktorá sa im odovzdá ako parameter, to znamená, že ak táto funkcia vráti hodnotu true, potom samotná metóda vráti hodnotu true. Okrem toho, každá metóda vyžaduje, aby každý prvok spĺňal podmienku funkcie, a metóda some vyžaduje, aby sa aspoň jedna zhodovala. A ako vždy, tu je príklad pre vás.

Var mas = ; function isPositiv(num) ( return num > 0; ) if(mas.every(isPositiv)) ( document.write("Pole obsahuje iba kladné čísla"); ) else( document.write("Pole obsahuje aspoň jedno záporné číslo "); ) if(mas.some(isPositiv)) ( document.write("Pole obsahuje aspoň jedno kladné číslo"); ) else ( document.write("V poli nie sú žiadne kladné čísla") ;)

Zoberme si príklad: máme pole s kladnými a zápornými číslami a musíme v ňom skontrolovať prítomnosť aspoň jedného záporného čísla. Aby sme to dosiahli, používame všetky a niektoré metódy. Vytvoríme funkciu, ktorá vráti kladné čísla a potom ju odovzdá metóde every.Keďže táto metóda vracia logický výsledok, používa sa v podmienených príkazoch. Každá metóda v našom príklade vráti hodnotu false, pretože v poli sú záporné čísla, ale metóda some vráti hodnotu true, pretože v poli je aspoň jedno kladné číslo.

znížiť/znížiťSpravo

Ak potrebujete iterovať cez pole, môžete použiť forEach, for alebo for..of.

Ak potrebujete iterovať pole a vrátiť údaje pre každý prvok, použite mapu.

Metódy arr.reduce a arr.reduceRight sú podobné metódam uvedeným vyššie, sú však o niečo zložitejšie. Používajú sa na výpočet jednej hodnoty na základe celého poľa.

Syntax:

Nech hodnota = arr.reduce(function(predchádzajúcaHodnota, položka, index, pole) ( // ... ), );

Funkcia sa postupne aplikuje na všetky prvky poľa a „prenesie“ svoj výsledok do ďalšieho volania.

Argumenty:

• previousValue – výsledok predchádzajúceho volania tejto funkcie, rovná sa iniciále pri prvom volaní (ak je zadané iniciály),
• item – ďalší prvok poľa,
• index – jeho index,
• pole – samotné pole.

Pri volaní funkcie sa ako prvý argument odovzdá výsledok jej volania na predchádzajúci prvok poľa.

Znie to komplikovane, ale bude to jednoduchšie, ak si prvý argument predstavíte ako „akumuláciu“ výsledku predchádzajúcich volaní funkcií. Po dokončení sa stane výsledkom zníženia.

Táto metóda je najjednoduchšie pochopiť, ako vždy, s príkladom.

Tu dostaneme súčet všetkých prvkov poľa v jednom riadku:

Nech arr = ; nech vysledok = arr.reduce((sucet, prud) => sucet + prud, 0); upozornenie (výsledok); // 15

Tu sme použili najbežnejšiu možnosť redukcie, ktorá používa iba 2 argumenty.

Poďme sa bližšie pozrieť, ako to funguje.

Pri prvom spustení je súčet počiatočné (posledný argument zníženia), čo je 0, a prúd je prvým prvkom poľa, čo je 1. Výsledkom funkcie je teda 1.

Keď druhýkrát spustíme sum = 1, pridáme k nemu druhý prvok poľa (2).

Pri treťom chode súčet = 3, ku ktorému pridáme ďalší prvok atď.

Postup výpočtu vyzerá takto:

Vo forme tabuľky, kde každý riadok predstavuje volanie funkcie na ďalšom prvku poľa:

súčet aktuálny výsledok

prvý hovor		1	1
druhý hovor	1	2	3
tretia výzva	3	3	6
štvrtá výzva	6	4	10
piata výzva	10	5	15

Tu môžete jasne vidieť, ako sa výsledok predchádzajúceho hovoru prenesie do prvého argumentu nasledujúceho.

Môžeme tiež vynechať počiatočnú hodnotu:

Nech arr = ; // počiatočná hodnota sa odstráni (na konci nie je 0) nech vysledok = arr.reduce((sucet, prud) => suma + prud); upozornenie (výsledok); // 15

Výsledok je úplne rovnaký! Je to preto, že pri absencii iniciály sa prvý prvok poľa berie ako 1. hodnota a vyhľadávanie začína od druhého.

Výpočtová tabuľka bude rovnaká mínus prvý riadok.

Takéto použitie si však vyžaduje mimoriadnu opatrnosť. Ak je pole prázdne, volanie redukcie bez počiatočnej hodnoty vyvolá chybu.

Tu je príklad:

Nech arr = ; // Chyba: Zmenšenie prázdneho poľa bez počiatočnej hodnoty // ak bola počiatočná hodnota, redukcia by ju vrátila pre prázdne pole. arr.reduce((sucet, prud) => suma + prud);

Výsledky

Aby sme to zhrnuli, pozreli sme sa na rôzne metódy na prácu s poľami v slučke.Všetky tieto metódy majú jednu spoločnú vec, a to, že všetky potrebujú odovzdať funkciu ako argument.

• forEach – pre cyklovanie cez pole.
• filter – na filtrovanie poľa. Vráti nové filtrované pole
• každý/niektoré – na kontrolu poľa na prítomnosť jednotlivých prvkov.
• map - na konverziu poľa na pole. Vráti pôvodné konvertované pole.
• Reduce/reduceRight – Vypočíta jednu hodnotu z celého poľa, zavolá funkciu na každý prvok a medzi volaniami odovzdá medzivýsledok. Môže sa použiť na výpočet súčtu prvkov poľa.

Úlohy Získajte nové pole

Nech je dané pole var mas = ["HTML", "CSS", "JavaScript", "Pascal"], musíte použiť metódu map na získanie nového poľa, ktoré bude obsahovať dĺžky každého prvku pôvodného poľa .

Filtrujte pole

Existuje pole var mas = na získanie poľa, ktoré obsahuje iba kladné čísla, musíte použiť metódu filtrovania.

Skontrolujte pole

Existuje pole var mas = musíte skontrolovať, či sú v poli záporné čísla a zobraziť výsledok na obrazovke.

No, na záver, krátke video o metódach pre slučkovanie cez pole.

• Preklad

• I. Iterácia cez skutočné polia
• pre každú metódu a súvisiace metódy
• pre slučku
• Správne používanie slučky for...in
• for...of loop (implicitné použitie iterátora)
• Explicitné použitie iterátora
• Použitie metód na iteráciu skutočných polí
• Previesť na skutočné pole
• Poznámka k objektom runtime

I. Iterácia cez skutočné polia V súčasnosti existujú tri spôsoby, ako iterovať cez prvky skutočného poľa:

metóda Array.prototype.forEach ;

klasický pre slučku

„správne“ skonštruovaný pre...v slučke.

Okrem toho sa čoskoro s príchodom nového štandardu ECMAScript 6 (ES 6) očakávajú ďalšie dve metódy:

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 funkcie š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(položka) ( console.log(entry); ));
Vo všeobecnosti použitie forEach vyžaduje pripojenie knižnice emulácie es5-shim pre prehliadače, ktoré túto metódu natívne nepodporujú. Patria sem IE 8 a staršie verzie, ktoré sa na niektorých miestach stále používajú.

Výhodou forEach je, že nie je potrebné deklarovať lokálne premenné na uloženie indexu a hodnoty aktuálneho prvku poľa, pretože sa automaticky prenášajú do funkcie spätného volania ako argumenty.

Ak sa obávate možných nákladov na spätné volanie pre každý prvok, nezúfajte a prečítajte si toto.

ForEach je navrhnutý tak, aby iteroval cez všetky prvky poľa, ale okrem toho ponúka ES5 niekoľko ďalších užitočných metód na iteráciu cez všetky alebo niektoré prvky a na vykonávanie niektorých akcií na nich:

• every - vráti hodnotu true , ak pre každý prvok poľa vráti spätné volanie hodnotu , ktorú možno previesť na hodnotu true .
• some - vráti hodnotu true, ak pre aspoň jeden prvok poľa spätné volanie vráti hodnotu, ktorú možno previesť na hodnotu true.
• filter - vytvorí nové pole, ktoré obsahuje tie prvky pôvodného poľa, pre ktoré spätné volanie vráti hodnotu true .
• mapa - vytvorí nové pole pozostávajúce z hodnôt vrátených spätným volaním.
• redukovať – zredukuje pole na jedinú hodnotu, pričom použije spätné volanie na každý prvok poľa, počnúc prvým (môže byť užitočné pri výpočte súčtu prvkov poľa a iných súhrnných funkcií).
• ZníženieVpravo – funguje podobne ako zmenšenie, ale prvky prechádza v opačnom poradí.

2. Pre slučku Staré dobré pravidlá:

Var a = ["a", "b", "c"]; var index; pre (index = 0; index< a.length; ++index) { console.log(a); }
Ak je dĺžka poľa počas cyklu konštantná a samotná slučka patrí do sekcie kódu kritickej pre výkon (čo je nepravdepodobné), potom môžete použiť „optimálnejšiu“ verziu, ktorá ukladá dĺžku poľa. :

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.dĺžka; index< len; ++index) { console.log(a); }
Teoreticky by mal tento kód bežať o niečo rýchlejšie ako predchádzajúci.

Ak poradie prvkov nie je dôležité, môžete ísť ešte ďalej z hľadiska optimalizácie a zbaviť sa premennej na ukladanie dĺžky poľa a zmeniť poradie vyhľadávania na opačnú stranu:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
V moderných JavaScript motoroch však takéto optimalizačné hry zvyčajne nič neznamenajú.

3. Správne používanie slučky for...in Ak vám odporúčame použiť slučku for...in, pamätajte, že iterovanie cez polia nie je to, na čo je určené. Na rozdiel od bežnej mylnej predstavy, cyklus for...in neopakuje indexy poľa, ale skôr vymeniteľné vlastnosti objektu.

V niektorých prípadoch, ako je napríklad iterácia cez riedke polia, môže byť for...in užitočné, ak dodržíte preventívne opatrenia, ako je uvedené v príklade nižšie:

// a - riedke pole var a = ; a = "a"; a = "b"; a = "c"; for (kľúč var v a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && kľúč