Zegar binarny

Question

Nie rozumiem co robi ten fragment kodu z tego codepena: https://codepen.io/MrSetas/pen/PdojRE Czy ktoś mógłby mniej więcej wyjaśnić?

for (let i = 0; i < nums.length; i++) {
		switch (i) {
			case 0: nums[i] = (nums[i]+'').padEnd(2,'0'); break;
			case 1: nums[i] = (nums[i]+'').padEnd(4,'0'); break;
			case 2: nums[i] = (nums[i]+'').padEnd(3,'0'); break; 
			case 3: nums[i] = (nums[i]+'').padEnd(4,'0'); break;
			case 4: nums[i] = (nums[i]+'').padEnd(3,'0'); break;
			case 5: nums[i] = (nums[i]+'').padEnd(4,'0');
		}
	}

 

Answer 1

Po koleji w funkcji clock:

- pobierasz date

let date = new Date(),

- pobierasz godziny, minuty, sekundy

		    hr = date.getHours(),
		    min = date.getMinutes(),
		    sec = date.getSeconds();

- dodajesz zera jeżeli któraś z wartości jest jednocyfrowa

hr<10&&(hr="0"+hr),min<10&&(min="0"+min),sec<10&&(sec="0"+sec);

- tworzysz stringa w formacie "ggmmss"

 let time = "" + hr + min + sec;

- rozbijasz stringa na tablice zawierające pojedyńcze znaki i zmieniasz na typ number

 let nums = time.split("").map(Number)......

- wykorzystujesz metodę toString z podstawą 2 żeby zamienić każdy z numerów na stringa na liczbe w systemie binarnym

......map(n => n.toString(2)).....

- i odwracasz kolejność znaków

......split("").reverse().join("")

- na tym etapie masz tablice, liczb binarnych zapisanych jako stringi, ale liczby binarne są pisane od prawej do lewej czyli np 4 ("100") jest zapisane jako ("001")

Dalej w funkcji w pętli każdy ze stringów jest dopełniany zerami: do 2 jeżeli znajduje się na 0 indekcie w tablicy, do 4 jeżeli jest na pierwszym, do 3 jeżeli jest na drugim itd.....

Czyli gdyby np czwórka znajdowała się na 1 indekcie w tablicy wyglądałaby tak: "0010" (z dodanym zerem), zrobione jest to dlatego, że póżniej divy (stylowane na kołeczka) wypełniane są kolorami od dołu do góry "1" oznacza wypełnienie. Bez tej pętli for byłyby np 4 miejsca do zapełnienia a tylko 3 znaki w stringu oznaczające czy ma być wypełnione czy nie.

Comments

Dziękuję Ci bardzo! Ale mam jeszcze kilka pytań. Dlaczego to cudzysłowie jest tylko przed godziną?

let time = "" + hr + min + sec; 

Oraz... nadal nie wiem czemu jest tyle case'ów. Np. czym te się różnią? 

case 1: nums[i] = (nums[i]+'').padEnd(4,'0'); break

case 3: nums[i] = (nums[i]+'').padEnd(4,'0'); break;

Oraz co konkretnego robi ta linijka?

nums = nums.join('') + "";

 

---

Znaki "" (2 cudzyslowy) lub + sa czesto używane jeżeli chcesz mieć wpływ na to jak zostaną potraktowane znaki czyli jako liczby (dodawane) lub jako litery (łączenie).

typ string (łańcuch znaków nawet jak wygląda jak liczba) + typ number (liczba) da Ci jako wynik stringa (połączenie)

typ number + typ number da Ci jako wynik number (dodawanie)

W tym przypadku pusty string + typ number da jako wynik liczbe, ale o typie string i póżniej każdy kolejny znak + jest traktowany jako string+number i daje w efekcie string (łączenie).

         console.log(1+4+7+10+2)
         console.log(""+1+4+7+10+2)
         console.log(1+4+7+""+10+2)

pierwszy wynik to po prostu dodawanie (24)

drugi to łączenie - wszystkie litery począwszy od pierwzej traktowane są jako napis (147102)

trzeci to dodawanie trzech pierwszych liczb (12) następnie łączenie (102) i w efekcie dostaje się 12102

Jeżeli chodzi o case to każdy case odpowiada za każdą kolumne jest 6 kolumn dlatego potrzebujesz 6 casów (akurat tak zostało to zaimplementowane). Pierwsza kolumna to case 0 i potrzebuje 2 miejsc (ma dwa kółka), druga kolumna to case 1 i potrzebuje 4 miejsc (4 kółka), itd

Uprzedzając kolejne pytanie nie możesz napisać np:

case 1 || 4: nums[i] = (nums[i]+'').padEnd(4,'0'); break;

ponieważ uwzględni Ci to tak naprawdę tylko pierwszą liczbę

nie możesz napisać również czegoś takiego:

case i==1 || i==4: nums[i] = (nums[i]+'').padEnd(4,'0'); break;

ponieważ warunek musi być stały i niezależny.

Jeżeli chcesz skrócić kod możesz zrobić coś takiego

            switch (i) {
                case 0: nums[i] = (nums[i]+'').padEnd(2,'0'); break;
                case 1: 
                case 3:
                case 5:
                    nums[i] = (nums[i]+'').padEnd(4,'0'); break;
                case 2:
                case 4:
                    nums[i] = (nums[i]+'').padEnd(3,'0'); break; 
            }

jeżeli chodzi o join to służy do łączenia "zlepiania" elementów w tablicy, znak w nawiasie pojawi się między łączonymi elementami - pusty string połączy elementy w tablicy kolejno bez dodawania znakow między nimi a np

nums.join('--nastepny--')

stworzy mniej więcej taki efekt

01--nastepny--1--nastepny--11--nastepny--011--nastepny--001--nastepny--01

nie wiem po co na końcu jest jeszcze cudzysłów, join już tworzy stringa (ciąg znaków)