pętla, javascript, rodzaj pętli

Question

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 !

Comments

Zla kategoria

Answer 1

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.

Comments

Super dziekuje bardzo !

Answer 2

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)
}

 

Comments

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])
}

 

---

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

---

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ć.

---

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. 

---

@xxx1990,

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

---

pętla for ... in  użyta do tablicy podana jest jako przykład zastosowania w książce Szybki kurs Java Script autor Phil Ballard.

---

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

---

@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.

 

---

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

---

To są literały obiektu Literały

Answer 3

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

 

Comments

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

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

 

---

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 .

---

Z es6 można tak : 

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

 

---

Dziekuje bardzo za pomoc , zaczynam wlasnie klikac ! Pozdrawiam !