Lista i wiele opcji

Mając listę rozwijaną wielokrotnego wyboru:

<label for="colour">What is your favourite colour?</label>
<br />
<select id="colour" name="colour" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="other">Other</option>
</select>
<br />
<button name="send" id="send">Send</button>

Potrzebujesz pobrać opcje zaznaczone przez użytkownika.

Jak to zrobić w JavaScript?

Obiekt HTMLSelectElement ma atrybut o nazwie: selectedOptions, który zwraca listę obiektów: HTMLOptionElement. Są to wszystkie zaznaczone opcje na liście.

select.selectedOptions

Wiedząc, że dane z selectedOptions to lista obiektów typu HTMLOptionElement, wystarczy iterować po każdym elemencie z tej listy i pobrać wartość z atrybutu value:

const selectedOptions = select.selectedOptions.map(option => option.value);

Hmm, nie! To nie przejdzie, ponieważ selectedOptions to obiekt.

Żeby wyłuskać te dane, można skorzystać z Array.from:

const select = document.getElementById('colour');
const sendBtn = document.getElementById('send');

sendBtn.addEventListener(
  "click",
  () => {
    const selectedOptions = Array.from(select.selectedOptions).map(option => option.value);
    console.log('selectedOptions: ', selectedOptions)
  },
  false,
);

Wartość dziesiętna

Mamy liczbę: 1.456 i chcemy pobrać wartość dziesiętną z tej liczby, czyli: *0.456". Jak to można zrobić?

Wartość można pobrać za pomocą operatora: %, w taki sposób:

1.456 % 1

Problem jest taki, że zwróci: 0.45599999999999996

Można to napisać tak:

+(1.456 % 1).toFixed(3)

Zwróci: 0.456

Za pomocą toFixed wyświetlamy liczbę z dokładnością do n miejsc po przecinku. Ponieważ toFixed zwraca wprawdzie liczbę, ale w postaci stringa, warto rzutować ją na liczbę za pomocą operatora +.

A co jeśli potrzebujesz się dowiedzieć, jaka jest wartość na drugim miejscu po przecinku?

Na przykład dla liczby: 2.52. Przykład:

+(2.52 % 0.1).toFixed(2)

Zwróci: 0.02

W lutym opublikowałem 2 wpisy:

Inne:

1. Czym jest złożoność cyklomatyczna?

JavaScript:

1. Jak sprawdzić, czy tablica zawiera duplikaty?

Przeczytałem 2 książki:

1. Wstrzykiwanie zależności — Steven Van Deursen, Mark Seemann
2. Malarz świata ułudy — Kazuo Ishiguro

Przesłuchałem 5 audiobooków:

1. Królowa — Elżbieta Cherezińska
2. Tryumf Lisa Reinicke — Andrzej Pilipiuk
3. Pan Lodowego Ogrodu. Tom 1 — Jarosław Grzędowicz
4. Czwarte skrzydło — Rebecca Yarros
5. Ciemność — Jozef Karika

Czy tablica zawiera duplikaty?

const hasDuplicates = (data) => {
	const result = new Set(data).size !== data.length;
	return result;
}

console.log(hasDuplicates([1, 2, 3]); // false
console.log(hasDuplicates([1, 2, 3, 1]); // true
console.log(hasDuplicates(['a', 'b', 'c']); // false
console.log(hasDuplicates(['a', 'b', 'b']); // true

Cała sztuczka leży w użyciu Set. Po przekazaniu danych do Set pozbywasz się ewentualnych duplikatów. Dzięki temu zmieni się rozmiar zbioru i można to porównać z liczbą elementów z oryginalnej tablicy: data.