Foreach js pentru matrice și colecții. Cum se creează o matrice asociativă în JavaScript. pentruFiecare metodă și metode aferente

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 in interiorul acestuia prin variabilele corespunzatoare. Primul parametru este numărul de serie al elementului (numărând de la 0). Al doilea parametru este valoarea elementului de matrice curent.


// 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ă Forța brută JavaScript obiecte. 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 .

// 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.log("Ura! Numărul " + find + " este găsit! Acest număr are un index: " + index // întrerupe bucla return false ) altfel ( // imprimă numărul curent în 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(value )); 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) - indicele curent al iterației (ciclului) // valoare dată este un număr // începe să numere de la 0 și se termină cu numărul de elemente din setul curent minus 1 // element - conține o legătură DOM către elementul curent console.log("Index element Div: " + index + "; element id = " + $( element).attr("id");

Î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 optionali. 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, este disponibil în interiorul funcției cuvânt cheie this , 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( "Comandă) număr: " + index + " ; Conținut: " +$(date).text()); // folosind metoda jQuery .each $(".name").each(function(index,data) ( console.log("Ordinal: " + index + " ; Continut: " +$(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ă repetăm ​​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

// 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 ) ));

Nu cu mult timp în urmă a trebuit să creez o matrice asociativă în JavaScript. În mod surprinzător, nu am avut niciodată nevoie de el în JavaScript înainte. Am căutat pe internet cum să o fac. Și am fost foarte surprins că un număr mare de oameni au scris că acest lucru este imposibil, nu există în JavaScript. Din fericire, mulți ani de experiență mi-au spus că vorbeau prostii. Așa că, în sfârșit, am învățat cum să creez o matrice asociativă în JavaScript, ceea ce voi trata în acest articol.

Mai jos este codul în care se creează o matrice asociativă, apoi se adaugă un alt element și, în final, se trece în buclă matricea:


var array = ("Nume": "Michael", "Vârsta": "22", "Țara": "Rusia"); // Creați un tablou asociativ
matrice["adaugă"] = 15; // Adăugați un alt element
/* Iterează printr-o matrice asociativă și imprimă cheile și valorile lor */
pentru (var i în matrice)
alert("Cheie = " + i + "; Valoare = " + matrice[i]);

În acest articol, ne-am uitat la crearea de tablouri asociative, modificarea acestora, precum și căutarea exhaustivă pentru buclă. Eu personal am folosit tablouri asociativeîn JavaScript o singură dată, dar cu siguranță trebuie să știți despre această posibilitate.

  • I. Iterarea peste matrice reale
  • pentruFiecare metodă și metode aferente
  • pentru buclă
  • Utilizare adecvată pentru...în buclă
  • 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. Enumerarea tablourilor reale On în acest moment Există trei moduri de a repeta 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 mai sus versiuni timpurii, care sunt încă în uz ici și colo.

    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 conceput pentru a repeta peste toate elementele unei matrice, dar pe lângă aceasta, ES5 oferă mai multe metode utile pentru a itera toate sau unele elemente și pentru a efectua unele acțiuni cu acestea:

    • 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 de matrice 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 critice pentru performanță a codului (ceea ce este puțin probabil), atunci puteți utiliza o versiune „mai optimă” a pentru care stochează lungimea matrice:

    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(cheie) && /^0$|^\d*$/.test(cheie) && tasta 0) ( rezultat = adevărat; ) returnează rezultat; ); var trecut = numere.fiecare(conditie); document.write(a trecut); // fals

    Metodei every() primește o funcție care reprezintă condiția ca parametru. Această funcție are trei parametri:

    Condiția funcției (valoare, index, matrice) ( )

    Parametrul value reprezintă elementul matrice curent care este iterat, parametrul index reprezintă indexul acelui element, iar parametrul matrice transmite o referință matricei.

    În această funcție putem verifica valoarea elementului transmis pentru conformitatea cu o anumită condiție. De exemplu, în acest exemplu verificăm fiecare element al matricei pentru a vedea dacă este mai mare decât zero. Dacă este mai mare, atunci returnăm valoarea true , adică elementul îndeplinește condiția. Dacă este mai mică, returnați false - elementul nu îndeplinește condiția.

    Ca rezultat, atunci când este apelată metoda numbers.every(condition), aceasta iterează prin toate elementele matricei numere și le trece unul câte unul la funcția de condiție. Dacă această funcție returnează adevărat pentru toate elementele, atunci metoda every() returnează adevărat. Dacă cel puțin un element nu se potrivește cu condiția, atunci metoda every() returnează false .

    unele()

    Metoda some() este similară cu metoda every(), doar că verifică dacă cel puțin un element se potrivește cu o condiție. Și în acest caz, metoda some() returnează true . Dacă nu există elemente care să corespundă condiției din matrice, se returnează false:

    Numerele var = [ 1, -12, 8, -4, 25, 42 ]; condiție funcție(valoare, index, matrice) ( var rezultat = fals; if (valoare === 8) ( rezultat = adevărat; ) returnează rezultat; ); var trecut = numere.unele(conditie); // adevărat

    filtra()

    Metoda filter(), ca some() și every() , acceptă o funcție de condiție. Dar, în același timp, returnează o matrice a acelor elemente care îndeplinesc această condiție:

    Numerele var = [ 1, -12, 8, -4, 25, 42 ]; condiție funcție(valoare, index, matrice) ( var rezultat = fals; if (valoare > 0) ( rezultat = adevărat; ) returnează rezultat; ); var FilteredNumbers = numere.filtru(conditie); pentru(var i=0; i< filteredNumbers.length; i++) document.write(filteredNumbers[i] + "
    ");

    Ieșire browser:

    1 8 25 42

    forEach() și map()

    Metodele forEach() și map() iterează peste elemente și efectuează anumite operații asupra acestora. De exemplu, pentru a calcula pătratele numerelor dintr-o matrice, puteți utiliza următorul cod:

    Numerele var = [1, 2, 3, 4, 5, 6]; pentru(var i = 0; i