• Překlad

• I. Iterace přes skutečná pole
• forEach method a souvisejících metod
• pro smyčku
• Správné použití smyčky for...in
• for...of loop (implicitní použití iterátoru)
• Explicitní použití iterátoru
• Použití metod k iteraci přes skutečná pole
• Převést na skutečné pole
• Poznámka k objektům za běhu

I. Iterace přes skutečná pole V tuto chvíli existují tři způsoby, jak iterovat přes prvky reálného pole:

metoda Array.prototype.forEach ;

klasická smyčka for

„správně“ konstruovaná pro...in smyčku.

Kromě toho se brzy, s příchodem nového standardu ECMAScript 6 (ES 6), očekávají další dvě metody:

for...of loop (implicitní použití iterátoru);

explicitní použití iterátoru.

1. Metoda forEach a související metody Pokud je váš projekt navržen tak, aby podporoval funkce standardu ECMAScript 5 (ES5), můžete použít jednu z jeho novinek – metodu forEach.

Příklad použití:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
Obecně platí, že použití forEach vyžaduje připojení knihovny emulace es5-shim pro prohlížeče, které tuto metodu nativně nepodporují. Patří mezi ně IE 8 a starší, které se na některých místech stále používají.

Výhodou forEach je, že není potřeba deklarovat lokální proměnné pro uložení indexu a hodnoty aktuálního prvku pole, protože jsou automaticky předány funkci zpětného volání jako argumenty.

Pokud se obáváte možných nákladů na volání zpětného volání u každého prvku, nebojte se a přečtěte si toto.

ForEach je navržen tak, aby iteroval přes všechny prvky pole, ale kromě toho nabízí ES5 několik dalších užitečných metod pro iteraci všemi nebo některými prvky a provádění některých akcí na nich:

• every - vrátí hodnotu true , pokud pro každý prvek pole vrátí zpětné volání hodnotu , kterou lze převést na hodnotu true .
• some - vrátí hodnotu true, pokud pro alespoň jeden prvek pole vrátí zpětné volání hodnotu, kterou lze převést na hodnotu true.
• filtr - vytvoří nové pole, které obsahuje ty prvky původního pole, pro které zpětné volání vrátí hodnotu true.
• map - vytvoří nové pole sestávající z hodnot vrácených zpětným voláním.
• redukovat - redukuje pole na jednu hodnotu a aplikuje zpětné volání na každý prvek pole, počínaje prvním (může být užitečné pro výpočet součtu prvků pole a další souhrnné funkce).
• snížitVpravo – funguje podobně jako zmenšení, ale iteruje prvky v opačném pořadí.

2. Pro smyčku Staré dobré pro pravidla:

Var a = ["a", "b", "c"]; var index; pro (index = 0; index< a.length; ++index) { console.log(a); }
Pokud je délka pole v celém cyklu konstantní a smyčka samotná patří do sekce kódu kritické pro výkon (což je nepravděpodobné), můžete použít „optimálnější“ verzi, která ukládá délku pole. :

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.délka; index< len; ++index) { console.log(a); }
Teoreticky by tento kód měl běžet o něco rychleji než ten předchozí.

Pokud pořadí prvků není důležité, můžete jít v optimalizaci ještě dále a zbavit se proměnné pro uložení délky pole a změnit pořadí vyhledávání na opačné:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
V moderních JavaScript enginech však takové optimalizační hry obvykle nic neznamenají.

3. Správné použití smyčky for...in Pokud je vám doporučeno používat smyčku for...in, pamatujte, že iterace přes pole není to, k čemu je určena. Na rozdíl od běžné mylné představy smyčka for...in neopakuje indexy pole, ale spíše vyčíslitelné vlastnosti objektu.

Nicméně v některých případech, jako je iterace přes řídká pole, může být for...in užitečné, pokud dodržíte preventivní opatření, jak ukazuje příklad níže:

// a - řídké pole var a = ; a = "a"; a = "b"; a = "c"; for (klíč var v a) ( if (a.hasOwnProperty(klíč) && /^0$|^\d*$/.test(klíč) && klíč 0; ) if(mas.every(isPositiv)) ( dokument. write("Pole obsahuje pouze kladná čísla"); ) else( document.write("Pole obsahuje alespoň jedno záporné číslo "); ) if(mas.some(isPositiv)) ( document.write("Pole obsahuje alespoň by tam bylo jedno kladné číslo"); ) else ( document.write("V poli nejsou žádná kladná čísla"); )

Vezměme si příklad: máme pole s kladnými a zápornými čísly a musíme v něm zkontrolovat přítomnost alespoň jednoho záporného čísla. K tomu používáme všechny a některé metody. Vytvoříme funkci, která bude vracet kladná čísla a poté ji předá metodě every.Protože tato metoda vrací logický výsledek, používá se v podmíněných příkazech. Každá metoda v našem příkladu vrátí hodnotu false, protože v poli jsou záporná čísla, ale metoda some vrátí hodnotu true, protože v poli je alespoň jedno kladné číslo.

snížit/snížitVpravo

Pokud potřebujete iterovat polem, můžete použít forEach, for nebo for..of.

Pokud potřebujete iterovat pole a vrátit data pro každý prvek, použijte map.

Metody arr.reduce a arr.reduceRight jsou podobné metodám výše, ale jsou trochu složitější. Používají se k výpočtu jedné hodnoty na základě celého pole.

Syntax:

Nechat hodnotu = arr.reduce(funkce(předchozíHodnota, položka, index, pole) ( // ... ), );

Funkce se postupně aplikuje na všechny prvky pole a „přenese“ svůj výsledek do dalšího volání.

Argumenty:

• previousValue – výsledek předchozího volání této funkce, rovný počátečnímu při prvním volání (pokud je předáno počáteční),
• item – další prvek pole,
• index – jeho index,
• pole – samotné pole.

Když je funkce volána, výsledek jejího volání na předchozím prvku pole je předán jako první argument.

Zní to složitě, ale bude to jednodušší, pokud si myslíte, že první argument „shromažďuje“ výsledek předchozích volání funkcí. Po dokončení se stane výsledkem snížení.

Tato metoda je nejsnáze pochopitelná, jako vždy, s příkladem.

Zde dostaneme součet všech prvků pole na jediném řádku:

Nechť arr = ; let vysledek = arr.reduce((soucet, proud) => soucet + proud, 0); upozornění (výsledek); // 15

Zde jsme použili nejběžnější možnost snížení, která používá pouze 2 argumenty.

Pojďme se blíže podívat, jak to funguje.

Při prvním spuštění je součet počáteční (poslední argument redukce), což je 0, a proud je prvním prvkem pole, což je 1. Výsledek funkce je tedy 1.

Když podruhé spustíme sum = 1, přidáme k němu druhý prvek pole (2).

Při třetím běhu součet = 3, ke kterému přidáme další prvek atd...

Průběh výpočtu vypadá takto:

Ve formě tabulky, kde každý řádek je voláním funkce na dalším prvku pole:

součet aktuálního výsledku

první hovor		1	1
druhý hovor	1	2	3
třetí výzva	3	3	6
čtvrtá výzva	6	4	10
pátá výzva	10	5	15

Zde můžete jasně vidět, jak je výsledek předchozího volání předán do prvního argumentu následujícího.

Můžeme také vynechat počáteční hodnotu:

Nechť arr = ; // počáteční hodnota je odstraněna (žádná 0 na konci) let result = arr.reduce((součet, proud) => suma + proud); upozornění (výsledek); // 15

Výsledek je úplně stejný! Důvodem je to, že v případě nepřítomnosti počátečního je první prvek pole brán jako 1. hodnota a vyhledávání začíná od druhého.

Výpočtová tabulka bude stejná mínus první řádek.

Takové použití však vyžaduje mimořádnou opatrnost. Pokud je pole prázdné, vyvolání funkce Redukovat bez počáteční hodnoty vyvolá chybu.

Zde je příklad:

Nechť arr = ; // Chyba: Zmenšení prázdného pole bez počáteční hodnoty // pokud by existovala počáteční hodnota, redukce by ji vrátila pro prázdné pole. arr.reduce((součet, proud) => součet + proud);

Výsledek

Abychom to shrnuli, podívali jsme se na různé metody pro práci s poli ve smyčce Všechny tyto metody mají jedno společné, a to, že všechny potřebují předat funkci jako argument.

• forEach – pro procházení pole.
• filtr – pro filtrování pole. Vrátí nové filtrované pole
• každý/někteří – pro kontrolu pole na přítomnost jednotlivých prvků.
• map - pro převod pole na pole. Vrátí původní převedené pole.
• reduction/reduceRight – Vypočítá jednu hodnotu z celého pole, zavolá funkci na každý prvek a předá mezivýsledky mezi voláními. Lze použít k výpočtu součtu prvků pole.

Úkoly Získejte nové pole

Nechte pole var mas = ["HTML", "CSS", "JavaScript", "Pascal"], musíte použít metodu map k získání nového pole, které bude obsahovat délky každého prvku původního pole .

Filtrujte pole

Existuje pole var mas = musíte použít metodu filtru, abyste získali pole, které obsahuje pouze kladná čísla.

Zkontrolujte pole

Existuje pole var mas = musíte zkontrolovat, zda jsou v poli záporná čísla a zobrazit výsledek na obrazovce.

No, na závěr krátké video o metodách pro procházení pole.

Funguje to takto:

// VYŽADUJE ECMASCRIPT 2015+ var s, myStringArray = ["Ahoj", "Svět"]; for (s of myStringArray) ( // ... udělat něco s s ... )

Nebo ještě lépe, protože ECMAScript 2015 také poskytuje proměnné s rozsahem bloků s let a const:

// VYŽADUJE ECMASCRIPT 2015+ const myStringArray = ["Ahoj", "Svět"]; for (const s of myStringArray) ( // ... udělat něco s s ... ) // s zde již není definováno

Poznámka k řídkým polím: pole v JavaScriptu nemusí ve skutečnosti uložit tolik prvků, kolik je uvedeno v jeho délce; toto hlášené číslo je jednoduše o jednu větší než nejvyšší index, pod kterým je hodnota uložena. Pokud pole obsahuje méně prvků, než udává jeho délka, říká se, že je řídké. Například je naprosto legální mít pole s prvky pouze na indexech 3, 12 a 247; Délka takového pole je specifikována jako 248, i když ve skutečnosti ukládá pouze 3 hodnoty. Pokud se pokusíte o přístup k prvku na jakémkoli jiném indexu, pole bude mít nedefinovanou hodnotu. Když tedy chcete pole „iterovat“, máte otázku, kterou je třeba zodpovědět: chcete iterovat v celém rozsahu určeném jeho délkou a zpracovat nedefinovaný pro jakékoli chybějící prvky, nebo chcete zpracovat pouze skutečně přítomné prvky? Existuje mnoho aplikací pro oba přístupy; záleží jen na tom, k čemu pole používáte.

Pokud iterujete pole pomocí for .. of , tělo smyčky se provede podle délky a řídicí proměnná smyčky je nastavena na hodnotu undefined pro všechny prvky, které ve skutečnosti v poli nejsou. V závislosti na podrobnostech vašeho kódu „něco udělat“ může být toto chování to, co chcete, ale pokud to není to, co chcete, měli byste použít jiný přístup.

Některým vývojářům samozřejmě nezbývá, než použít jiný přístup, protože z nějakého důvodu cílí na verzi JavaScriptu, která zatím není podporována pro ... z .

Pokud je vaše implementace JavaScriptu kompatibilní s předchozí verzí specifikace ECMAScript (která například vylučuje verze Internet Exploreru starší než 9), můžete namísto smyčky použít metodu iterátoru Array#forEach. V tomto případě předáte funkci, která bude volána pro každý prvek v poli:

Var myStringArray = [ "Ahoj", "Svět" ]; myStringArray.forEach(funkce(s) ( // ... něco udělat s s ... ));

Na rozdíl od for ... of volá .forEach funkci pouze u prvků, které skutečně obsahují hodnoty. Pokud předáme naše hypotetické pole se třemi prvky a délkou 248, zavolá funkci pouze třikrát, nikoli 248krát. Rozlišuje také mezi chybějícími prvky a prvky, které jsou ve skutečnosti nastaveny na nedefinováno; v druhém případě bude stále volat funkci a jako argument předá nedefinovanou hodnotu. Pokud takto chcete zacházet s řídkými poli, .forEach může být správnou cestou, i když váš překladač podporuje ... z .

Poslední možností, která funguje ve všech verzích JavaScriptu, je explicitní smyčka počtu. Jednoduše napočítáte od 0 do jedné méně než je délka a použijete počítadlo jako index. Hlavní smyčka vypadá takto:

( 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", () =>( for(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; )); )], ["pro..in (pouze 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"", () => ( // Pokud zapomenete zadat "var", tak proměnné"budou globální pro (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; ) )

Před rokem 2014

Myslete logicky.

Podívejte se na tohle

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

• Musíte vytvořit alespoň 2 proměnné (index, délka)
• Je třeba zkontrolovat, zda je indikátor délky menší než
• Index je třeba zvýšit
• smyčka for má 3 parametry

Nyní mi řekněte, proč by to mělo být rychlejší než:

Délka var = pole.délka; while(--length) ( //nebo length-- //dělat věci )

• Jedna proměnná
• Žádné kontroly
• index klesá (stroje to preferují)
• Zatímco má pouze jeden parametr

Byl jsem úplně zmatený, když Chrome 28 ukázal, že smyčka for je rychlejší než čas. Mělo by to být něco jako

"No, všichni používají smyčku for, zaměřme se na to, když pro chrome."

Ale nyní v roce 2014 se smyčka while vrací do chromu. je to 2x rychlejší, v jiných/starých prohlížečích to bylo vždy rychlejší.

V poslední době jsem udělal nějaké nové testy. Nyní ve skutečném světě prostředí jsou tyto krátké kódy bezcenné a jsperf nemůže ve skutečnosti správně spustit smyčku while, protože potřebuje znovu vytvořit array.length, což také vyžaduje čas.

NELZE získat skutečnou rychlost smyčky while na jsperf.

musíte vytvořit svou vlastní funkci a zkontrolovat ji pomocí window.performance.now()

A ano... neexistuje způsob, jak by byla smyčka while rychlejší.

Skutečným problémem je skutečná manipulace / doba přehrávání / doba kreslení nebo jak to chcete nazvat.

Mám například scénu na plátně, kde potřebuji vypočítat souřadnice a srážky... to se děje mezi 10-200 mikrosekundami (ne milisekundami). ve skutečnosti to všechno trvá různé milisekundy. Stejné jako v DOM.

Existuje další super účinný způsob, jak v některých případech použít smyčku... například pro kopírování/klonování pole

For(var i = array.length; i > 0; arrayCopy[ --i ] = array[ i ] // dělání věcí);

Všimněte si prosím nastavení parametrů:

• Stejné jako ve smyčce while. Používám pouze jednu proměnnou
• Musíte zkontrolovat, zda je index větší než 0;
• Jak můžete vidět, tento přístup se liší od obvyklé smyčky, kterou každý používá, protože dělám věci uvnitř 3. parametru a také dekrementuji přímo uvnitř pole.

Prý to potvrzuje, že stroje jako např

napsal, že mě napadlo to trochu zkrátit a odstranit nějaké zbytečné věci, a napsal jsem to stejným stylem:

For(var i = array.length ; i-- ; arrayCopy[ i ] = array[ i ] // dělání věcí);

I když je to kratší, zdá se, že použití i znovu vše zpomalí. Toto je o 1/5 pomalejší než předchozí cyklus for a while.

Poznámka: ; velmi důležité po pro looo bez ()

I když jsem vám právě řekl, že jsperf není nejlepší způsob, jak testovat skripty. Zde jsem přidal 2 smyčky.

A zde je další odpověď o výkonu v javascriptu

Tato odpověď by měla ukázat výkonné způsoby psaní javascriptu. Takže pokud to neumíte číst, zeptejte se a dostanete odpověď nebo si přečtěte knihu o javascriptu http://www.ecma-international.org/ecma-262/5.1/

Poslední revize testu, kterou jsem připravil (opětovným použitím staršího), ukazuje jednu věc.

Délka keše není až tak důležitá, ale nebolí.

Každé první spuštění výše uvedeného testu (na nově otevřené záložce) dává nejlepší výsledky pro poslední 4 fragmenty (3., 5., 7. a 10. v grafech) v Chrome, Opeře a Firefoxu na mém 64bitovém Debian Squeeze ( hardware mého stolního počítače). Následující běhy dávají úplně jiný výsledek.

Výkonové závěry jsou jednoduché:

• Přejděte do cyklu for (vpřed) a místo toho zkontrolujte pomocí !==< .
• Pokud nepotřebujete pole později znovu použít, pak je efektivní také smyčka se zkrácenou délkou a destruktivním polem shift() -ing.

V současné době (2011.10) se níže uvedená šablona jeví jako nejrychlejší.

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

Pamatujte, že ukládání do mezipaměti arr.length zde není kritické, takže můžete pouze otestovat i !== arr.length a nedojde k žádnému zásahu do výkonu, ale získáte kratší kód.

PS: Vím, že ve fragmentu s shift() lze jeho výsledek použít místo přístupu k 0. prvku, ale nějak jsem přehlédl, že po opětovném použití předchozí revize (která měla při cyklech špatnou hodnotu) a Později jsem nechtěl ztratit již dosažené výsledky.

„Nejlepší“ jako v čistém výkonu? nebo výkon A?

Čistý „nejlepší“ výkon je ten, který používá mezipaměť a operátor předpony ++ (moje data: http://jsperf.com/caching-array-length/189)

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

Řekl bych, že smyčka bez mezipaměti je nejlepší rovnováhou mezi dobou provádění a dobou čtení programátorem. Každý programátor začínající v C/C++/Java nestráví ms čtením tohoto

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

** Mezipaměť délky pole uvnitř smyčky, několik sekund času unikne. Závisí na prvcích v poli, pokud je v poli více prvků, je velký rozdíl ohledně času Ms*

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

Pokud je důležité pořadí priorit, použijte tento přístup.

Nechť ii = pole.délka; nechť i = 0; zatímco já< ii) { doSomething(array[i]); ++i; }

Vždy píšu prvním stylem.

I když je kompilátor dostatečně chytrý na to, aby jej optimalizoval pro pole, je stále chytrý, když zde použijeme DOMNodeList nebo nějaký složitý objekt s vypočítanou délkou?

Vím, že otázka se týká polí, ale myslím, že je dobré psát všechny vaše smyčky stejným stylem.

Var arr = ; // Pole var i = 0; zatímco já< arr.length) { // Do something with arr[i] i++; }

i++ je rychlejší než ++i, --i a i -

Článek, ve kterém se podíváme na příklady použití jednotlivých funkcí a metod jQuery.

Knihovna jQuery má 2 různé entity nazývané každá.

První (jQuery.each) je univerzální funkce jQuery, kterou lze použít k iteraci prvků pole nebo objektu.

Druhá (každý) je metoda, která se aplikuje na sadu prvků, aby jimi procházela.

Každá smyčka (jQuery.each). Příklady použití

Syntaxe každé funkce:

// pole nebo objekt - pole nebo objekt, jehož prvky nebo vlastnosti je třeba iterovat // zpětné volání - funkce, která bude provedena pro každý prvek vlastnosti pole nebo objektu $.each(array or object,callback);

Podívejme se na práci s každou funkcí na příkladech.

Příklad č. 1. V něm budeme iterovat všechny prvky pole.

// pole sestávající ze 3 řádků var arr = ["Auto","Nákladní auto","Autobus"]; // iterujme pole arr $.each(arr,function(index,value)( // akce, které budou provedeny pro každý prvek pole // index je aktuální index prvku pole (číslo) // value je hodnota aktuálního prvku pole //vypíše index a hodnotu pole do konzole console.log("Index: " + index + "; Hodnota: " + hodnota); )); /* Výsledek (v konzoli): Index: 0; Hodnota: Car Index: 1; Hodnota: Index nákladního vozidla: 2; Hodnota: Autobus */

Ve výše uvedeném kódu se každá funkce používá k iteraci polem. Funkce má 2 požadované parametry. Prvním parametrem je entita (pole nebo objekt), jejíž prvky (vlastnosti) je třeba iterovat. V tomto případě je to pole arr. Druhým parametrem je funkce zpětného volání, která bude provedena pro každý prvek (v tomto případě) pole. Má 2 parametry, které jsou v něm přístupné prostřednictvím odpovídajících proměnných. Prvním parametrem je sériové číslo prvku (počítáno od 0). Druhým parametrem je hodnota aktuálního prvku pole.

Příklad č. 2. V tomto příkladu budeme iterovat všechny vlastnosti objektu.

// objekt smartphonu s 5 vlastnostmi var smartphone = ( "name": "LG G5 se", "year": "2016", "screen-size": "5.3", "screen-resolution": "2560 x 1440 " , "os" : "Android 6.0 (Marshmallow)"); // iterujte přes objekt smartphonu $.each(smartphone, funkce(klíč, hodnota) ( ​​// akce, které budou provedeny pro každou vlastnost objektu // klíč - aktuální název vlastnosti pole // hodnota - hodnota aktuální vlastnosti objektu // zobrazení názvu vlastnosti a její hodnoty do konzole console.log("Vlastnost: " +klíč + "; Hodnota: " + hodnota); )); /* Výsledek (v konzoli): Vlastnost: jméno; Hodnota: LG G5 se Vlastnost: rok; Hodnota: 2016 Vlastnost: screen-size; Hodnota: 5,3 Vlastnost: rozlišení obrazovky; Hodnota: 2560 x 1440 Vlastnost: os; Hodnota: Android 6.0 (Marshmallow) */

Každou funkci lze použít k iteraci objektů JavaScriptu. Jediný rozdíl v jejím použití je v tom, že parametry funkce zpětného volání mají různý význam. První parametr ukládá název vlastnosti objektu a druhý - hodnotu této vlastnosti.

Příklad č. 3. V něm vyjmenujeme složitější strukturu (podíváme se, jak používat vnořené každý ).

// objekt sestávající ze 2 vlastností. Každá vlastnost tohoto objektu má jako svou hodnotu pole, jehož prvky jsou také objekty var články = ( "Bootstrap": [ ("id":"1", "title":"Úvod"), ("id" :"2" , "title":"Jak nainstalovat"), ("id":"3", "title":"Grid") ], "JavaScript": [ ("id":"4", " title":"Základy "), ("id":"5", "title":"Výběr prvků") ]); $.each(articles,function(key,data) ( console.log("Sekce: " + klíč); $.each(data, function(index,value) (​console.log("Article: id = " + hodnota ["id"] + "; Název = "+ hodnota["název"]); )); )); /* Výsledek: Sekce: Bootstrap Article: id = 1; Název = Úvod Článek: id = 2; Title = Jak nainstalovat článek: id = 3; Název = Sekce mřížky: Článek JavaScript: id = 4; Název = Základní článek: id = 5; Název = Výběr prvků */

Jak přerušit každý (ukončit smyčku)?

Přerušení každé smyčky se provádí pomocí příkazu return, který musí vrátit false .

Přerušme například provádění každé smyčky poté, co najdeme číslo 7 v poli arr:

// pole skládající se z 5 čísel var arr = ; // číslo k nalezení var find = 7; // iterujme pole arr $.each(arr, funkce (index, hodnota) ( ​​ // pokud je požadované číslo nalezeno, pak.. if (hodnota === najít) ( // vytiskne jej do console console.log("Hurá! Číslo " + find + " bylo nalezeno! Toto číslo má index: " + index); // přerušení smyčky návrat false; ) else ( // jinak vytiskne aktuální číslo do konzole console.log("Aktuální číslo: " + hodnota); ) )); /* Výsledek (v konzoli): Aktuální číslo: 5 Aktuální číslo: 4 Hurá! Číslo 7 nalezeno! Toto číslo má index: 2 */

Jak přejít na další iteraci (každé pokračování)?

V každém se přerušení aktuální iterace a přechod na další provede pomocí příkazu return, který musí mít jinou hodnotu než false.

// pole sestávající z čísel var arr = ; // pole, které musí obsahovat všechny prvky pole arr, kromě sudých čísel var newarr = ; // iterujte pole arr $.each(arr, funkce (index, hodnota) ( ​​// pokud je prvek sudý, pak jej přeskočte if (hodnota % 2 === 0) ( // přerušte aktuální iteraci a přejděte k dalšímu return; ) // přidání hodnoty do pole newarr newarr.push(value); )); console.log("Počáteční pole (arr): " + arr.join()); console.log("Výsledné pole (newarr): " + newarr.join()); /* Výsledek (v konzoli): Počáteční pole (arr): 3,5,4,9,17,19,30,35,40 Výsledné pole (newarr): 3,5,9,17,19,35 */

Procházení aktuálních prvků (.každý)

Syntaxe každé metody (platí pouze pro vybrané prvky):

.každý(funkce); // funkce - funkce, která bude provedena pro každý prvek aktuálního objektu

Podívejme se, jak metoda .each funguje na následujícím příkladu (projdeme si prvky div):

// po načtení DOM stránky spusťte $(function())( // iterujte prvky div na stránce $("div").each(function (index, element) ( // index (číslo) - aktuální index iterace (cyklu) / / tato hodnota je číslo // začíná počítat od 0 a končí počtem prvků v aktuální množině mínus 1 // prvek - obsahuje odkaz DOM na aktuální konzoli prvku. log("index prvku Div: " + index + "; id prvku = " + $(prvek).attr("id")); )); )); // Výsledek: // Index prvku div: 0; id prvku = id1 // index prvku div: 1; id prvku = id2 // index prvku div: 2; id prvku = id3

Ve výše uvedeném příkladu používá každá metoda aktuální sadu (prvky vybrané pomocí selektoru $("div")). Obslužná rutina každé metody je vždy funkcí, která bude provedena pro každý prvek aktuální sady (v tomto případě pro každý prvek div). Tato funkce má 2 volitelné parametry. Jeden z nich (index) je sériové číslo aktuální iterace a druhý (prvek) je odkaz DOM na aktuální prvek. Kromě toho je uvnitř funkce dostupné klíčové slovo this, které stejně jako druhý parametr obsahuje odkaz DOM na aktuální prvek.

Uveďme například výstup do konzole hodnotu atributu href pro všechny prvky na stránce:

$("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); ) )); // Pokud jsou na stránce umístěny následující odkazy: // Yandex // Jak funguje JavaScript? // Bootstrap // Poté v konzole uvidíme následující výsledek: // https://www.yandex.ru/ // http://getbootstrap.com/

Podívejme se například na to, jak uspořádat každou smyčku přes prvky DOM, které mají třídu názvu (prozkoumejme všechny prvky stejné třídy).

Raspberry pi s jednou deskou počítejte Intel Galileo Gen2 $19 Pine A64 Plus // pomocí funkce jQuery.each ($.each) $.each($(".name"),function(index,data) ( console.log( "Ordinal číslo: " + index + " ; Obsah: " +$(data).text()); )); // pomocí metody jQuery .each $(".name").each(function(index,data) ( console.log("Ordinal: " + index + " ; Content: " +$(data).text( ) );)); // Obdržíme následující odpověď: // Pořadové číslo: 0 ; Obsah: Raspberry pi // Pořadové číslo: 1 ; Obsah: Intel Galileo Gen2 // Pořadové číslo: 2 ; Obsah: Borovice A64 Plus

Podívejme se například na to, jak iterovat všechny prvky na stránce.

$("*").each(function() ( console.log(this); ));

Zobrazme si například hodnotu všech vstupních prvků na stránce.

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

Pojďme například iterovat všechny podřízené prvky umístěné v ul s id="myList" (každý potomek).

• HTML
• JavaScript

$("ul#myList").children().each(function())( console.log($(this).text()); )); // Výsledek: // HTML // CSS // JavaScript

Podívejme se na způsob, jak určit poslední index (položku) v každé metodě jQuery.

// výběr prvků var myList = $("ul li"); // určení počtu prvků ve výběru var total = myList.length; // iterujte vybrané prvky myList.each(function(index) ( if (index === total - 1) ( // toto je poslední prvek ve výběru ) ));