• Traducere

• I. Iterarea peste matrice reale
• pentruFiecare metodă și metode aferente
• pentru buclă
• Utilizarea corectă a buclei for...in
• for...of loop (utilizarea implicită a iteratorului)
• Utilizarea explicită a iteratorului
• Folosind metode de iterare peste matrice reale
• Convertiți într-o matrice reală
• O notă despre obiectele runtime

I. Iterarea peste matrice reale În acest moment, există trei moduri de a repeta peste elementele unui tablou real:

metoda Array.prototype.forEach ;

clasic pentru buclă

un „corect” construit pentru... în buclă.

În plus, în curând, odată cu apariția noului standard ECMAScript 6 (ES 6), sunt așteptate încă două metode:

for...of loop (utilizarea implicită a iteratorului);

utilizarea explicită a iteratorului.

1. Metoda forEach și metodele aferente Dacă proiectul dumneavoastră este proiectat să suporte caracteristicile standardului ECMAScript 5 (ES5), puteți utiliza una dintre inovațiile acestuia - metoda forEach.

Exemplu de utilizare:
var a = ["a", "b", "c"]; a.forEach(funcție(intrare) ( console.log(intrare); ));
În general, utilizarea forEach necesită conectarea bibliotecii de emulare es5-shim pentru browsere care nu acceptă nativ această metodă. Acestea includ IE 8 și versiuni anterioare, care sunt încă utilizate în unele locuri.

Avantajul forEach este că nu este nevoie să declarați variabile locale pentru a stoca indexul și valoarea elementului de matrice curent, deoarece acestea sunt transmise automat funcției de apel invers ca argumente.

Dacă sunteți îngrijorat de costul posibil al apelării unui apel invers pentru fiecare element, nu vă faceți griji și citiți asta.

ForEach este proiectat să itereze peste toate elementele unei matrice, dar în plus față de acesta, ES5 oferă mai multe metode utile pentru a itera toate sau unele elemente plus efectuarea unor acțiuni asupra acestora:

• fiecare - returnează adevărat dacă pentru fiecare element al matricei apelul returnează o valoare care poate fi convertită în adevărat .
• some - returnează adevărat dacă pentru cel puțin un element al matricei, callback returnează o valoare care poate fi convertită în adevărat.
• filter - creează o nouă matrice care include acele elemente ale matricei originale pentru care callback returnează true .
• hartă - creează o nouă matrice constând din valorile returnate de apel invers.
• reduce - reduce o matrice la o singură valoare, aplicând un callback fiecărui element al matricei pe rând, începând cu primul (poate fi util pentru calcularea sumei elementelor matricei și a altor funcții rezumative).
• reduceRight - funcționează similar cu reduce, dar iterează prin elemente în ordine inversă.

2. Pentru buclă Bine vechi pentru reguli:

Var a = ["a", "b", "c"]; indicele var; pentru (index = 0; index< a.length; ++index) { console.log(a); }
Dacă lungimea matricei este constantă pe tot parcursul buclei, iar bucla în sine aparține unei secțiuni de cod critice pentru performanță (ceea ce este puțin probabil), atunci puteți utiliza o versiune „mai optimă” a pentru care stochează lungimea matricei. :

Var a = ["a", "b", "c"]; var index, len; pentru (index = 0, len = a.lungime; index< len; ++index) { console.log(a); }
În teorie, acest cod ar trebui să ruleze puțin mai repede decât cel anterior.

Dacă ordinea elementelor nu este importantă, atunci puteți merge și mai departe în ceea ce privește optimizarea și puteți scăpa de variabila pentru stocarea lungimii matricei, schimbând ordinea căutării în sens invers:

Var a = ["a", "b", "c"]; indicele var; pentru (index = a.length - 1; index >= 0; --index) ( console.log(a); )
Cu toate acestea, în motoarele JavaScript moderne, astfel de jocuri de optimizare nu înseamnă de obicei nimic.

3. Utilizarea corectă a unei bucle for...in Dacă vi se recomandă să utilizați o buclă for...in, amintiți-vă că iterarea peste matrice nu este scopul pentru care este destinată. Contrar unei concepții greșite obișnuite, bucla for...in nu iterează peste indici de matrice, ci mai degrabă prin proprietăți enumerabile ale unui obiect.

Cu toate acestea, în unele cazuri, cum ar fi iterarea peste matrice rare, pentru...in poate fi utilă, atâta timp cât luați măsuri de precauție, așa cum se arată în exemplul de mai jos:

// a - tablou rar var a = ; a = „a”; a = „b”; a = "c"; pentru (cheie var în a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key 0; ) if(mas.every(isPositiv)) (document. write("Matricea conține numai numere pozitive"); ) else( document.write("Matricea conține cel puțin un număr negativ "); ) if(mas.some(isPositiv)) ( document.write("Matricea conține cel puțin ar exista un număr pozitiv"); ) else ( document.write ("Nu există numere pozitive în matrice"); )

Luați în considerare un exemplu: avem o matrice cu numere pozitive și negative și trebuie să verificăm prezența a cel puțin unui număr negativ. Pentru a face acest lucru, folosim toate metodele. Creăm o funcție care va returna numere pozitive și apoi o transmite metodei every.Deoarece această metodă returnează un rezultat logic, este folosită în instrucțiunile condiționate. Fiecare metodă din exemplul nostru va returna false deoarece există numere negative în matrice, dar metoda some va returna adevărat deoarece există cel puțin un număr pozitiv în matrice.

reduce/reduceDreapta

Dacă trebuie să iterați printr-o matrice, puteți utiliza forEach, for sau for..of.

Dacă trebuie să iterați printr-o matrice și să returnați date pentru fiecare element, utilizați harta.

Metodele arr.reduce și arr.reduceRight sunt similare cu metodele de mai sus, dar sunt puțin mai complexe. Ele sunt folosite pentru a calcula o singură valoare pe baza întregii matrice.

Sintaxă:

Let value = arr.reduce(function(previousValue, item, index, array) ( // ... ), );

Funcția este aplicată la rândul său tuturor elementelor matricei și „transferă” rezultatul său la apelul următor.

Argumente:

• previousValue – rezultatul apelului anterior al acestei funcții, egal cu inițiala la primul apel (dacă inițiala este trecută),
• item – următorul element al matricei,
• index - indicele său,
• array – matricea în sine.

Când o funcție este apelată, rezultatul apelului acesteia asupra elementului anterior al matricei este transmis ca prim argument.

Acest lucru sună complicat, dar devine mai simplu dacă vă gândiți la primul argument ca „acumulând” rezultatul apelurilor anterioare de funcții. Când este terminat, devine rezultatul reducerii.

Această metodă este cel mai ușor de înțeles, ca întotdeauna, cu un exemplu.

Aici obținem suma tuturor elementelor matricei dintr-o singură linie:

Fie arr = ; fie rezultat = arr.reduce((suma, curent) => suma + curent, 0); alerta(rezultat); // 15

Aici am folosit cea mai comună opțiune de reducere, care folosește doar 2 argumente.

Să aruncăm o privire mai atentă la modul în care funcționează.

La prima rulare, suma este inițială (ultimul argument al reducerii), care este 0, iar curentul este primul element al matricei, care este 1. Astfel, rezultatul funcției este 1.

A doua oară când rulăm sum = 1, adăugăm al doilea element al matricei (2).

La a treia rulare, suma = 3, la care adăugăm următorul element și așa mai departe...

Fluxul de calcul arată astfel:

Sub forma unui tabel, unde fiecare linie este un apel de funcție pe următorul element al matricei:

suma rezultatului curent

primul apel		1	1
al doilea apel	1	2	3
a treia provocare	3	3	6
a patra provocare	6	4	10
a cincea provocare	10	5	15

Aici puteți vedea clar cum rezultatul apelului precedent este trecut în primul argument al celui următor.

De asemenea, putem omite valoarea inițială:

Fie arr = ; // valoarea inițială este eliminată (nu 0 la sfârșit) let result = arr.reduce((sum, current) => sum + current); alerta(rezultat); // 15

Rezultatul este exact același! Acest lucru se datorează faptului că, în absența inițialei, primul element al matricei este luat ca prima valoare, iar căutarea începe de la a doua.

Tabelul de calcul va fi același minus prima linie.

Dar o astfel de utilizare necesită precauție extremă. Dacă matricea este goală, apelarea reduce fără o valoare inițială va genera o eroare.

Iată un exemplu:

Fie arr = ; // Eroare: Reducerea matricei goale fără valoare inițială // dacă a existat o valoare inițială, reducere o va returna pentru o matrice goală. arr.reduce((suma, curent) => suma + curent);

Rezultate

Deci, pentru a rezuma, am analizat diferite metode de lucru cu tablouri într-o buclă.Toate aceste metode au un lucru în comun, și anume că toate trebuie să transmită o funcție ca argument.

• forEach – pentru trecerea în buclă printr-o matrice.
• filter – pentru a filtra matricea. Returnează o nouă matrice filtrată
• every/some – pentru a verifica matricea pentru prezența elementelor individuale.
• map - pentru a converti o matrice într-o matrice. Returnează tabloul original convertit.
• reduce/reduceRight - Calculează o valoare din întregul tablou, apelând o funcție pe fiecare element și trecând rezultatul intermediar între apeluri. Poate fi folosit pentru a calcula suma elementelor matricei.

Sarcini Obțineți o nouă matrice

Lăsați matricea var mas = ["HTML", "CSS", "JavaScript", "Pascal"] să fie dată, trebuie să utilizați metoda map pentru a obține o nouă matrice care va conține lungimile fiecărui element din tabloul original .

Filtrați matricea

Există o matrice var mas = trebuie să utilizați metoda de filtru pentru a obține o matrice care conține numai numere pozitive.

Verificați matricea

Există o matrice var mas = trebuie să verificați dacă există numere negative în matrice și să afișați rezultatul pe ecran.

Ei bine, în concluzie, un scurt videoclip despre metodele de buclă printr-o matrice.

Funcționează așa:

// NECESITA ECMASCRIPT 2015+ var s, myStringArray = ["Bună ziua", "Lumea"]; pentru (s din myStringArray) ( // ... face ceva cu s ... )

Sau și mai bine, deoarece ECMAScript 2015 oferă și variabile bloc cu let și const:

// NECESITA ECMASCRIPT 2015+ const myStringArray = ["Bună ziua", "Lumea"]; pentru (const s din myStringArray) ( // ... face ceva cu s ... ) // s nu mai este definit aici

O notă despre tablourile rare: o matrice în JavaScript poate să nu stocheze atât de multe elemente cât este specificat în lungimea sa; acest număr raportat este pur și simplu cu unul mai mare decât cel mai mare indice la care este stocată valoarea. Dacă o matrice conține mai puține elemente decât indică lungimea sa, se spune că este rară. De exemplu, este perfect legal să existe o matrice cu elemente doar la indicii 3, 12 și 247; Lungimea unei astfel de matrice este specificată ca 248, deși de fapt stochează doar 3 valori. Dacă încercați să accesați elementul la orice alt index, matricea va avea o valoare nedefinită. Deci, atunci când doriți să „iterați” o matrice, aveți o întrebare la care trebuie să răspundeți: doriți să repetați pe întregul interval specificat de lungimea sa și să procesați nedefinit pentru elementele lipsă sau doriți să procesați numai elemente prezente efectiv? Există multe aplicații pentru ambele abordări; depinde doar pentru ce folosești matricea.

Dacă iterați peste o matrice cu for .. of , corpul buclei este executat după lungime, iar variabila de control al buclei este setată la nedefinită pentru orice elemente care nu sunt de fapt în matrice. În funcție de detaliile codului dvs. „faceți ceva”, acest comportament poate fi ceea ce doriți, dar dacă nu este ceea ce doriți, ar trebui să utilizați o abordare diferită.

Desigur, unii dezvoltatori nu au de ales decât să folosească oricum o abordare diferită, deoarece din anumite motive vizează o versiune de JavaScript care nu este încă acceptată pentru... din .

Atâta timp cât implementarea dvs. JavaScript este compatibilă cu o versiune anterioară a specificației ECMAScript (care, de exemplu, exclude versiunile de Internet Explorer înainte de 9), puteți utiliza metoda iteratorului Array#forEach în loc de o buclă. În acest caz, treceți o funcție care va fi apelată pentru fiecare element din matrice:

Var myStringArray = [ "Bună ziua", "Lumea" ]; myStringArray.forEach(funcție(e) ( // ... face ceva cu s ... ));

Spre deosebire de ... din , .forEach apelează funcția doar pe elementele care conțin de fapt valori. Dacă trecem matricea noastră ipotetică cu trei elemente și o lungime de 248, aceasta va apela funcția doar de trei ori, nu de 248 de ori. De asemenea, face distincția între elementele lipsă și elementele care sunt de fapt setate la nedefinit; pentru cel din urmă, va apela în continuare funcția, trecând o valoare nedefinită ca argument. Dacă așa doriți să gestionați matricele rare, .forEach ar putea fi calea de urmat, chiar dacă traducătorul dvs. acceptă pentru ... din .

Opțiunea finală, care funcționează în toate versiunile de JavaScript, este o buclă de numărare explicită. Pur și simplu numărați de la 0 la unu mai puțin decât lungimea și utilizați contorul ca index. Bucla principală arată astfel:

( 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 = lungimea arr.; în timp ce(a< l) { var b = arr[a] + 1; ++a; } }] , ["reverse-do-while-loop", () =>( var a = lungime.arr. - 1; // ATENTIE do ( var b = arr[a] + 1; ) while(a--); )] , ["forEach", () => ( arr.forEach( a => ( var b = a + 1; )); )], [„for..in (doar 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) .lungime - r) / 8; dacă (r > 0) do ( var b = arr + 1; ) în timp ce (--r); dacă (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; ) în timp ce (n); )] , [„Dispozitiv Duff negativ”, () => ( var r = lungimea alinierii % 8; var n = (lungimea ariei-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) a luat $(t1-t0 ) msec"); ) var globalVarTime = bench("for-loop fără "var"", () => ( // Aici dacă uitați să puneți "var", astfel încât variabilele" vor fi globale pentru (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 = ori; ori = ori.harta(a => (a = (a/max)*100; return a; )); var template = (titlu, ora, n) => "" + "$(titlu) " + " $(Number(time.toFixed(3)))msec" + ""; var strRes = times.map(t => template(...t)).join("\n") + "

for-loop fără „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 ( de la ( lățime: 0; ) ) Afișarea @-webkit-keyframes (de la ( lățime: 0; ) )

2014 În timp ce în urmă

Gândește logic.

Uita-te la asta

For(var index = 0 , length = array.length ; index< length ; index++) { //do stuff }

• Trebuie să creați cel puțin 2 variabile (index, lungime)
• Trebuie să verificați dacă indicatorul de lungime este mai mic de
• Indicele trebuie crescut
• bucla for are 3 parametri

Acum spune-mi de ce ar trebui să fie mai rapid decât:

Var lungime = array.length; while(--lungime) ( //sau lungime-- //face lucruri )

• O variabilă
• Fără verificări
• indicele scade (mașinile preferă acest lucru)
• While are un singur parametru

Am fost complet confuz când Chrome 28 a arătat că bucla for a fost mai rapidă decât timpul. Ar trebui să fie ceva de genul

„Ei bine, toată lumea folosește o buclă for, să ne concentrăm pe asta când pentru Chrome.”

Dar acum, în 2014, bucla while revine la Chrome. este de 2 ori mai rapid, în alte/vechi browsere a fost întotdeauna mai rapid.

Am făcut câteva teste noi în ultima vreme. Acum, în lumea reală a utilizării, aceste coduri scurte nu au valoare și jsperf nu poate executa corect bucla while, deoarece trebuie să recreeze array.length, ceea ce necesită și timp.

NU POATE obține viteza reală a buclei while pe jsperf.

trebuie să vă creați propria funcție și să verificați asta folosind window.performance.now()

Și da... nu există nicio cale pentru o buclă de timp să fie mai rapidă.

Problema reală este timpul real de manipulare/redare/timpul de desen sau cum vrei să-i spui.

De exemplu, am o scenă de pânză în care trebuie să calculez coordonatele și coliziunile... acest lucru se face între 10-200 MicroSecunde (nu milisecunde). este nevoie de mai multe milisecunde pentru a face totul. La fel ca în DOM.

Există un alt mod super eficient de a folosi bucla în unele cazuri... de exemplu pentru a copia/clona o matrice

For(var i = array.length; i > 0; arrayCopy[ --i ] = array[ i ] // fac lucruri);

Vă rugăm să rețineți setările parametrilor:

• La fel ca în bucla while. Folosesc o singură variabilă
• Trebuie să verificați dacă indicele este mai mare decât 0;
• După cum puteți vedea, această abordare este diferită de bucla obișnuită pe care o folosește toată lumea, deoarece fac lucruri în interiorul celui de-al 3-lea parametru și, de asemenea, scad direct în interiorul matricei.

Se spune că acest lucru confirmă faptul că mașini precum

am scris că m-am gândit să o fac puțin mai scurtă și să elimin niște lucruri inutile și am scris pe aceasta folosind același stil:

For(var i = array.length ; i-- ; arrayCopy[ i ] = array[ i ] // fac lucruri);

Chiar dacă este mai scurt, se pare că folosirea i încetinește din nou totul. Aceasta este cu 1/5 mai lent decât bucla anterioară for și while.

Notă: ; foarte important după pentru looo fără ()

Chiar dacă tocmai ți-am spus că jsperf nu este cel mai bun mod de a testa scripturile. Am adăugat 2 bucle aici.

Și iată un alt răspuns despre performanță în javascript

Acest răspuns ar trebui să arate modalități performante de a scrie javascript. Deci, dacă nu poți citi asta, întreabă și vei primi un răspuns sau vei citi o carte despre javascript http://www.ecma-international.org/ecma-262/5.1/

Cea mai recentă revizuire a testului pe care l-am pregătit (prin reutilizarea unuia mai vechi) arată un lucru.

Lungimea memoriei cache nu este atât de importantă, dar nu doare.

Fiecare primă rulare a testului de mai sus (în fila nou deschisă) oferă cele mai bune rezultate pentru ultimele 4 fragmente (al treilea, al cincilea, al 7-lea și al 10-lea în topuri) în Chrome, Opera și Firefox pe Debian Squeeze pe 64 de biți ( hardware-ul meu desktop). Execuțiile ulterioare dau un rezultat complet diferit.

Concluziile performanței sunt simple:

• Intrați într-o buclă for (înainte) și verificați cu !== în schimb< .
• Dacă nu trebuie să reutilizați matricea mai târziu, atunci este eficientă și o buclă cu lungime redusă și shift() matrice distructivă -ing.

În prezent (2011.10) șablonul de mai jos pare a fi cel mai rapid.

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

Amintiți-vă că stocarea în cache arr.length nu este critică aici, așa că puteți doar să testați i !== arr.length și nu va fi nicio atingere de performanță, dar veți obține un cod mai scurt.

PS: Știu că într-un fragment cu shift() rezultatul său poate fi folosit în loc de a accesa elementul 0, dar am trecut cumva cu vederea asta după ce am reutilizat revizuirea anterioară (care avea valoarea greșită în timpul buclelor), iar mai târziu nu am vrut să piardă rezultatele deja obținute.

„Cel mai bun” ca în performanță pură? sau performanta SI?

Cea mai bună performanță pură este cea care utilizează cache-ul și operatorul de prefix ++ (datele mele: http://jsperf.com/caching-array-length/189)

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

Aș spune că o buclă fără cache este cel mai bun echilibru între timpul de execuție și timpul de citire al programatorului. Fiecare programator care începe cu C/C++/Java nu va cheltui ms pentru a citi acest lucru

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

** stocați în cache lungimea matricei în interiorul buclei, câteva secunde de timp vor scăpa. Depinde de elementele din matrice, dacă există mai multe elemente în matrice, există o mare diferență în ceea ce privește timpul Ms*

SARr; //Matrice; for(var i = 0 ; i = 0) ( face Something(array[i]); )

Dacă ordinea de prioritate este importantă, utilizați această abordare.

Fie ii = array.length; fie i = 0; in timp ce eu< ii) { doSomething(array[i]); ++i; }

Eu scriu mereu în primul stil.

Chiar dacă compilatorul este suficient de inteligent pentru a-l optimiza pentru matrice, dar este totuși inteligent dacă folosim DOMNodeList aici sau un obiect complex cu lungime calculată?

Știu că întrebarea este despre matrice, dar cred că este o practică bună să scrieți toate buclele în același stil.

Var arr = ; // Tabloul var i = 0; in timp ce eu< arr.length) { // Do something with arr[i] i++; }

i++ este mai rapid decât ++i, --i și i -

Un articol în care ne vom uita la exemple de utilizare a jQuery fiecare funcție și metodă.

Biblioteca jQuery are 2 entități diferite numite fiecare.

Prima (jQuery.each) este o funcție jQuery universală care poate fi utilizată pentru a itera elementele unui tablou sau obiect.

A doua (fiecare) este o metodă care este aplicată unui set de elemente pentru a trece prin ele.

Fiecare buclă (jQuery.each). Exemple de utilizare

Sintaxa fiecărei funcție:

// matrice sau obiect - un tablou sau obiect ale cărui elemente sau proprietăți trebuie să fie iterate // callback - o funcție care va fi executată pentru fiecare element al matricei sau al proprietății obiect $.each(array sau object,callback);

Să ne uităm la lucrul cu fiecare funcție folosind exemple.

Exemplul nr. 1. În ea, vom itera toate elementele matricei.

// tablou format din 3 linii var arr = ["Mașină","Camion","Autobuz"]; // haideți să iterăm prin matrice arr $.each(arr,function(index,value)( // acțiuni care vor fi efectuate pentru fiecare element al matricei // indexul este indexul curent al elementului matricei (număr) // valoare este valoarea elementului de matrice curent //trimite indexul și valoarea matricei în consola console.log("Index: " + index + "; Valoare: " + valoare); )); /* Rezultat (în consolă): Index: 0; Valoare: Index auto: 1; Valoare: Truck Index: 2; Valoare: autobuz */

În codul de mai sus, fiecare funcție este folosită pentru a itera prin matrice. Funcția are 2 parametri necesari. Primul parametru este entitatea (matrice sau obiect) ale cărei elemente (proprietăți) trebuie să fie iterate. În acest caz, este matricea arr. Al doilea parametru este o funcție de apel invers care va fi executată pentru fiecare element (în acest caz) al matricei. Are 2 parametri, care sunt accesibili în interiorul său prin variabilele corespunzătoare. Primul parametru este numărul de serie al elementului (numărând de la 0). Al doilea parametru este valoarea elementului de matrice curent.

Exemplul nr. 2. În acest exemplu, vom itera toate proprietățile unui obiect.

// obiect smartphone având 5 proprietăți var smartphone = ( "nume": "LG G5 se", "an": "2016", "dimensiunea ecranului": "5.3", "rezoluția ecranului": "2560 x 1440 " , "os" : "Android 6.0 (Marshmallow)" ); // iterează peste obiectul smartphone $.each(smartphone, function(key, value) ( ​​// acțiuni care vor fi efectuate pentru fiecare proprietate a obiectului // cheie - numele curent al proprietății array // valoare - valoarea proprietatii curente a obiectului // afiseaza numele proprietatii si valoarea acesteia in consola console.log("Proprietate: " +key + "; Value: " + value); )); /* Rezultat (în consolă): Proprietate: nume; Valoare: LG G5 se Proprietate: an; Valoare: 2016 Proprietate: dimensiune ecran; Valoare: 5,3 Proprietate: rezoluție ecran; Valoare: 2560 x 1440 Proprietate: os; Valoare: Android 6.0 (Marshmallow) */

Fiecare funcție poate fi folosită pentru a repeta peste obiecte JavaScript. Singura diferență în utilizarea sa este că parametrii funcției de apel invers au semnificații diferite. Primul parametru stochează numele proprietății obiectului, iar al doilea - valoarea acestei proprietăți.

Exemplul nr. 3. În ea, vom enumera o structură mai complexă (să ne uităm la cum să folosim imbricat fiecare).

// obiect format din 2 proprietăți. Fiecare proprietate a acestui obiect are ca valoare un tablou, ale cărui elemente sunt, de asemenea, obiecte var articles = ( "Bootstrap": [ ("id":"1", "title":"Introduction"), ("id" :"2" , "title":"Cum se instalează"), ("id":"3", "title":"Grid") ], "JavaScript": [ ("id":"4", " title":"Noțiuni de bază "), ("id":"5", "title":"Selectarea elementelor") ] ); $.each(articole,funcție(cheie,date) ( console.log("Secțiune: " + cheie); $.each(date, funcție(index,valoare) ( ​​console.log("Articol: id = " + valoare ["id"] + "; Titlu = "+ valoare["titlu"]); )); )); /* Rezultat: Secțiune: Articol Bootstrap: id = 1; Titlu = Articol introductiv: id = 2; Titlu = Cum se instalează Articolul: id = 3; Titlu = Secțiune grilă: Articolul JavaScript: id = 4; Titlu = Articol de bază: id = 5; Nume = Selecția elementelor */

Cum se întrerupe fiecare (ieșire din buclă)?

Ruperea fiecărei bucle se face folosind instrucțiunea return, care trebuie să returneze false .

De exemplu, să întrerupem execuția fiecărei bucle după ce găsim numărul 7 în tabloul arr:

// tablou format din 5 numere var arr = ; // număr pentru a găsi var find = 7; // haideți să parcurgem matricea arr $.each(arr, function (index, value) (// dacă se găsește numărul necesar, atunci.. if (value === find) ( // imprimați-l în console console.log("Ura! Numărul " + find + " a fost găsit! Acest număr are un index: " + index); // întrerupe bucla return false; ) altfel ( // altfel imprimă numărul curent pe consolă console.log("Număr curent: " + valoare); ) )); /* Rezultat (în consolă): Număr curent: 5 Număr curent: 4 Ura! Numărul 7 găsit! Acest număr are un index: 2 */

Cum se trece la următoarea iterație (fiecare continuă)?

În fiecare, întreruperea iterației curente și trecerea la următoarea se face folosind instrucțiunea return, care trebuie să aibă altă valoare decât false.

// tablou format din numere var arr = ; // o matrice care trebuie sa contina toate elementele matricei arr, cu exceptia numerelor pare var newarr = ; // iterează peste matricea arr $.each(arr, function (index, value) ( ​​​​// dacă elementul este par, apoi omite-l dacă (valoare % 2 === 0) ( // întrerupe iterația curentă și treceți la următorul return; ) // adaugă valoare matricei newarr newarr.push(valoare); )); console.log("Matrice inițială (arr): " + arr.join()); console.log("Matrice rezultată (newarr): " + newarr.join()); /* Rezultat (în consolă): Matrice inițială (arr): 3,5,4,9,17,19,30,35,40 Matrice rezultată (newarr): 3,5,9,17,19,35 */

Buclă prin elementele curente (.fiecare)

Sintaxa fiecărei metode (se aplică numai elementelor selectate):

.fiecare(funcție); // function - o functie care va fi executata pentru fiecare element al obiectului curent

Să vedem cum funcționează metoda .each folosind următorul exemplu (să repetăm ​​elementele div):

// după încărcarea DOM-ului paginii, executați $(function())( // repetați prin elementele div de pe pagină $("div").each(function (index, element) ( // index (număr) - indexul curent al iterației (ciclului) // această valoare este un număr // începe să se numere de la 0 și se termină cu numărul de elemente din setul curent minus 1 // element - conține o referință DOM la consola elementului curent. log("Index element Div: " + index + "; id element = " + $(element).attr("id")); )); )); // Rezultat: // Indexul elementului div: 0; element id = id1 // index element div: 1; element id = id2 // index element div: 2; element id = id3

În exemplul de mai sus, fiecare metodă utilizează setul curent (elementele selectate prin selectorul $("div")). Managerul fiecare metodă este întotdeauna o funcție care va fi executată pentru fiecare element din setul curent (în acest caz, pentru fiecare element div). Această funcție are 2 parametri opționali. Unul dintre ele (index) este numărul de serie al iterației curente, iar al doilea (element) este o legătură DOM către elementul curent. În plus, cuvântul cheie this este disponibil în interiorul funcției, care, ca și al doilea parametru, conține o referință DOM la elementul curent.

De exemplu, să transmitem în consolă valoarea atributului href pentru toate elementele din pagină:

$("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); ) )); // Dacă pe pagină se află următoarele linkuri: // Yandex // Cum funcționează JavaScript? // Bootstrap // Apoi, în consolă vom vedea următorul rezultat: // https://www.yandex.ru/ // http://getbootstrap.com/

De exemplu, să ne uităm la cum să organizăm fiecare buclă peste elementele DOM care au clasa de nume (să repetăm ​​peste toate elementele aceleiași clase).

Raspberry pi computer single-board Intel Galileo Gen2 $19 Pine A64 Plus // folosind funcția jQuery.each ($.each) $.each($(".name"),function(index,data) ( console.log( "Ordinal număr: " + index + " ; Conținut: " +$(date).text()); )); // folosind metoda jQuery .each $(".name").each(function(index,data) ( console.log("Ordinal: " + index + " ; Conținut: " +$(data).text( ) ); )); // Vom primi următorul răspuns: // Număr de ordine: 0 ; Conținut: Raspberry pi // Număr secvență: 1 ; Conținut: Intel Galileo Gen2 // Număr de secvență: 2 ; Continut: Pine A64 Plus

De exemplu, să ne uităm la cum să iterați prin toate elementele dintr-o pagină.

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

De exemplu, să afișăm valoarea tuturor elementelor de intrare pe pagină.

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

De exemplu, să repetăm ​​toate elementele copil situate în ul cu id="myList" (fiecare copil).

• HTML
• JavaScript

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

Să ne uităm la o modalitate de a determina ultimul index (articol) în fiecare metodă a jQuery.

// selectează elemente var myList = $("ul li"); // determina numarul de elemente din selectie var total = myList.length; // iterează prin elementele selectate myList.each(function(index) ( if (index === total - 1) ( // acesta este ultimul element din selecție ) ));