Javascript în buclă printr-o matrice. Matrice: iterație asupra metodelor. I. Iterarea asupra matricelor reale

12 martie 2016

În JavaScript-ul modern, există așa-numitele „metode de iterație” care sunt folosite pentru a itera peste matrice. În acest tutorial, vom analiza următoarele metode:

pentru fiecare

Se folosește metoda .forEach () forta bruta matrice. Apelează așa-numita funcție de apel invers, cu ajutorul căreia sunt trecuți trei parametri element, i, arr, unde:

item - element de matrice;
i este numărul ordinal al matricei;
arr este matricea în sine care ar trebui să fie repetată.

Pentru a ușura înțelegerea modului de utilizare a acestei metode, luați în considerare un exemplu:

Var user = ["admin", "pass", 31]; user.forEach (funcție (element, i, utilizator) (alertă ("Valoarea articolului #" + i + ":" + element);));

Această metodă poate fi utilizată în loc de o buclă normală.

filtru

Metoda .filter () este utilizată pentru filtrare, folosește și funcția de apel invers, dar creează o nouă matrice dacă elementele din matrice se potrivesc cu adevărat:

Var arr =; var newArr = arr.filter (funcție (număr) (returnează numărul< 0; }); alert(newArr); // выведет -34,-4

Acest exemplu verifică numerele pentru valori negative și generează o nouă matrice cu aceste valori. Puteți veni cu propriile condiții, nu trebuie să fie deloc cifre.

fiecare / unii

Aceste două metode sunt similare între ele și ambele sunt folosite pentru a verifica o matrice, doar metoda . fiecare () returnează adevărat dacă toate valorile din matrice corespund condiției specificate și metodei .niste () returnează adevărat dacă cel puțin o valoare corespunde condiției:

Var arr =; alert (arr. fiecare (funcție (număr)) (întoarcere număr< 0; })); // выведет false

Sper că este clar că dacă s-a folosit exemplul de mai sus vreo metodă atunci am afișa valoarea true, în loc de false.

Hartă

Metoda map () transformă matricea și primește una nouă din aceasta. Totul se face apelând funcția de apel invers:

Var arr =; var newArr = arr.map (funcție (număr) (returnează numărul * 2;)); alert (newArr);

În acest exemplu, am obținut o nouă matrice cu valori de element dublate.

reduce / reduceRight

Ultimele metode pe care le vom analiza sunt reduce și reduceRight. Acestea sunt utilizate pentru a procesa fiecare element al matricei în timp ce stochează rezultatul intermediar. Metoda iterează peste fiecare element de la stânga la dreapta, reduce Dreapta în sens invers. Spre deosebire de alte metode, pe lângă funcția de apel invers, argumentul initialValue este de asemenea specificat aici - „valoarea inițială”. În plus, „rezultatul intermediar” este indicat în funcția de apel invers - Valoare anterioarăși currentItem- elementul curent al matricei.

Să luăm un exemplu:

Funcția getSums (arr) (var result =; if (! Arr.length) return result; var totalSum = arr.reduceRight (function (sum, item) (result.push (sum); return sum + item;)); result .push (totalSum); rezultat returnat;) alert (getSums ()); // 1,3,6,10,15

Ce s-a întâmplat în acest exemplu? Am creat o funcție care vă permite să obțineți o nouă matrice cu elemente create din suma celor precedente. Mai mult, raportul elementelor vine de la final. Iată un exemplu mai simplu, în care am creat o funcție care numără suma elementelor dintr-o matrice:

Funcția getSum (arr) (var result = arr.reduce (funcție (suma, curent) (returnează suma + curent)); returnează rezultatul;); alert (getSum ()); Etichete:

I. Iterarea asupra matricelor reale
1. Pentru fiecare metodă și metode conexe
2. Pentru buclă
3. Utilizarea corectă a buclei pentru ... în buclă
4. Pentru ... de buclă (utilizarea implicită a unui iterator)
5. Utilizarea explicită a unui iterator
II. În buclă prin obiecte de tip matrice
1. Folosind metode pentru a itera peste matrice reale
2. Conversia într-o matrice reală
3. O notă despre obiectele de execuție

I. Iterarea asupra matricelor reale

În acest moment, există trei moduri de a itera peste elementele unui tablou real:

Array.prototype.forEach fiecare metodă;
clasic pentru bucla;
Un „bine format” pentru ... în buclă.

În plus, în curând, odată cu apariția noului standard ECMAScript 6 (ES 6), se așteaptă încă două modalități:

pentru ... de buclă (utilizarea implicită a unui iterator);
utilizarea explicită a unui iterator.

1. Metoda forEach și metodele conexe

Dacă proiectul dvs. este conceput pentru a sprijini capabilitățile standardului ECMAScript 5 (ES5), puteți utiliza una dintre inovațiile sale - metoda forEach.

Exemplu de utilizare:

Var a = ["a", "b", "c"]; a.forEach (function (entry) (console.log (entry);));

În general, utilizarea forEach necesită conectarea bibliotecii de emulare es5-shim pentru browserele care nu au suport nativ pentru această metodă. Acestea includ IE 8 și versiunile anterioare, care sunt încă în uz astăzi.

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

Dacă sunteți îngrijorat de costul potențial al apelării unui apel invers pentru fiecare articol, nu vă faceți griji și citiți acest lucru.

forEach este conceput pentru a itera pe toate elementele unui tablou, dar pe lângă acesta ES5 oferă mai multe metode utile pentru iterarea asupra tuturor sau a unora dintre elemente, plus efectuarea unor acțiuni cu acestea:

every - returnează true dacă pentru fiecare element al matricei callback returnează o valoare care este exprimată la true.
some - returnează true dacă pentru cel puțin un element al tabloului callback returnează o valoare care este exprimată la true.
filtru - creează o nouă matrice care conține acele elemente ale matricei originale pentru care apelul returnează adevărat.
hartă - creează o nouă matrice formată din valorile returnate de apelul invers.
reduce - reduce o matrice la o singură valoare, aplicând apelul la rândul său la fiecare element al matricei, începând cu primul (poate fi util pentru calcularea sumei elementelor matricei și a altor funcții finale).
reduceRight - funcționează în mod similar pentru a reduce, dar repetă elementele în ordine inversă.

2. Bucla for

Vechi pentru reguli:

Var a = ["a", "b", "c"]; index var; for (index = 0; index< a.length; ++index) { console.log(a); }

Dacă lungimea matricei nu se schimbă pe întreaga buclă, iar bucla în sine aparține unei bucăți de cod critice pentru performanță (ceea ce este puțin probabil), atunci puteți utiliza versiunea „mai optimă” pentru pentru cu stocarea lungimii matricea:

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index< len; ++index) { console.log(a); }

În teorie, acest cod ar trebui să ruleze puțin mai rapid decât cel anterior.

Dacă ordinea de iterație nu este importantă, atunci puteți merge chiar mai departe în ceea ce privește optimizarea și puteți scăpa de variabila pentru stocarea lungimii tabloului prin schimbarea ordinii de iterație la opus:

Var a = ["a", "b", "c"]; index var; for (index = a.length - 1; index> = 0; --index) (console.log (a);)

Cu toate acestea, în motoarele JavaScript moderne, aceste jocuri optimizate nu înseamnă de obicei nimic.

3. Utilizarea corectă a buclei pentru ... în buclă

Dacă vi se recomandă să utilizați o buclă pentru ..., nu uitați că iterarea peste matrice nu este destinată. Contrar concepției greșite obișnuite, bucla for ... in nu iterează peste indicii matricei, ci proprietățile enumerate ale obiectului.

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 unele precauții, așa cum se arată în exemplul de mai jos:

// a este un tablou rar var a =; a = "a"; a = "b"; a = "c"; for (var key in a) (if (a.hasOwnProperty (key) && /^0$|^d*$/.test(key) && key<= 4294967294) { console.log(a); } }

În acest exemplu, la fiecare iterație a buclei, se efectuează două verificări:

că matricea are propria proprietate numită cheie (care nu este moștenită de la prototipul său).
acea cheie este un șir care conține notația zecimală a unui număr întreg a cărui valoare este mai mică de 4294967294. De unde vine ultimul număr? Din definiția unui index de matrice în ES5, din care rezultă că cel mai mare indice pe care un element dintr-o matrice îl poate avea: (2 ^ 32 - 2) = 4294967294.

Desigur, astfel de verificări vor ocupa timp suplimentar la executarea buclei. Dar, în cazul unei matrice rare, această metodă este mai eficientă decât o buclă for, deoarece în acest caz sunt repetate numai acele elemente care sunt definite în mod explicit în matrice. Deci, în exemplul de mai sus, vor fi efectuate doar 3 iterații (pentru indicii 0, 10 și 10000) - versus 10001 în bucla for.

Pentru a nu scrie un cod atât de greoi de verificări de fiecare dată când trebuie să iterați pe o matrice, îl puteți proiecta ca o funcție separată:

Funcție arrayHasOwnIndex (array, key) (returnare array.hasOwnProperty (key) && /^0$|^d*$/.test(key) && key<= 4294967294; }

Apoi corpul buclei din exemplu va fi redus semnificativ:

Pentru (cheie în a) (dacă (arrayHasOwnIndex (a, cheie)) (console.log (a);))

Codul de verificare de mai sus este universal, potrivit pentru toate cazurile. Dar, în schimb, puteți utiliza o versiune mai scurtă, deși formal nu este destul de corectă, dar totuși potrivită pentru majoritatea cazurilor:

Pentru (cheie în a) (dacă (a.hasOwnProperty (cheie) && String (parseInt (cheie, 10)) === cheie) (console.log (a);))

4. For ... of loop (utilizarea implicită a unui iterator)

ES6, deși este încă în starea de proiect, ar trebui să introducă iteratorii în JavaScript.

Un iterator este un protocol implementat prin obiecte care definește o modalitate standard de a obține o secvență de valori (finite sau infinite).
Un obiect are un iterator dacă metoda next () este definită în el - o funcție fără argumente care returnează un obiect cu două proprietăți:

done (boolean) - adevărat dacă iteratorul a ajuns la sfârșitul secvenței care este iterată. În caz contrar, fals.
valoare - definește valoarea returnată de iterator. Poate fi nedefinit (absent) dacă proprietatea realizată este adevărată.

Multe obiecte încorporate, incl. matricele reale au iteratori impliciti. Cea mai simplă modalitate de a utiliza un iterator pe tablouri reale este de a folosi noul pentru ... de construct.

Un exemplu de utilizare pentru ... din:

Var val; var a = ["a", "b", "c"]; for (val of a) (console.log (val);)

În exemplul de mai sus, bucla for ... of apelează implicit iteratorul obiectului Array pentru a obține fiecare valoare din matrice.

5. Utilizarea explicită a unui iterator

Iteratorii pot fi folosiți în mod explicit, totuși, în acest caz, codul devine mult mai complicat în comparație cu for ... of loop. Arată așa:

Var a = ["a", "b", "c"]; intrare var; while (! (entry = a.next ()). done) (console.log (entry.value);)

II. În buclă prin obiecte de tip matrice

În plus față de matricele reale, JavaScript conține și obiecte asemănătoare matricei ... Ceea ce au în comun cu matricele reale este că au o proprietate de lungime și proprietăți cu nume sub formă de numere corespunzătoare elementelor matricei. Exemplele includ DOM-ul colecției NodeList și argumentele pseudo-matrice disponibile în cadrul oricărei funcții / metode.

1. Utilizarea metodelor de iterație peste matrice reale

Cel puțin majoritatea, dacă nu toate, metodele de iterație peste matrice reale pot fi utilizate pentru a itera peste obiecte asemănătoare matricei.

Pentru și pentru ... în construcții pot fi aplicate obiectelor asemănătoare matricei exact în același mod ca și matricelor reale.

forEach și alte metode Array.prototype se aplică și obiectelor asemănătoare matricei. Pentru a face acest lucru, trebuie să utilizați un apel către Function.call sau Function.apply.

De exemplu, dacă doriți să aplicați pentru fiecare la proprietatea childNodes a unui obiect Node, o puteți face astfel:

Array.prototype.forEach.call (node.childNodes, funcție (copil) (// faceți ceva cu obiectul copil));

Pentru ușurința reutilizării acestei tehnici, puteți declara o referință la metoda Array.prototype.forEach într-o variabilă separată și o puteți folosi ca o prescurtare:

// (Aceasta presupune că tot codul de mai jos este în același domeniu) var forEach = Array.prototype.forEach; // ... forEach.call (node.childNodes, function (child) (// face ceva cu obiectul child));

Dacă un obiect de tip matrice are un iterator, atunci acesta poate fi utilizat în mod explicit sau implicit pentru a itera peste obiect în același mod ca și pentru matricele reale.

2. Convertiți într-o matrice reală

Există, de asemenea, un alt mod foarte simplu de a itera peste un obiect asemănător matricei: convertiți-l într-un tablou real și utilizați oricare dintre metodele de mai sus pentru a itera peste matricele reale. Pentru conversie, puteți utiliza metoda generică Array.prototype.slice, care poate fi aplicată oricărui obiect de tip matrice. Acest lucru se face foarte simplu, așa cum se arată în exemplul de mai jos:

Var trueArray = Array.prototype.slice.call (arrayLikeObject, 0);

De exemplu, dacă doriți să convertiți o colecție NodeList într-o matrice reală, aveți nevoie de cod ca acesta:

Var divs = Array.prototype.slice.call (document.querySelectorAll ("div"), 0);

3. O notă privind obiectele de execuție

Dacă aplicați metode Array.prototype obiectelor runtime (cum ar fi colecțiile DOM), atunci ar trebui să aveți în vedere faptul că aceste metode nu sunt garantate să funcționeze corect în toate mediile runtime (inclusiv browserele). Depinde de comportamentul unui anumit obiect într-un anumit runtime, mai precis, de modul în care operația abstractă HasProperty este implementată în acest obiect. Problema este că standardul ES5 în sine permite posibilitatea unui comportament incorect al obiectului cu privire la această operațiune (a se vedea §8.6.2).

Prin urmare, este important să testați funcționarea metodelor Array.prototype în fiecare runtime (browser) în care intenționați să utilizați aplicația.

Buna! Continuăm să studiem metodele matricei și în această lecție vom analiza metodele de iterație asupra matricei. Aceste metode vă permit să parcurgeți o matrice și să efectuați acțiuni specifice asupra elementelor sale. Da, am uitat să spun că toate aceste metode nu sunt acceptate în IE 8. Deși este atât de important acum că nu sunt acceptate de acest browser, dar totuși, dacă doriți suport pentru IE8, atunci ES5-shim vă va ajuta. Și vom continua

Pentru fiecare metodă

Această metodă este utilizată pentru a itera peste matrice într-o buclă, dar poate fi transmisă o funcție în care puteți face anumite acțiuni asupra elementelor matricei. Să vedem un exemplu.

Var mas = ["Banana", "Avocado", "Morcov"]; mas.forEach (funcție (item, i, mas) (alert (i + ":" + item + "(matrice:" + mas + ")");));

Aici, în exemplu, o funcție este transmisă metodei forEach în care sunt specificați 3 parametri:

articol- element de matrice

eu- numărul elementului matricei

mas- matricea care este procesată.

Această metodă poate fi utilizată în locul unei bucle for pentru a itera pe o matrice.

Metoda filtrului

Această metodă, la fel ca metoda forEach, este utilizată pentru a itera peste o matrice și o funcție îi este transmisă ca argument, dar vă permite să filtrați matricea și să returnați o matrice nouă, care conține doar acele elemente pentru care funcția care trecem la această metodă va reveni adevărat.

Un pic confuz, așa că să ne uităm la un exemplu.

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

În exemplu, există o matrice cu numere și trebuie să obținem o altă matrice, care ar conține doar numere pozitive din matricea originală. Pentru a face acest lucru, aplicăm metoda de filtrare a matricei și apelăm o funcție care va verifica fiecare element, adică va returna toate numerele pozitive, iar rezultatul va fi stocat într-o altă matrice în exemplu, acesta este positiveNum.

Metoda hărții

Metoda hărții creează o altă matrice, care va consta în rezultatele apelării funcției matricei originale, dar în această funcție, unele acțiuni vor avea loc pe elementele matricei originale și rezultatul va apărea în noua matrice ca. Să luăm un exemplu, altfel cred că este complet de neînțeles.

Var mas =; var newMas = mas.map (function (item) (return return item * item;)); // a primit o matrice cu alerte pătrate (newMas); // 1,4,9

În exemplu, există o matrice inițială cu numere, i se aplică metoda hărții în care fiecare element al matricei este multiplicat de la sine și rezultatul este scris într-o altă matrice. Ca rezultat, obținem o matrice cu pătratele numerelor matricei originale.

Fiecare / unele metode

Aceste metode verifică dacă elementul este prezent în matrice. Acestea fac acest lucru printr-o funcție care le este transmisă ca parametru, adică dacă această funcție revine adevărată, atunci metoda în sine va reveni adevărată. Mai mult, fiecare metodă necesită ca fiecare element să se potrivească cu starea funcției, iar metoda some necesită cel puțin o potrivire. Și ca întotdeauna, iată un exemplu.

Var mas =; funcția isPositiv (num) (returnează num> 0;) if (mas.every (isPositiv)) (document.write ("Matricea conține doar numere pozitive");) else (document.write ("Matricea conține cel puțin una număr negativ ");) if (mas.some (isPositiv)) (document.write (" Există cel puțin un număr pozitiv în matrice ");) else (document.write (" Nu există numere pozitive în matrice ");)

Să luăm în considerare un exemplu, avem o matrice cu numere pozitive și negative și trebuie să o verificăm pentru prezența a cel puțin un număr negativ. Pentru a face acest lucru, folosim toate metodele. Creăm o funcție care va returna numere pozitive și apoi o vom transmite fiecărei metode, deoarece această metodă returnează un rezultat boolean, apoi este utilizată în instrucțiuni condiționale. Fiecare metodă din exemplul nostru va reveni fals deoarece există numere negative în matrice, dar metoda some va reveni adevărată deoarece există cel puțin un număr pozitiv în matrice.

reduce / reduceRight

Dacă trebuie să iterați pe o matrice, puteți utiliza pentru fiecare, pentru sau pentru..of.

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

Metode arr.reduceși arr.reduceRight similar metodelor de mai sus, dar puțin mai complexe. Acestea sunt utilizate pentru a calcula o singură valoare pe baza întregului tablou.

Sintaxă:

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

Funcția este aplicată pe rând la toate elementele matricei și „reportează” rezultatul acesteia la următorul apel.

Argumente:

precedentValor - rezultatul apelului anterior la această funcție, egal cu inițialul la primul apel (dacă inițialul este trecut),
item - următorul element al matricei,
index - indexul său,
matricea este matricea în sine.

Când se apelează o funcție, rezultatul apelului său pe elementul anterior al tabloului este transmis ca primul argument.

Sună complicat, dar devine mai ușor dacă vă gândiți la primul argument ca „acumulând” rezultatul apelurilor de funcții anterioare. La terminare, devine rezultatul reducerii.

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

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

Să arr =; let result = arr.reduce ((sumă, curent) => sumă + curent, 0); alertă (rezultat); // 15

Aici am folosit cea mai comună reducere, care acceptă doar 2 argumente.

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

Prima dată când rulați suma, este inițială (ultimul argument de redus), care este 0, iar curentul este primul element din matrice, egal cu 1. Deci rezultatul funcției este 1.
În cea de-a doua rulare, suma = 1, iar la aceasta adăugăm al doilea element al matricei (2).
La a treia rundă, suma = 3, la care adăugăm următorul articol și așa mai departe ...

Fluxul de calcul este după cum urmează:

Sub forma unui tabel, unde fiecare rând este un apel de funcție pe următorul element al tabloului:

	sumă	actual	rezultat
primul apel		1	1
al doilea apel	1	2	3
al treilea apel	3	3	6
al patrulea apel	6	4	10
a cincea chemare	10	5	15

Aici puteți vedea clar cum rezultatul apelului anterior este trecut la primul argument al celui următor.

De asemenea, putem omite valoarea inițială:

Să arr =; // a eliminat valoarea inițială (nr 0 la final) let result = arr.reduce ((sumă, curent) => sumă + curent); alertă (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 enumerarea începe de la a doua.

Tabelul de calcul va fi același minus primul rând.

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

Iată un exemplu:

Să arr =; // Eroare: Reducerea matricei goale fără valoare inițială // dacă ar exista o valoare inițială, reducerea o va returna pentru o matrice goală. arr.reduce ((sumă, curent) => sumă + curent);

Rezultate

Deci, pentru a rezuma, am analizat diferite metode de lucru cu matricele într-o buclă, toate aceste metode au un lucru în comun: toate trebuie să treacă o funcție ca argument.

forEach - pentru a itera pe o matrice într-o buclă.
filter - pentru a filtra matricea. Returnează o nouă matrice filtrată
every / some - pentru a verifica matricea pentru prezența elementelor individuale.
hartă - pentru a converti o matrice într-o matrice. Returnează matricea transformată originală.
reduce / reduceRight - Calculează o valoare din întreaga matrice apelând o funcție pentru fiecare element și trecând rezultatul intermediar între apeluri. Poate fi folosit pentru a calcula suma elementelor unui tablou.

Sarcini

Obțineți o nouă matrice

Să se dea o matrice var mas = ["HTML", "CSS", "JavaScript", "Pascal"] trebuie să utilizați metoda hărții pentru a obține o matrice nouă care va conține lungimile fiecărui element al matricei originale.

Filtrați matricea

Există o matrice var mas = trebuie să utilizați metoda de filtrare pentru a obține o matrice care conține doar 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 mic videoclip despre metodele de iterație pe o matrice într-o buclă.

Funcționează așa:

// CERĂ ECMASCRIPT 2015+ var s, myStringArray = ["Hello", "World"]; for (s of myStringArray) (// ... face ceva cu s ...)

Sau mai bine, de vreme ce ECMAScript 2015 expune, de asemenea, variabile cu domeniu de bloc folosind let și const:

// CERĂ ECMASCRIPT 2015+ const myStringArray = ["Hello", "World"]; for (const s of myStringArray) (// ... face ceva cu s ...) // s nu mai este definit aici

O notă privind matricile rare: este posibil ca o matrice în JavaScript să nu stocheze atâtea elemente, așa cum este specificat în lungimea sa; acest număr raportat este cu doar unul mai mare decât cel mai mare indice la care este stocată valoarea. Dacă un tablou conține mai puține elemente decât cele specificate în lungimea sa, se spune că este rar. De exemplu, este perfect legal să aveți o matrice cu elemente numai la indicii 3, 12 și 247; Lungimea unei astfel de matrice este listată ca 248, chiar dacă 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 să răspundeți: doriți să iterați pe întregul interval specificat de lungimea sa și să tratați nedefinit pentru orice elemente lipsă sau doriți doar să procesați numai elemente prezente de fapt? Există multe aplicații pentru ambele abordări; depinde doar pentru ce folosiți tabloul.

Dacă iterați peste matrice folosind for .. of, corpul buclei este executat în funcție de lungime, iar variabila de control a buclei este setată la nedefinită pentru orice elemente care nu sunt de fapt prezente î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ă luați o abordare diferită.

Desigur, unii dezvoltatori nu au de ales decât să adopte o abordare diferită oricum, deoarece, dintr-un anumit motiv, vizează o versiune de JavaScript care nu este încă acceptată de pentru ... de.

Atâta timp cât implementarea JavaScript este compatibilă cu versiunea anterioară a specificației ECMAScript (care, de exemplu, exclude versiunile Internet Explorer înainte de 9), puteți utiliza metoda Array # forEach iterator î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 (funcții) (// ... faceți ceva cu s ...));

Spre deosebire de ... of, .forEach apelează doar funcția pentru elementele care conțin de fapt valori. Dacă treceți în matricea noastră ipotetică cu trei elemente și lungimea 248, aceasta va apela funcția doar de trei ori, nu de 248 ori. De asemenea, face distincția între elementele lipsă și elementele care sunt de fapt setate la nedefinite; pentru acesta din urmă, va apela în continuare funcția, trecând 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ă ... de.

Ultima opțiune, care funcționează în toate versiunile de JavaScript, este o buclă explicită de numărare. Numai că numărați de la 0 la unul mai puțin decât lungimea și utilizați contorul ca index. Bucla principală arată astfel:

Unul dintre avantajele acestei abordări este că puteți alege cum să gestionați matricele rare; Codul de mai sus va rula corpul buclei pe toată lungimea cu s setat la nedefinit pentru orice elemente lipsă, cum ar fi pentru .. of. Dacă, în schimb, doriți să gestionați doar elemente matrice rare din lumea reală, cum ar fi .forEach, puteți adăuga o verificare simplă la indexul din:

Var i, s, myStringArray = ["Hello", "World"], len = myStringArray.length; pentru (i = 0; i

Atribuirea lungimii unei variabile locale (spre deosebire de includerea expresiei complete myStringArray.length în condiția buclei) poate avea un impact semnificativ asupra myStringArray.length asupra performanței, deoarece omite căutarea proprietății de fiecare dată până la final; folosind Rhino pe mașina mea, viteza este de 43%.

Puteți vedea că stocarea în cache a lungimii se face în clauza de inițializare a buclei, astfel:

Var i, len, myStringArray = ["Hello", "World"]; for (len = myStringArray.length, i = 0; i

Sintaxa pentru ... menționată de alții este utilizată pentru a parcurge proprietățile unui obiect; întrucât un tablou din JavaScript este doar un obiect cu nume de proprietăți numerice (și o proprietate de lungime actualizată automat), teoretic puteți arunca matricea cu acesta. Dar problema este că nu se limitează la valorile proprietăților numerice (amintiți-vă că chiar metodele sunt de fapt doar proprietăți a căror valoare este o închidere) și nici nu se garantează repetarea în ordine numerică. Prin urmare, for ... în sintaxă nu ar trebui să fie folosită pentru a parcurge matricele.

Un articol în care vom analiza exemple folosind funcția și metoda jQuery fiecare bibliotecă.

Există 2 entități diferite în biblioteca jQuery numite fiecare.

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

A doua (fiecare) este o metodă care se aplică unei colecții de articole pentru a le parcurge.

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

Sintaxa pentru fiecare funcție este:

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

Să vedem exemple pentru a lucra cu fiecare funcție.

Exemplul nr. 1. În el, vom itera peste toate elementele matricei (matrice).

// o serie de 3 linii var arr = ["Mașină", "Camion", "Autobuz"]; // iterați peste matrice arr $ .each (arr, funcție (index, valoare) (// acțiuni care vor fi efectuate pentru fiecare element al matricei // indexul este indicele curent al elementului matricei (număr) // valoare este valoarea elementului matricei curente // tipăriți indexul și valoarea matricei pe consola consolă.log ("Index:" + index + "; Valoare:" + valoare);)); / * Rezultat (în consolă): Index: 0; Valoare: indicativ auto: 1; Valoare: Indicele camionului: 2; Valoare: autobuz * /

În codul de mai sus, fiecare funcție este utilizată pentru a itera pe o matrice. Funcția are 2 parametri necesari... Primul parametru este o entitate (matrice sau obiect), ale cărei elemente (proprietăți) trebuie repetate. Î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 disponibili în interiorul acestuia prin variabilele corespunzătoare. Primul parametru este numărul ordinal al elementului (numărarea se efectuează de la 0). Al doilea parametru este valoarea elementului matrice curent.

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

// un obiect smartphone cu 5 proprietăți var smartphone = ("nume": "LG G5 se", "an": "2016", "dimensiune ecran": "5.3", "rezoluție ecran": "2560 x 1440 "," os ":" Android 6.0 (Marshmallow) "); // buclați peste obiectul smartphone $ .each (smartphone, funcție (cheie, valoare) (// acțiuni care vor fi efectuate pentru fiecare proprietate a obiectului // cheie - numele curent al proprietății matricei // valoare - valoarea a proprietății curente a obiectului // afișați numele proprietății și valoarea acesteia în consola console.log ("Proprietate:" + cheie + "; Valoare:" + valoare);)); / * Rezultat (în consolă): Proprietate: nume; Valoare: LG G5 se Proprietate: an; Valoare: 2016 Proprietate: dimensiunea ecranului; Valoare: 5.3 Proprietate: rezoluție ecran; Valoare: 2560 x 1440 Proprietate: os; Valoare: Android 6.0 (Marshmallow) * /

Fiecare funcție poate fi utilizată pentru a itera peste obiecte JavaScript. Diferența de utilizare este doar că parametrii funcției de apel invers au valori diferite. Primul parametru stochează numele proprietății obiect, iar al doilea stochează valoarea acestei proprietăți.

Exemplul nr. 3. În el, vom itera o structură mai complexă (să vedem cum să folosim fiecare imbricat).

// un obiect format din 2 proprietăți. Fiecare proprietate a acestui obiect are ca valoare o matrice, ale cărei elemente sunt și obiecte var articles = ("Bootstrap": [("id": "1", "title": "Introducere"), ("id" : "2", "title": "Cum se instalează"), ("id": "3", "title": "Grilă")], "JavaScript": [("id": "4", " title ":" Noțiuni de bază "), (" id ":" 5 "," title ":" Selecția elementelor ")]); $ .each (articole, funcție (cheie, date) (console.log ("Secțiune:" + cheie); $ .each (date, funcție (index, valoare)) (console.log ("Articol: id =" + valoare ["id"] + "; Title =" + valoare ["title"]);));)); / * Rezultat: Secțiune: Bootstrap Articol: id = 1; Titlu = Introducere Articol: id = 2; Titlu = Cum se instalează articolul: id = 3; Titlu = Secțiune grilă: Articol JavaScript: id = 4; Titlu = Articol de bază: id = 5; Nume = Selecția elementelor * /

Cum pot întrerupe fiecare (ies din buclă)?

Bucla fiecare este întreruptă cu o instrucțiune return, care trebuie să returneze false.

De exemplu, vom întrerupe execuția fiecărei bucle după ce vom găsi numărul 7 în matricea arr:

// matrice de 5 numere var arr =; // numărul de găsit var find = 7; // iterați peste matricea arr $ .each (arr, funcție (index, valoare) (// dacă se găsește numărul necesar, atunci .. if (valoare === găsi) (// imprimați-l în consola consolă. log ("Ura! Numărul" + găsi + "găsit! Acest număr are un index:" + index); // anulați execuția buclei returnează fals;) altfel (// în caz contrar, imprimați numărul curent pe consola consolă. 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 indice: 2 * /

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

În fiecare, executarea iterației curente este întreruptă și trecerea la următoarea se efectuează folosind instrucțiunea return, care trebuie să aibă o altă valoare decât falsă.

// matrice de numere var arr =; // o matrice care trebuie să conțină toate elementele matricei arr, cu excepția numerelor pare var newarr =; // iterați peste matricea arr $ .each (arr, funcție (index, valoare) (// dacă elementul este egal, omiteți-l dacă (valoare% 2 === 0) (// întrerupeți iterația curentă și mutați la următoarea returnare;) // adaugă valoare matricei newarr newarr.push (valoare);)); console.log ("Original array (arr):" + arr.join ()); console.log ("Matrice de rezultate (newarr):" + newarr.join ()); / * Rezultat (în consolă): Matrice originală (arr): 3,5,4,9,17,19,30,35,40 Matrice de rezultate (newarr): 3,5,9,17,19,35 * /

Iterarea asupra elementelor curente (.each)

Sintaxa pentru fiecare metodă (se aplică numai elementelor selectate):

.fiecare (funcție); // funcție - o funcție care va fi executată pentru fiecare element al obiectului curent

Să vedem cum funcționează metoda.each cu următorul exemplu (iterând peste elemente div):

În exemplul de mai sus, fiecare metodă utilizează setul curent (elemente selectate cu selectorul $ ("div")). Handlerul pentru 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 ordinalul iterației curente, iar al doilea (element) este referința DOM la elementul curent. În plus, acest cuvânt cheie este disponibil în interiorul funcției, care, ca și al doilea parametru, conține o referință DOM la elementul curent.

De exemplu, să imprimăm pe consolă valoarea atributului href pentru toate elementele de pe pagină:

$ ("a"). each (function () (console.log ($ (this) .attr ("href"));));

$ ("a"). fiecare (funcție () (var link = $ (this) .attr ("href"); if ((link.indexOf ("http: //") == 0) || (link .indexOf ("https: //") == 0)) (console.log ("link href =" + link);))); // Dacă pagina conține următoarele link-uri: // Yandex // Cum funcționează JavaScript? // Bootstrap // Apoi în consolă vom vedea următorul rezultat: // https://www.yandex.ru/ // http://getbootstrap.com/

De exemplu, să vedem cum să parcurgeți fiecare element DOM care are numele clasei (să parcurgem toate elementele aceleiași clase).

Raspberry pi

calcul cu o singură placă

Intel Galileo Gen2

19$

Pine A64 Plus

De exemplu, să aruncăm o privire la cum să iterați toate elementele unei pagini.

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

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

De exemplu, să repetăm toți copiii aflați în ul cu id = "lista mea" (fiecare copil).

HTML
JavaScript

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

// select item var myList = $ ("ul li"); // determinați numărul de elemente din selecția var total = myList.length; // iterați peste elementele selectate myList.each (funcție (index) (if (index === total - 1) (// acesta este ultimul element din selecție))));