JavaScript traversează o matrice. Toate modalitățile de a itera printr-o matrice î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 î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ă prin 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 ) ));

22 de răspunsuri

După rularea acestui test cu majoritatea browserelor moderne...

În prezent, cea mai rapidă formă de buclă (și după părerea mea cea mai evidentă din punct de vedere sintactic).

standard pentru bucla de lungime în cache

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

Aș spune că acesta este cu siguranță un caz în care aplaud dezvoltatorii de motoare JavaScript. Timpul de rulare ar trebui optimizat pentru claritate, nu comoditate.

Din iunie 2016, mai multe teste în cel mai recent Chrome (71% din piața browserelor în mai 2016 și în creștere):

• Cea mai rapidă buclă este bucla, atât cu cât și fără lungime cache, care oferă performanțe foarte similare. (O buclă for cu o lungime în cache produce uneori rezultate mai bune decât una care nu este memorată în cache, dar diferența este aproape neglijabilă, ceea ce înseamnă că motorul poate fi optimizat în favoarea buclei standard și poate cea mai simplă fără cache).
• Bucla while cu scăderi a fost de aproximativ 1,5 ori mai lentă decât bucla for.
• O buclă care folosește o funcție de apel invers (de exemplu, standard forEach) a fost de aproximativ 10 ori mai lentă decât o buclă for.

Cred că acest fir este prea vechi și programatorii simt că trebuie să memoreze lungimea în cache sau să folosească intersecții cu scădere în spate pentru a obține performanțe mai bune, scriind cod mai puțin pretențios și mai predispus la erori decât o simplă buclă for. De aceea recomand:

Dacă aplicația dvs. iterează printr-o mulțime de elemente sau codul dvs. de buclă se află într-o funcție care este utilizată frecvent, o buclă dreaptă este răspunsul:

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

Dacă aplicația dvs. nu repetă cu adevărat peste o mulțime de elemente sau trebuie doar să faceți mici iterații ici și colo, utilizarea standardului forEach callback sau orice funcție similară din biblioteca dvs. JS aleasă poate fi mai curată și mai puțin predispusă la erori, deoarece indexul domeniul de aplicare al variabilei este privat și nu este nevoie să folosiți paranteze care accesează direct valoarea matricei:

Arr.forEach(funcție(valoare, index) ( // Faceți lucruri cu valoare sau index ));

Dacă într-adevăr trebuie să amestecați câteva milisecunde în timp ce repetați peste miliarde de rânduri, iar lungimea matricei nu se va schimba în acest proces, ați putea lua în considerare stocarea în cache a lungimii într-o buclă for. Deși cred că chiar nu este necesar în zilele noastre:

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

Este doar 2018, așa că o actualizare ar putea fi bună...

Și chiar trebuie să nu fiu de acord cu răspunsul acceptat. Depinde de diferite browsere. unii fac forEach mai repede, alții for-loop și alții while testează toate metodele http://jsben.ch/mW36e

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

și din moment ce puteți vedea o mulțime de bucle for(a = 0;...) precum for(a = 0;...) merită menționat că fără variabile „var” va fi definit la nivel global și acest lucru poate avea un impact semnificativ viteza, deci va fi lent.

var arr = arr = new Array(11111111).fill(255); var bancuri = [ [ „gol”, () =>< 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 = 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ă o altă modalitate 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 -

Buna ziua! În ultima lecție, ne-am uitat la ce sunt obiectele și de ce sunt necesare, iar astăzi ne vom uita la cum să lucrăm cu proprietățile unui obiect și cum să sortăm efectiv toate aceste proprietăți. În aceste scopuri, se folosește o buclă de proprietate for..in (puteți citi despre bucle în JavaScript).

Bucla pentru...in

Sintaxă:

Pentru (tastați obj) ( /* ... acțiuni cu obj ... */ )

Bucla for..in va itera secvențial prin proprietățile obiectului obj, scriind numele fiecărei proprietăți în cheie.

Declararea unei variabile într-o buclă for (cheia var în obj)

În această buclă puteți declara variabila cheie:

Pentru (tasta var în meniul 1) ( // ... )

Să ne uităm la un exemplu de iterare prin proprietățile unui obiect folosind o buclă for...in:

Meniu Var = (lățime: 400, înălțime: 300, titlu: „Meniul meu”); pentru (tasta var în meniu) ( // acest cod va funcționa pentru fiecare proprietate a obiectului // ..și va afișa numele proprietății și valoarea acesteia în consecință alert("Tasta: " + tasta + " valoare: " + meniu) ;)

Aș dori să vă atrag atenția asupra faptului că în exemplu am folosit meniul paranteze pătrate. Acest lucru se datorează faptului că dacă stocăm numele unei proprietăți într-o variabilă, atunci o putem accesa doar prin paranteze drepte, dar nu printr-un punct.

Buclă pentru...de

Există, de asemenea, o nouă buclă pentru parcurgerea obiectelor și a tablourilor. Sintaxa sa este foarte asemănătoare cu bucla for...in, dar diferențele sunt că nu scoate cheile sau indecșii matricei, ci valorile sale. Iată un exemplu:

Meniu Var = (lățime: 400, înălțime: 300, titlu: „Meniul meu”); pentru (tasta var a meniului) ( // acest cod va funcționa pentru fiecare proprietate a obiectului // ..și va afișa valoarea proprietății în consecință alert("valoare: " + tasta +","); //400, 300, „Meniul meu”)

Numărul de proprietăți dintr-un obiect

Dar dacă trebuie să știți numărul de proprietăți dintr-un obiect? Cum pot face acest lucru?

Din păcate, nu există soluții gata făcute pentru această problemă.

Cea mai ușoară modalitate este să parcurgeți proprietățile și să calculați după cum urmează:

Meniu Var = (lățime: 400, înălțime: 300, titlu: „Meniul meu”); var count = 0; for (tasta var în meniu) ( count++; ) alert("Total proprietăți: " + count);

Rezultate

• Pentru a itera prin proprietățile unui obiect, se folosește o buclă de taste: for (key in obj).

Sarcini Stabiliți dacă un obiect este gol

Creați o funcție isEmptyObject(obj) care returnează true dacă obiectul nu are proprietăți și false dacă există cel puțin o proprietate.

Ar trebui să funcționeze astfel:

Funcția isEmptyObject(obj) ( /* codul tău */ ) var obj = (); alert(isEmptyObject(obj)); // true obj["8:30"] = "ridicare"; alert(isEmptyObject(obj)); // fals

Calculați media aritmetică a tuturor proprietăților obiectului

Există un obiect salarial cu salarii. Scrieți un cod care va afișa media aritmetică a tuturor salariilor.
Dacă obiectul este gol, atunci rezultatul ar trebui să fie 0.
De exemplu.

Buna ziua! Continuăm să studiem metodele de matrice și în această lecție ne vom uita la metodele de iterare pe o matrice. Aceste metode vă permit să traversați o matrice și să efectuați anumite acțiuni 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 IE8, atunci ES5-shim vă va ajuta. Și vom continua

pentru fiecare metodă

Această metodă este folosită pentru a parcurge o matrice într-o buclă, dar îi puteți trece o funcție în care puteți efectua anumite acțiuni asupra elementelor matricei. Să ne uităm la un exemplu.

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

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

item — element de matrice

i — numărul elementului de matrice

mas este matricea care este procesată.

Această metodă poate fi folosită în locul unei bucle for pentru a itera printr-o matrice.

metoda de filtrare

Această metodă, ca și metoda forEach, este folosită pentru a itera printr-o matrice și i se transmite o funcție ca argument, dar vă permite să filtrați matricea și returnează o nouă matrice, care conține doar acele elemente pentru care funcția pe care o transmitem. la această metodă va reveni adevărat.

Este puțin confuz, așa că hai să ne uităm la asta cu 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 să conțină numai numere pozitive din matricea originală. Pentru a face acest lucru, aplicăm metoda de filtrare la matrice ș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 map creează o altă matrice, care va consta din rezultatele apelării funcției matricei originale, dar în această funcție vor avea loc unele acțiuni asupra elementelor matricei originale și rezultatul va apărea în noua matrice așa cum este. Să ne uităm la un exemplu, altfel cred că este complet neclar.

Var mas = ; var newMas = mas.map(function(item) ( return item*item; )); // am primit o matrice cu pătrate alert(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 înmulțit cu el însuși și rezultatul este scris într-o altă matrice. Ca rezultat, obținem o matrice cu pătratele numerelor din tabloul original.

Metode fiecare/unele

Aceste metode verifică dacă un element este prezent în matrice. Ei fac acest lucru printr-o funcție care le este transmisă ca parametru, adică dacă această funcție returnează adevărat, atunci metoda în sine va returna adevărat. Mai mult, metoda every necesită ca fiecare element să îndeplinească condiția funcției, iar metoda some necesită ca cel puțin o potrivire. Și, ca întotdeauna, iată un exemplu pentru tine.

Var mas = ; funcția isPositiv(num) ( return num > 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 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.

• 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) ( dacă (a.hasOwnProperty(cheie) && /^0$|^\d*$/.test(cheie) && cheie