• 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

+1 głos
121 wizyt
pytanie zadane 1 czerwca 2018 w JavaScript, jQuery, AJAX przez xxx1990 Początkujący (430 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,730 p.)
Zla kategoria

3 odpowiedzi

+1 głos
odpowiedź 1 czerwca 2018 przez lapacz.kornel Mądrala (6,840 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 (430 p.)
Super dziekuje bardzo !
0 głosów
odpowiedź 1 czerwca 2018 przez pablop76 Szeryf (97,990 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 (430 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 Mentor (465,140 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,840 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 Mentor (465,140 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 Szeryf (97,990 p.)

@xxx1990,

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

komentarz 1 czerwca 2018 przez pablop76 Szeryf (97,990 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,840 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 Mentor (465,140 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 (430 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 Szeryf (97,990 p.)

To są literały obiektu Literały

0 głosów
odpowiedź 1 czerwca 2018 przez Chess Maniak (72,430 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 (430 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 Maniak (72,430 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,840 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 (430 p.)
Dziekuje bardzo za pomoc , zaczynam wlasnie klikac ! Pozdrawiam !

Podobne pytania

0 głosów
0 odpowiedzi 42 wizyt
pytanie zadane 12 grudnia 2015 w JavaScript, jQuery, AJAX przez xR Mądrala (6,340 p.)
0 głosów
2 odpowiedzi 114 wizyt
0 głosów
1 odpowiedź 216 wizyt
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

67,127 zapytań

114,075 odpowiedzi

241,784 komentarzy

47,030 pasjonatów

Przeglądających: 207
Pasjonatów: 16 Gości: 191

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...