Javascript áthalad egy tömbön. Minden módja annak, hogy egy tömbön keresztül iteráljon JavaScriptben. Minden módszerhez és a kapcsolódó módszerekhez

Egy cikk, amelyben példákat tekintünk meg a jQuery egyes funkciói és metódusai használatára.

A jQuery könyvtár 2 különböző entitást tartalmaz, melyeket mindegyiknek hívnak.

Az első (jQuery.each) egy univerzális jQuery függvény, amely egy tömb vagy objektum elemei közötti iterációra használható.

A második (mindegyik) egy olyan módszer, amelyet az elemek halmazára alkalmaznak, hogy áthaladjanak rajtuk.

Minden ciklus (jQuery.each). Példák a felhasználásra

Minden függvény szintaxisa:

// tömb vagy objektum - olyan tömb vagy objektum, amelynek elemeit vagy tulajdonságait ismételni kell // visszahívás - egy függvény, amely a tömb vagy objektumtulajdonság minden elemére végrehajtódik $.each(array or object,callback);

Nézzük meg az egyes függvényekkel való munkát példákon keresztül.

1. számú példa. Ebben a tömb összes elemén át fogunk iterálni.

// 3 sorból álló tömb var arr = ["Car","Truck","Bus"]; // iteráljuk végig a tömböt arr $.each(arr,function(index,value)( // a tömb egyes elemeire végrehajtott műveletek // az index a tömb elemének aktuális indexe (szám) // érték az aktuális tömbelem értéke //kiadja a tömb indexét és értékét a konzolba console.log("Index: " + index + "; Érték: " + érték); )); /* Eredmény (konzolban): Index: 0; Érték: Autóindex: 1; Érték: Teherautó Index: 2; Érték: busz */

A fenti kódban az egyes függvények a tömbön való iterációra szolgálnak. A funkciónak 2 kötelező paramétere van. Az első paraméter az az entitás (tömb vagy objektum), amelynek elemeit (tulajdonságait) iterálni kell. Ebben az esetben ez az arr tömb. A második paraméter egy visszahívási függvény, amely a tömb minden elemére (ebben az esetben) kerül végrehajtásra. 2 paramétere van, amelyek a megfelelő változókon keresztül érhetők el benne. Az első paraméter az elem sorozatszáma (0-tól számítva). A második paraméter az aktuális tömbelem értéke.

2. példa. Ebben a példában egy objektum összes tulajdonságát iteráljuk.

// okostelefon objektum 5 tulajdonsággal var smartphone = ( "név": "LG G5 se", "év": "2016", "képernyőméret": "5.3", "képernyőfelbontás": "2560 x 1440" , "os" : "Android 6.0 (Marshmallow)" ); // iterál az okostelefon objektumon $.each(okostelefon, függvény(kulcs, érték) (// az objektum minden tulajdonságára végrehajtott műveletek // kulcs - a tömbtulajdonság aktuális neve // ​​érték - az objektum aktuális tulajdonságának értéke // megjeleníti a tulajdonság nevét és értékét a konzolon console.log("Tulajdonság: " +kulcs + "; Érték: " + érték; )); /* Eredmény (a konzolban): Tulajdonság: név; Érték: LG G5 se Ingatlan: év; Érték: 2016 Tulajdonság: képernyő méretű; Érték: 5,3 Tulajdonság: képernyőfelbontás; Érték: 2560 x 1440 Tulajdonság: os; Érték: Android 6.0 (Marshmallow) */

Az egyes függvények használhatók JavaScript objektumok iterációjára. Az egyetlen különbség a használatában, hogy a visszahívási függvény paraméterei eltérő jelentéssel bírnak. Az első paraméter tárolja az objektum tulajdonságának nevét, a második pedig ennek a tulajdonságnak az értékét.

3. példa. Ebben egy bonyolultabb szerkezetet fogunk felsorolni (nézzük meg, hogyan kell használni a beágyazott mindegyiket).

// 2 tulajdonságból álló objektum. Az objektum minden tulajdonságának értéke egy tömb, amelynek elemei is objektumok var articles = ( "Bootstrap": [ ("id":"1", "title":"Bevezetés"), ("id" :"2" , "title":"Telepítés"), ("id":"3", "title":"Rács") ], "JavaScript": [ ("id":"4", " title":"Alapok "), ("id":"5", "title":"Elemek kiválasztása") ] ); $.each(cikkek,function(kulcs,adatok) ( console.log("Szakasz: " + kulcs); $.each(data, function(index,value) ("console.log("Cikkely: id = " + érték ["id"] + "; Cím = "+ érték["cím"]); )); )); /* Eredmény: szakasz: Bootstrap cikk: id = 1; Cím = Bevezetés Cikk: id = 2; Cím = Hogyan telepítsük Cikk: id = 3; Cím = Rács szakasz: JavaScript cikk: id = 4; Cím = Alapok Cikk: id = 5; Név = elemek kiválasztása */

Hogyan lehet megszakítani mindegyiket (kilépni a hurokból)?

Az egyes ciklusok megszakítása a return utasítással történik, amelynek false -t kell visszaadnia.

Például szakítsuk meg az egyes ciklusok végrehajtását, miután megtaláltuk a 7-es számot az arr tömbben:

// 5 számból álló tömb var arr = ; // keresendő szám var find = 7; // iteráljuk végig a tömböt arr $.each(arr, function (index, value) (// ha a szükséges szám megtalálható, akkor.. if (érték === find) ( // kinyomtatjuk a console console.log("Hurrá! A " + find + " szám megtalálható! Ennek a számnak van egy indexe: " + index); // megszakítja a ciklust return false; ) else ( // egyébként az aktuális számot írja ki a konzolra console.log("Aktuális szám: " + érték); ) )); /* Eredmény (konzolban): Jelenlegi szám: 5 Jelenlegi szám: 4 Hurrá! A 7-es szám megtalálható! Ennek a számnak van indexe: 2 */

Hogyan lehet a következő iterációra lépni (mindegyik folytatódik)?

Mindegyikben az aktuális iteráció megszakítása és a következőre ugrás a return utasítás használatával történik, amelynek értéke nem false.

// számokból álló tömb var arr = ; // egy tömb, amelynek tartalmaznia kell az arr tömb összes elemét, kivéve a páros számokat var newarr = ; // iterálás a tömbön keresztül arr $.each(arr, function (index, value) (// ha az elem páros, akkor kihagyja if (érték % 2 === 0) ( // megszakítja az aktuális iterációt és lépjünk tovább a következőre visszatérés; ) // érték hozzáadása a newarr tömbhöz newarr.push(value); )); console.log("Kezdeti tömb (arr): " + arr.join()); console.log("Eredményként kapott tömb (newarr): " + newarr.join()); /* Eredmény (konzolban): Kezdeti tömb (arr): 3,5,4,9,17,19,30,35,40 Eredmény tömb (newarr): 3,5,9,17,19,35 */

Hurok az aktuális elemeken keresztül (.mindegyik)

Mindegyik metódus szintaxisa (csak a kiválasztott elemekre vonatkozik):

.each(függvény); // függvény - egy függvény, amely az aktuális objektum minden elemére kerül végrehajtásra

Nézzük meg, hogyan működik a .each metódus a következő példa segítségével (ismételjük a div elemeket):

// az oldal DOM-jának betöltése után hajtsa végre a $(function())( // iterálja végig a div elemeket az oldalon $("div").each(function (index, element) ( // index (szám) - az iteráció (ciklus) aktuális indexe / / ez az érték egy szám // 0-tól kezdi a számolást és az aktuális halmaz elemeinek számával végződik mínusz 1 // elem - DOM hivatkozást tartalmaz az aktuális elem konzolra. log("Div elem index: " + index + "; elem azonosítója = " + $(elem).attr("id")); )); )); // Eredmény: // A div elem indexe: 0; elem id = id1 // div elem index: 1; elem id = id2 // div elem index: 2; elem id = id3

A fenti példában mindegyik metódus az aktuális halmazt használja (a $("div") választóval kiválasztott elemeket). Az egyes metóduskezelő mindig egy függvény, amely az aktuális halmaz minden elemére (ebben az esetben minden div elemre) kerül végrehajtásra. Ennek a funkciónak 2 választható paramétere van. Az egyik (index) az aktuális iteráció sorozatszáma, a második (elem) pedig egy DOM hivatkozás az aktuális elemhez. Ezenkívül a függvényen belül elérhető a this kulcsszó, amely a második paraméterhez hasonlóan DOM hivatkozást tartalmaz az aktuális elemre.

Például adjuk ki a konzolnak a href attribútum értékét az oldalon lévő összes elemhez:

$("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("href links = " + link); ) )); // Ha a következő hivatkozások találhatók az oldalon: // Yandex // Hogyan működik a JavaScript? // Bootstrap // Ezután a konzolban a következő eredményt fogjuk látni: // https://www.yandex.ru/ // http://getbootstrap.com/

Például nézzük meg, hogyan lehet minden ciklust az osztály nevű DOM-elemek fölé szervezni (iteráljunk ugyanannak az osztálynak minden elemén).

Raspberry pi egykártyás számítási Intel Galileo Gen2 $19 Pine A64 Plus // a jQuery.each függvény használatával ($.each) $.each($(.name"),function(index,data) ( console.log( "Ordinal szám: " + index + " ; Tartalom: " +$(adatok).szöveg()); )); // a jQuery metódus használatával .each $(.name").each(function(index,data) ( console.log("Ordinális: " + index + " ; Tartalom: " +$(data).text( ) ; )); // A következő választ fogjuk kapni: // Sorszám: 0 ; Tartalom: Raspberry pi // Sorozatszám: 1 ; Tartalom: Intel Galileo Gen2 // Sorozatszám: 2 ; Tartalom: Pine A64 Plus

Nézzük meg például, hogyan lehet végigfutni az oldal összes elemén.

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

Például jelenítsük meg az oldalon található összes bemeneti elem értékét.

$("bemenet").each(function() ( console.log($(this).val()); ));

Például ismételjük meg az ul-ban található összes gyermekelemet az id="myList"-vel (minden gyermek).

• HTML
• JavaScript

$("ul#myList").children().each(function())( console.log($(this).text()); )); // Eredmény: // HTML // CSS // JavaScript

Nézzünk meg egy módot az utolsó index (elem) meghatározására a jQuery minden egyes metódusában.

// elemek kiválasztása var myList = $("ul li"); // a kijelölés elemeinek számának meghatározása var total = myList.length; // iterálás a kijelölt elemeken keresztül myList.each(function(index) ( if (index === total - 1) ( // ez az utolsó elem a kijelölésben ) ));

22 válasz

A teszt futtatása után a legtöbb modern böngészővel...

Jelenleg a ciklus leggyorsabb formája (és véleményem szerint szintaktikailag a legkézenfekvőbb).

szabvány hosszúságú gyorsítótárazott hurokhoz

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

Azt mondanám, hogy ez egy olyan eset, amikor üdvözlöm a JavaScript motor fejlesztőit. A futásidőt az átláthatóság, nem pedig a kényelem érdekében kell optimalizálni.

2016 júniusáig számos teszt a legújabb Chrome-ban (2016 májusában a böngészőpiac 71%-a, és növekszik):

• A leggyorsabb hurok a hurokhurok, gyorsítótár-hosszúsággal és anélkül is, amely nagyon hasonló teljesítményt nyújt. (A gyorsítótárazott hosszúságú for ciklus néha jobb eredményeket produkál, mint a nem gyorsítótárazott, de a különbség szinte elhanyagolható, ami azt jelenti, hogy a motor optimalizálható a szabványos és talán a legegyszerűbb gyorsítótár nélküli ciklus javára).
• A csökkentésekkel rendelkező while ciklus körülbelül 1,5-szer lassabb volt, mint a for ciklus.
• A visszahívási funkciót használó hurok (pl. standard forEach) körülbelül 10-szer lassabb volt, mint a for hurok.

Úgy gondolom, hogy ez a szál túl régi, és a programozók úgy érzik, hogy gyorsítótárba kell helyezniük a hosszt, vagy visszacsökkentő metszéspontokat kell használniuk a jobb teljesítmény elérése érdekében, olyan kódot írva, amely kevésbé válogatós és hibásabb, mint egy egyszerű for-loop. Ezért javaslom:

Ha az alkalmazás sok elemen keresztül iterál, vagy a cikluskód egy gyakran használt függvényen belül van, egy egyenes ciklus a válasz:

For (i változó = 0; i< arr.length; i++) { // Do stuff with arr[i] or i }

Ha az alkalmazás nem igazán iterál sok elemet, vagy csak kis iterációkat kell végrehajtania itt-ott, a szabványos forEach visszahívás vagy bármely hasonló funkció használata a választott JS-könyvtárból tisztább és kevésbé hibás, mivel az index A változó hatóköre privát, és Ön Nincs szükség zárójelek használatára, amelyek közvetlenül hozzáférnek a tömb értékéhez:

Arr.forEach(függvény(érték, index) ( // Dolgozzon értékkel vagy indexszel ));

Ha valóban szüksége van néhány ezredmásodpercre, miközben sorok milliárdjain át iterál, és a tömb hossza nem változik a folyamat során, fontolja meg a hossz gyorsítótárba helyezését egy for ciklusban. Bár szerintem erre manapság már tényleg nincs szükség:

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

Még csak 2018 van, szóval jó lehet egy frissítés...

És tényleg nem értek egyet az elfogadott válasszal. Különböző böngészőktől függ. van, amelyik a forEach-et gyorsabban, mások a for-loop-ot, míg mások az összes módszert tesztelik http://jsben.ch/mW36e

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

és mivel sok for(a = 0;...) ciklust láthat, például for(a = 0;...), érdemes megemlíteni, hogy változók nélkül a "var" globálisan lesz definiálva, és ennek jelentős hatása lehet sebesség, tehát lassú lesz.

var arr = arr = new Tömb(11111111).fill(255); var benches = [ [ "üres", () =>< 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", () =>( 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; // FIGYELEM do ( var b = arr[a] + 1; ) while(a--); )] , ["forEach", () => ( arr.forEach( a => ( var b = a + 1; )); )], ["for..in (csak 3,3%)", () => ( var ar = arr.slice(0,arr.length/33) ; for(const a in ar) ( var b = a + 1; ) )] , ["Duff eszköz", () => ( 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 eszköz negatív", () => ( 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) $(t1-t0) ) msec"); ) var globalVarTime = bench("for-loop "var" nélkül", () => ( // Ha elfelejtette beírni a "var" szót, akkor a változók globálisak lesznek for(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 = idők; times = times.map(a => (a = (a/max)*100; return a; )); var template = (cím, idő, n) => "" + "$(cím) " + " $(Szám(idő.Fixed(3)))msec" + ""; var strRes = times.map(t => template(...t)).join("\n") + "

for-loop "var" nélkül $(globalVarTime) msec."; var $container = document.getElementById("container"); $container.innerHTML = strRes; body ( color:#fff; háttér:#333; font-family :helvetica; ) body > div > div ( clear:ther ) body > div > div > span ( float:left; szélesség:43%; margó:3px 0; text-align:right; ) body > div > div > span :nth-child(2) ( text-align:left; background: darkkorange; animation:showup .37s .111s; -webkit-animation:showup .37s .111s; ) @keyframes showup ( from ( szélesség:0; ) ) @-webkit-keyframes megjelenítése ( from ( szélesség:0; ) )

2014 Régen

Gondolkozz logikusan.

Ezt nézd

For(változó index = 0 , hossz = tömb.hossz ; index< length ; index++) { //do stuff }

• Legalább 2 változót kell létrehoznia (index, hossz)
• Ellenőrizze, hogy a hosszjelző kisebb-e, mint
• Az indexet növelni kell
• a for ciklusnak 3 paramétere van

Most pedig mondd el, miért lenne gyorsabb, mint:

Változó hossza = array.length; while(--length) ( //vagy hossz-- //do stuff )

• Egy változó
• Nincs ellenőrzés
• csökken az index (a gépek ezt preferálják)
• Míg csak egy paramétere van

Teljesen összezavarodtam, amikor a Chrome 28 megmutatta, hogy a for ciklus gyorsabb, mint az idő. Valami ilyesminek kellene lennie

"Nos, mindenki for ciklust használ, a krómnál koncentráljunk erre."

De most 2014-ben a while ciklus visszatér a krómhoz. 2x gyorsabb, más/régi böngészőkben mindig gyorsabb volt.

Mostanában csináltam néhány új tesztet. A valós envoirement világban ezek a rövid kódok értéktelenek, és a jsperf valójában nem tudja megfelelően végrehajtani a while ciklust, mert újra kell létrehoznia az array.length fájlt, ami szintén időbe telik.

NEM LEHET lekérni a while ciklus tényleges sebességét a jsperf-en.

létre kell hoznia saját függvényét, és ellenőriznie kell, hogy a window.performance.now()

És igen... egy darabig nincs mód arra, hogy gyorsabb legyen.

Az igazi probléma a tényleges manipuláció/lejátszási idő/rajzolási idő, vagy aminek nevezzük.

Például van egy vászonjelenetem, ahol koordinátákat és ütközéseket kell számolnom... ez 10-200 MicroSeconds (nem ezredmásodperc) között történik. valójában minden ezredmásodpercbe telik. Ugyanaz, mint a DOM-ban.

Van egy másik szuper hatékony módja a ciklus használatának bizonyos esetekben... például egy tömb másolására/klónozására

For(var i = array.length; i > 0; arrayCopy[ --i ] = array[ i ] // dolgok elvégzése);

Kérjük, vegye figyelembe a paraméter beállításokat:

• Ugyanaz, mint a while ciklusban. Csak egy változót használok
• Ellenőriznie kell, hogy az index nagyobb-e 0-nál;
• Mint látható, ez a megközelítés eltér a mindenki által használt szokásos ciklustól, mivel én a 3. paraméteren belül csinálok dolgokat, és közvetlenül a tömbön belül is csökkentem.

Állítólag ez megerősíti, hogy az olyan gépek, mint pl

azt írta, hogy gondoltam lerövidítem egy kicsit és eltávolítok néhány haszontalan dolgot, és ezt írtam ugyanabban a stílusban:

For(var i = array.length ; i-- ; arrayCopy[ i ] = array[ i ] // dolgok elvégzése);

Még ha rövidebb is, úgy tűnik, hogy az i ismételt használata mindent lelassít. Ez 1/5-tel lassabb, mint az előző for és while ciklus.

Jegyzet: ; nagyon fontos for looo nélkül ()

Még akkor is, ha az imént mondtam, hogy a jsperf nem a legjobb módja a szkriptek tesztelésének. 2 hurkot adtam ide.

És itt van egy másik válasz a javascript teljesítményéről

Ennek a válasznak meg kell mutatnia a javascript írásának hatékony módjait. Tehát ha ezt nem tudja elolvasni, kérdezzen és kap választ, vagy olvasson el egy könyvet a javascriptről http://www.ecma-international.org/ecma-262/5.1/

Az általam készített teszt legújabb verziója (egy régebbi teszt újrafelhasználásával) egy dolgot mutat.

A gyorsítótár hossza nem olyan fontos, de nem árt.

A fent hivatkozott teszt minden első futtatása (az újonnan megnyitott lapon) a legjobb eredményt adja az utolsó 4 töredékre (3., 5., 7. és 10. a diagramokon) Chrome-ban, Opera-ban és Firefoxban a 64 bites Debian Squeeze-emen ( az asztali hardverem). A későbbi futtatások egészen más eredményt adnak.

A teljesítményre vonatkozó következtetések egyszerűek:

• Lépjen egy for ciklusba (előre), és ellenőrizze helyette a !==-t< .
• Ha nem kell később újra felhasználni a tömböt, akkor a csökkentett hosszúságú ciklus és a destruktív array shift() -ing is hatásos.

Jelenleg (2011.10) az alábbi sablon tűnik a leggyorsabbnak.

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

Ne feledje, hogy az arr.length gyorsítótárazás itt nem kritikus, ezért csak tesztelheti az i !== arr.length értéket, és nem lesz teljesítményhiány, de rövidebb kódot kap.

PS: Tudom, hogy a shift()-es töredékben az eredménye használható a 0. elem elérése helyett, de valahogy figyelmen kívül hagytam, hogy az előző revízió újrafelhasználása után (amelynek a ciklusok során rossz értéke volt), és később nem akartam elveszíteni a már elért eredményeket.

„Legjobb”, mint a tiszta teljesítményben? vagy teljesítmény ÉS?

A tiszta "legjobb" teljesítmény az, amely a gyorsítótárat és a ++ előtag operátort használja (adataim: http://jsperf.com/caching-array-length/189)

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

Azt mondanám, hogy a gyorsítótár nélküli ciklus a legjobb egyensúly a végrehajtási idő és a programozói olvasási idő között. Minden C/C++/Java-val kezdődő programozó nem költ ms-t ennek elolvasására

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

** gyorsítótárazza a tömb hosszát a cikluson belül, néhány másodpercnyi idő elcsúszik. A tömb elemeitől függ, ha több elem van a tömbben, akkor nagy különbség van az Ms idő tekintetében*

SArr; //Sor; for(i változó = 0; i = 0) ( doSomething(tömb[i]); )

Ha fontos a prioritási sorrend, használja ezt a megközelítést.

Legyen ii = array.length; legyen i = 0; miközben én< ii) { doSomething(array[i]); ++i; }

Mindig az első stílusban írok.

Még akkor is, ha a fordító elég okos ahhoz, hogy tömbökre optimalizálja, de akkor is okos, ha itt a DOMNodeList-et használjuk, vagy valami összetett objektumot kiszámított hosszúsággal?

Tudom, hogy a kérdés a tömbökre vonatkozik, de szerintem jó gyakorlat, ha minden ciklusodat ugyanabban a stílusban írod.

Var arr = ; // A tömb var i = 0; miközben én< arr.length) { // Do something with arr[i] i++; }

Az i++ gyorsabb, mint az ++i, --i és i -

Helló! Az utolsó leckében megvizsgáltuk, mik azok az objektumok, és miért van szükség rájuk, ma pedig azt nézzük meg, hogyan dolgozhatunk egy objektum tulajdonságaival, és hogyan lehet ténylegesen válogatni ezeken a tulajdonságokon. Erre a célra egy for..in tulajdonsághurkot használnak (a JavaScript ciklusairól olvashat).

Hurok befelé

Szintaxis:

For (kulcsolja be az obj-t) ( /* ... műveletek obj-val ... */ )

A for..in ciklus szekvenciálisan iterálja az obj objektum tulajdonságait, és minden tulajdonság nevét beírja a kulcsba.

Változó deklarálása a for ciklusban (var kulcs az obj-ban)

Ebben a ciklusban deklarálhatja a kulcsváltozót:

For (var key in menu1) ( // ... )

Nézzünk egy példát egy objektum tulajdonságain keresztüli iterációra a for...in ciklus használatával:

Var menü = (szélesség: 400, magasság: 300, cím: "Menü Saját" ); for (var key in menu) ( // ez a kód az objektum minden tulajdonságához fog működni // ..és ennek megfelelően megjeleníti a tulajdonság nevét és értékét alert("Key: " + key + " value: " + menu) ;)

Szeretném felhívni a figyelmet arra, hogy a példában szögletes zárójeles menüt használtunk. Ez azért van így, mert ha egy tulajdonság nevét egy változóban tároljuk, akkor azt csak szögletes zárójelben tudjuk elérni, ponton keresztül nem.

Loop for… of

Van egy új hurok is az objektumok és tömbök bejárására. Szintaxisa nagyon hasonlít a for...in ciklushoz, de a különbségek abban vannak, hogy nem a tömb kulcsait vagy indexeit adja ki, hanem az értékeit. Íme egy példa:

Var menü = (szélesség: 400, magasság: 300, cím: "Menü Saját" ); for (menü var kulcsa) ( // ez a kód az objektum minden tulajdonságához fog működni // ..és ennek megfelelően megjeleníti a tulajdonság értékét alert("value: " + key +","); //400, 300, "Menü Saját")

Tulajdonságok száma egy objektumban

De mi van akkor, ha tudnia kell egy objektum tulajdonságainak számát? Hogyan tudom ezt megtenni?

Sajnos erre a problémára nincsenek kész megoldások.

A legegyszerűbb módja az, hogy végigpörgeti a tulajdonságokat, és kiszámítja a következőképpen:

Var menü = (szélesség: 400, magasság: 300, cím: "Menü Saját" ); var count = 0; for (var gomb a menüben) ( count++; ) alert("Összes tulajdonság: " + count);

Eredmények

• Egy objektum tulajdonságain való iterációhoz egy kulcshurkot használunk: for (kulcs az obj-ban).

Feladatok Határozza meg, hogy egy objektum üres-e

Hozzon létre egy isEmptyObject(obj) függvényt, amely igazat ad vissza, ha az objektumnak nincsenek tulajdonságai, és false-t, ha legalább egy tulajdonság van.

Ennek így kell működnie:

Függvény isEmptyObject(obj) ( /* a kódod */ ) var obj = (); alert(isEmptyObject(obj)); // true obj["8:30"] = "emelkedés"; alert(isEmptyObject(obj)); // hamis

Számítsa ki az összes objektumtulajdonság számtani átlagát!

Van egy bérobjektum fizetésekkel. Írjon egy kódot, amely megjeleníti az összes fizetés számtani átlagát.
Ha az objektum üres, akkor az eredmény 0 legyen.
Például.

Helló! Folytatjuk a tömbmódszerek tanulmányozását, és ebben a leckében a tömbön keresztüli iteráció módszereit vizsgáljuk meg. Ezek a módszerek lehetővé teszik egy tömb bejárását és bizonyos műveletek végrehajtását az elemein. Igen, elfelejtettem mondani, hogy ezeket a módszereket az IE 8 nem támogatja. Bár most olyan fontos, hogy ez a böngésző nem támogatja őket, de mégis, ha IE8 támogatást szeretnél, akkor az ES5-shim segít. És folytatjuk

Minden módszerhez

Ezzel a módszerrel egy tömb hurokban való bejárására szolgál, de átadhatunk neki egy függvényt, amelyben bizonyos műveleteket hajthatunk végre a tömb elemein. Nézzünk egy példát.

Var mas = ["Banán", "Avokádó", "Sárgarépa"]; mas.forEach(function(item, i, mas) ( alert(i + ": " + item + " (tömb: " + mas + ")"); ));

Itt a példában egy függvényt adunk át a forEach metódusnak, amely 3 paramétert ad meg:

item — tömbelem

i — tömb elemszáma

A mas a feldolgozás alatt álló tömb.

Ez a módszer használható a for ciklus helyett a tömbön keresztüli iterációhoz.

szűrési módszer

Ez a metódus a forEach metódushoz hasonlóan egy tömbön való iterációra szolgál, és argumentumként ad át egy függvényt, de lehetővé teszi a tömb szűrését, és egy új tömböt ad vissza, amely csak azokat az elemeket tartalmazza, amelyekhez az általunk átadott függvény ehhez a módszerhez igazat ad vissza.

Kicsit zavaros, ezért nézzük meg egy példával.

Var mas = ; var pozitívNum = mas.filter(függvény(szám) ( visszatérési szám > 0; )); document.write(pozitívSzám); 1,4,3

A példában van egy számokat tartalmazó tömb, és egy másik tömböt kell kapnunk, amely csak pozitív számokat tartalmazna az eredeti tömbből. Ehhez alkalmazzuk a tömbre a filter metódust, és meghívunk egy függvényt, ami minden elemet ellenőriz, azaz minden pozitív számot visszaad, és az eredményt egy másik tömbben tároljuk, a példában ez pozitívNum.

térkép módszer

A map metódus egy másik tömböt hoz létre, amely az eredeti tömb függvényének meghívásának eredményeiből fog állni, de ebben a függvényben bizonyos műveletek az eredeti tömb elemein történnek, és az eredmény úgy jelenik meg az új tömbben, ahogy van. Nézzünk egy példát, egyébként szerintem teljesen homályos.

Var mas = ; var newMas = mas.map(function(item) ( return item*item; )); // kapott egy tömböt négyzetekkel alert(newMas); 1,4,9

A példában van egy kezdeti tömb számokkal, erre van alkalmazva a map metódus, amelyben a tömb minden elemét megszorozzuk önmagával és az eredményt egy másik tömbbe írjuk. Ennek eredményeként egy tömböt kapunk az eredeti tömbben lévő számok négyzeteivel.

Módszerek mindegyik/egyes

Ezek a módszerek ellenőrzik, hogy van-e elem a tömbben. Ezt egy olyan függvényen keresztül teszik meg, amelyet paraméterként adnak át nekik, vagyis ha ez a függvény igazat ad vissza, akkor maga a metódus is igazat ad vissza. Ezen túlmenően minden metódus megköveteli, hogy minden elem megfeleljen a függvény feltételének, néhány módszer pedig legalább egy egyezést. És mint mindig, itt is van egy példa az Ön számára.

Var mas = ; function isPositiv(num) ( visszatérési szám > 0; ) if(mas.every(isPositiv)) ( document.write("A tömb csak pozitív számokat tartalmaz"); ) else( document.write("A tömb legalább egyet tartalmaz negatív szám "); ) if(mas.some(isPositiv)) ( document.write("A tömb legalább egy pozitív számot tartalmaz"); ) else ( document.write("Nincsenek pozitív számok a tömbben") ;)

Vegyünk egy példát: van egy tömbünk pozitív és negatív számokkal, és ellenőriznünk kell, hogy van-e benne legalább egy negatív szám. Ehhez minden és néhány módszert alkalmazunk. Létrehozunk egy függvényt, amely pozitív számokat ad vissza, majd minden metódusnak átadja, mivel ez a metódus logikai eredményt ad vissza, ezért feltételes utasításokban használatos. Példánkban minden metódus hamis értéket ad vissza, mert negatív számok vannak a tömbben, de néhány metódus igazat ad vissza, mert legalább egy pozitív szám van a tömbben.

redukál/reduceRight

Ha egy tömbön keresztül kell iterálni, használhatja a forEach, for or for..of parancsot.

Ha egy tömbön keresztül kell iterálnia, és minden elemhez adatokat kell visszaadnia, használja a térképet.

Az arr.reduce és arr.reduceRight metódusok hasonlóak a fenti módszerekhez, de kissé összetettebbek. Egyetlen érték kiszámítására szolgálnak a teljes tömb alapján.

Szintaxis:

Legyen érték = arr.reduce(function(previousÉrték, elem, index, tömb) ( // ... ), );

A függvény a tömb minden elemére felváltva kerül alkalmazásra, és az eredményét „átviszi” a következő hívásba.

Érvek:

• previousValue – ennek a függvénynek az előző hívásának eredménye, amely megegyezik az első hívás kezdeti értékével (ha a kezdetet átadtuk),
• item – a tömb következő eleme,
• index – indexe,
• array – maga a tömb.

Amikor egy függvényt meghívunk, a tömb előző elemére vonatkozó hívás eredménye első argumentumként kerül átadásra.

Ez bonyolultnak hangzik, de egyszerűbbé válik, ha úgy gondolja, hogy az első argumentum az előző függvényhívások eredményének „felhalmozása”. Ha kész, a redukció eredménye lesz.

Ez a módszer a legkönnyebben megérthető, mint mindig, egy példával.

Itt megkapjuk a tömb összes elemének összegét egyetlen sorban:

Legyen arr = ; legyen eredmény = arr.reduce((összeg, áram) => összeg + áram, 0); riasztás(eredmény); 15

Itt a leggyakoribb redukciós opciót használtuk, amely csak 2 argumentumot használ.

Nézzük meg közelebbről, hogyan működik.

Az első futtatáskor az összeg kezdeti (a redukció utolsó argumentuma), ami 0, az áram pedig a tömb első eleme, ami 1. Így a függvény eredménye 1.

Amikor másodszor futtatjuk az összeg = 1-et, hozzáadjuk a tömb második elemét (2).

A harmadik futásnál összeg = 3, amihez hozzáadjuk a következő elemet, és így tovább...

A számítási folyamat így néz ki:

Táblázat formájában, ahol minden sor egy függvényhívás a tömb következő elemén:

összegezze a jelenlegi eredményt

első hívás		1	1
második hívás	1	2	3
harmadik kihívás	3	3	6
negyedik kihívás	6	4	10
ötödik kihívás	10	5	15

Itt jól látható, hogy az előző hívás eredménye hogyan kerül át a következő hívás első argumentumába.

A kezdeti értéket is elhagyhatjuk:

Legyen arr = ; // a kezdeti érték eltávolításra kerül (nincs 0 a végén) legyen result = arr.reduce((sum, current) => sum + current); riasztás(eredmény); 15

Az eredmény pontosan ugyanaz! Ennek az az oka, hogy inicializálás hiányában a tömb első eleme lesz az 1. érték, és a keresés a másodiktól kezdődik.

A számítási táblázat ugyanaz lesz, mínusz az első sor.

De az ilyen használat rendkívüli óvatosságot igényel. Ha a tömb üres, a redukció kezdeti érték nélküli hívása hibát okoz.

Íme egy példa:

Legyen arr = ; // Hiba: Kezdőérték nélküli üres tömb redukálása // ha lenne kezdőérték, a redukció visszaadná egy üres tömbnél. arr.reduce((összeg, áram) => összeg + áram);

Eredmények

Összefoglalva tehát megvizsgáltuk a tömbök ciklusban történő munkavégzésének különféle módszereit, amelyek mindegyikében közös, hogy mindegyiknek át kell adnia egy függvényt argumentumként.

• forEach – egy tömbön való hurkoláshoz.
• filter – a tömb szűrése. Új szűrt tömböt ad vissza
• every/some – az egyes elemek meglétének ellenőrzése a tömbben.
• map - tömb tömbbé alakítása. Az eredeti konvertált tömböt adja vissza.
• Reduction/reduceRight – Kiszámít egy értéket a teljes tömbből, minden elemen függvényt hív, és a köztes eredményt átadja a hívások között. Használható a tömbelemek összegének kiszámítására.

Feladatok Szerezzen be egy új tömböt

Legyen adott a var mas = ["HTML", "CSS", "JavaScript", "Pascal"] tömb, a map metódussal kell egy új tömböt kapni, amely tartalmazza az eredeti tömb egyes elemeinek hosszát .

Szűrje le a tömböt

Létezik egy tömb, var mas = csak pozitív számokat tartalmazó tömböt kell használni a filter módszerrel.

Ellenőrizze a tömböt

Van egy tömb var mas = ellenőrizni kell, hogy vannak-e negatív számok a tömbben, és az eredményt megjeleníteni a képernyőn.

Nos, végezetül egy rövid videó a tömbön való hurkoláshoz.

• Fordítás

• I. Iteráció valós tömbök felett
• Minden módszerhez és a kapcsolódó módszerekhez
• hurokhoz
• A for...in loop megfelelő használata
• for... of loop (az iterátor implicit használata)
• Az iterátor kifejezett használata
• Metódusok használata valós tömbökön való iterációhoz
• Konvertálja valódi tömbbé
• Megjegyzés a futásidejű objektumokról

I. Iteráció valós tömbökön Jelenleg háromféleképpen lehet iterálni egy valódi tömb elemein:

metódus Array.prototype.forEach ;

klasszikus for loop

egy „helyesen” megkonstruált...in hurok.

Emellett hamarosan, az új ECMAScript 6 (ES 6) szabvány megjelenésével további két módszer várható:

for... of loop (az iterátor implicit használata);

az iterátor explicit használata.

1. A forEach módszer és a kapcsolódó módszerek Ha projektjét úgy tervezték, hogy támogassa az ECMAScript 5 (ES5) szabvány funkcióit, használhatja annak egyik újítását – a forEach módszert.

Használati példa:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
Általában a forEach használatához csatlakozni kell az es5-shim emulációs könyvtárhoz azoknál a böngészőknél, amelyek natívan nem támogatják ezt a módszert. Ezek közé tartozik az IE 8 és korábbi verziók, amelyek néhol még mindig használatban vannak.

A forEach előnye, hogy nincs szükség helyi változók deklarálására az aktuális tömbelem indexének és értékének tárolásához, mivel ezek automatikusan átadódnak a visszahívási függvénynek argumentumként.

Ha aggódik az egyes elemek visszahívásának lehetséges költségei miatt, ne aggódjon, és olvassa el ezt.

A ForEach-et úgy tervezték, hogy egy tömb összes elemén át iteráljon, de ezen kívül az ES5 számos további hasznos módszert kínál az összes vagy néhány elem iterálásához, valamint bizonyos műveletek végrehajtásához:

• Az every - igazat ad vissza , ha a tömb minden elemére a visszahívás egy igazra konvertálható értéket ad vissza .
• some - igazat ad vissza, ha a tömb legalább egy elemére a visszahívás igazra konvertálható értéket ad vissza.
• szűrő - létrehoz egy új tömböt, amely tartalmazza az eredeti tömb azon elemeit, amelyekre a visszahívás igazat ad vissza.
• térkép - létrehoz egy új tömböt, amely a visszahívás által visszaadott értékekből áll.
• redukció – egyetlen értékre csökkenti a tömböt, a tömb minden elemére felváltva visszahívást alkalmaz, az elsőtől kezdve (hasznos lehet a tömbelemek összegének és egyéb összegző függvények kiszámításához).
• ReductionRight – a redukcióhoz hasonlóan működik, de fordított sorrendben iterálja az elemeket.

2. A hurokhoz Jó öreg a szabályokhoz:

Var a = ["a", "b", "c"]; var index; for (index = 0; index< a.length; ++index) { console.log(a); }
Ha a tömb hossza állandó a ciklusban, és maga a ciklus a kód teljesítménykritikus szakaszához tartozik (ami nem valószínű), akkor használhatja a tömb „optimálisabb” változatát, amely tárolja a tömb hosszát. :

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index< len; ++index) { console.log(a); }
Elméletileg ennek a kódnak kicsit gyorsabban kell futnia, mint az előzőnek.

Ha az elemek sorrendje nem fontos, akkor még tovább léphet az optimalizálás terén, és megszabadulhat a tömb hosszának tárolására szolgáló változótól, megváltoztatva a keresés sorrendjét fordítottra:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
A modern JavaScript-motorokban azonban az ilyen optimalizáló játékok általában semmit sem jelentenek.

3. A for...in Loop helyes használata Ha a for...in ciklus használata javasolt, ne feledje, hogy a tömbökön keresztüli iteráció nem az, amire való. Az elterjedt tévhittel ellentétben a for...in ciklus nem tömbindexeken keresztül iterál, hanem egy objektum számtalan tulajdonságain keresztül.

Bizonyos esetekben azonban, például a ritka tömbökön történő iteráció, a for...in hasznos lehet, ha megteszi az alábbi példában látható óvintézkedéseket:

// a - ritka tömb var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && kulcs