• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

pętla, javascript, rodzaj pętli

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
743 wizyt
pytanie zadane 1 czerwca 2018 w JavaScript przez xxx1990 Początkujący (490 p.)
zmienione kategorie 1 czerwca 2018 przez xxx1990
var waluty = [	{nazwa:"PLN", kurs:1.00}, 
					{nazwa:"EUR", kurs:4.20},
					{nazwa:"USD", kurs:3.50},
					{nazwa:"GBP", kurs:4.80},
					{nazwa:"CHF", kurs:3.60} ];


lub 


var waluty = [	[nazwa:"PLN", kurs:1.00], 
					[nazwa:"EUR", kurs:4.20],
					[nazwa:"USD", kurs:3.50],
					[nazwa:"GBP", kurs:4.80],
					[nazwa:"CHF", kurs:3.60] ];

Witam potrzebuję zrobić pętlą przyciski ( odpowiedni przycisk to odpowiednia nazwa oraz kurs ). Mam niestety problem bowiem nie mam pojęcia jakiej pętli użyć ( mam jeszcze z tym problemy). Jaka pętla będzie tu odpowiednia ( zwykły for chyba odpada, ForEach chyba też ) ? Drugie pytanie to pętla for (var "i" in item) czego ona dotyczy , proszę o pomoc !

komentarz 1 czerwca 2018 przez Alex.Ironside Stary wyjadacz (14,900 p.)
Zla kategoria

3 odpowiedzi

+1 głos
odpowiedź 1 czerwca 2018 przez lapacz.kornel Mądrala (6,930 p.)
const waluty = [  
  {nazwa:"PLN", kurs:1.00}, 
  {nazwa:"EUR", kurs:4.20},
  {nazwa:"USD", kurs:3.50},
  {nazwa:"GBP", kurs:4.80},
  {nazwa:"CHF", kurs:3.60} 
];

for(const {nazwa, kurs} of waluty) {
  alert(`${nazwa} ${kurs}`);
}

@pablop76 

Do iteracji po tablicach wygodniejsza jest pętla for...of.

komentarz 1 czerwca 2018 przez xxx1990 Początkujący (490 p.)
Super dziekuje bardzo !
0 głosów
odpowiedź 1 czerwca 2018 przez pablop76 VIP (123,460 p.)

Pętla for ...in to specjalny rodzaj pętli przewidziany do przetwarzania właściwości obiektu.

Możesz jej użyć do obiektu jakim jest tablica.

var waluty = [  {nazwa:"PLN", kurs:1.00}, 
                    {nazwa:"EUR", kurs:4.20},
                    {nazwa:"USD", kurs:3.50},
                    {nazwa:"GBP", kurs:4.80},
                    {nazwa:"CHF", kurs:3.60} ];
for( i in waluty){
  alert(waluty[i].nazwa+" "+waluty[i].kurs)
}

 

komentarz 1 czerwca 2018 przez xxx1990 Początkujący (490 p.)

Rozumiem dziekuje bardzo ! Innymi slowy jesli chce zbadac wartosci odpowiednich wlasciwosci to zawsze uzywam for in ? W tym Twoim kodzie mam jeszcze pytanie :

for( i in waluty){
  alert(waluty[i].nazwa+" "+waluty[i].kurs)
}

Rozumiem, że odwołujemy się tutaj do odpowiedniej waluty z nazwy oraz odpowiedniej waluty po kursie. A co w sytuacji jakbym tak napisal?A  do czego bym w takiej sytuacji sie odwolywal ? 

for( i in waluty){
  alert(waluty.nazwa[i]+" "+waluty.kurs[i])
}

 

3
komentarz 1 czerwca 2018 przez Comandeer Guru (606,120 p.)

Do tablic powinno się używać Array.prototype.forEach, w ostateczności for...of. Używanie for...in do tablic mija się z celem.

komentarz 1 czerwca 2018 przez lapacz.kornel Mądrala (6,930 p.)
Z ciekawości jaka jest przewaga forEach nad for..of? Tu i tu możemy mieć dostęp do elementu i indexu (w for..of dzięki Array.prototype.entries()). W projektach i tak się używa babela więc problemów ze wsparciem nie powinno być.
1
komentarz 1 czerwca 2018 przez Comandeer Guru (606,120 p.)

W projektach i tak się używa babela

Nie używam od lat ;)

Przewaga jest taka, że kod wykorzystujący metody tablicowe jest łatwiejszy do zrozumienia i czytania. 

komentarz 1 czerwca 2018 przez pablop76 VIP (123,460 p.)

@xxx1990,

Tablica nie ma właściwości(kurs), która ma index - waluty.kurs[i]

komentarz 1 czerwca 2018 przez pablop76 VIP (123,460 p.)
pętla for ... in  użyta do tablicy podana jest jako przykład zastosowania w książce Szybki kurs Java Script autor Phil Ballard.
komentarz 1 czerwca 2018 przez lapacz.kornel Mądrala (6,930 p.)
Można używać for..in, tylko że ta pętla iteruje po kluczach. Jeśli potrzebujemy wartości to po co iterować po kluczach, jeśli wykorzystujemy je tylko po to żeby dostać się do wartości? Logiczniejsze jest wykorzystanie for..of/forEach
1
komentarz 1 czerwca 2018 przez Comandeer Guru (606,120 p.)

@pablop76, nie używa się for...in do tablic, bo ta pętla nie iteruje po elementach tablicy, ale po kluczach właściwości obiektu – w przypadku tablicy to są tak naprawdę dwie całkowicie różne rzeczy. I to Ci powie choćby Axel Rauschmayer.

 

komentarz 2 czerwca 2018 przez xxx1990 Początkujący (490 p.)
edycja 2 czerwca 2018 przez xxx1990
Sorry za głupie pytanie, ale czy moglibyscie mi wyjasnic po kolei czym dla tablicy waluty sa poszeczegolne elementy - {nazwa:"PLN", kurs:1.00}, ? Pozdrawiam
komentarz 2 czerwca 2018 przez pablop76 VIP (123,460 p.)

To są literały obiektu Literały

0 głosów
odpowiedź 1 czerwca 2018 przez Chess Szeryf (76,710 p.)
edycja 1 czerwca 2018 przez Chess

Wydaje mi się, że nie możesz tak napisać jak napisałeś w przykładzie drugim, chodzi o ten dwukropek po "nazwa". Wyrzuca wtedy błąd składni, tak się chyba nie deklaruje w JS tablicy asocjacyjnej, bo to "=>" oznacza w JS "arrow function", a w PHP oznacza parę: klucz, wartość.

https://www.xul.fr/javascript/associative.php

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

var waluty = [  {nazwa:"PLN", kurs:1.00}, 
                    {nazwa:"EUR", kurs:4.20},
                    {nazwa:"USD", kurs:3.50},
                    {nazwa:"GBP", kurs:4.80},
                    {nazwa:"CHF", kurs:3.60} ];
 
 

for(var i=0;i<waluty.length;i++){ 
		
		var btn = document.createElement('button');
		btn.innerText = waluty[i].nazwa+' '+waluty[i].kurs;
		btn.setAttribute ('class','btnNazwaKurs');
		document.body.appendChild(btn);
		
}

 

document.addEventListener('click',function(e){ 
		 
	    if(e.target.className === 'btnNazwaKurs'){
		  	alert('Execute Action');
		}
		
},false);

 

komentarz 1 czerwca 2018 przez xxx1990 Początkujący (490 p.)

Dziekuje bardzo, czy mozesz jednak wyjasnic po kolej tego if ? 

  if(e.target.className === 'btnNazwaKurs'){
            alert('Execute Action'

 

komentarz 1 czerwca 2018 przez Chess Szeryf (76,710 p.)
edycja 1 czerwca 2018 przez Chess

Linijka ta "nasłuchuje", "patrzy się", na co klikasz, ponieważ jest ona w funkcji. Jeśli klikniesz w body, document, window; czy na cokolwiek innego, to wtedy to w środku if'a się nie wykona, a jeśli klikniesz na button o nazwie klasy 'btnNazwaKurs', to wtedy to w if'ie się wykona. Możesz zrobić szybki test, napisz tak: console.log(e.target);, po czym kliknij gdzieś gdziekolwiek, a później w te button'y i zobaczysz, co będzie się wyświetlać w konsoli.

W tym filmiku jest sporo opisane: https://www.youtube.com/watch?v=Ef3JYxdFVw4 .

komentarz 1 czerwca 2018 przez lapacz.kornel Mądrala (6,930 p.)

Z es6 można tak wink

var waluty = [  
  {nazwa:"PLN", kurs:1.00}, 
  {nazwa:"EUR", kurs:4.20},
  {nazwa:"USD", kurs:3.50},
  {nazwa:"GBP", kurs:4.80},
  {nazwa:"CHF", kurs:3.60} 
];
 
for(const {nazwa, kurs} of waluty){ 
  const btn = document.createElement('button');
  btn.textContent = `${nazwa} ${kurs}`;
  btn.classList.add('btnNazwaKurs');
  
  document.body.appendChild(btn);
}
 
document.addEventListener('click', ({target}) => { 
  if(target.matches('.btnNazwaKurs')){
    alert('Execute Action');
  }      
}, false);

 

komentarz 1 czerwca 2018 przez xxx1990 Początkujący (490 p.)
Dziekuje bardzo za pomoc , zaczynam wlasnie klikac ! Pozdrawiam !

Podobne pytania

0 głosów
0 odpowiedzi 123 wizyt
pytanie zadane 12 grudnia 2015 w JavaScript przez xR Mądrala (6,260 p.)
0 głosów
0 odpowiedzi 756 wizyt
pytanie zadane 29 marca 2022 w C i C++ przez trafo13 Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 367 wizyt

93,107 zapytań

142,082 odpowiedzi

321,605 komentarzy

62,447 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...