• 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

VPS Starter Arubacloud
+1 głos
447 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,880 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,060 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 (599,730 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 (599,730 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,060 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,060 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 (599,730 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,060 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 113 wizyt
pytanie zadane 12 grudnia 2015 w JavaScript przez xR Mądrala (6,260 p.)
0 głosów
0 odpowiedzi 451 wizyt
pytanie zadane 29 marca 2022 w C i C++ przez trafo13 Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 329 wizyt

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...