Array.from – ciekawa funkcja, która poza swoim standardowym działaniem posiada jeszcze pewną sztuczkę związaną z dodatkowym, drugim argumentem, który pozwala nam wykonać od razu map na czymś, co zamienimy na tablicę.
Warto poznać!
Array.from to funkcja, która pozwala zamienić obiekt tablico-podobny na tablicę w JS.
Zamieniać możemy wiele różnych typów:
- napisy (na litery)
- typy Set (zbiór) i Map (słownik)
- wbudowaną zmienną arguments
- NodeList zwracane przez różne metody DOM
- tablica na tablicę – też teoretycznie możliwe.
Oto przykład zamiany napisu na tablicę:
let letters = Array.from("Hello");
console.log(letters);
//['H', 'e', 'l', 'l', 'o']
A to przykład zamiany domyślnej zmiennej arguments na tablicę, na której potem używamy metody reduce:
<script>
function sum() {
let numbers = Array.from(arguments);
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1,2,3,4));
//10
</script>
Przykłady można mnożyć i mnożyć, natomiast to, co jest najciekawsze w Array.from, to drugi, opcjonalny argument. Zobaczmy na kod poniżej:
<script>
let ourSet = new Set([1,2,3]);
let ourSetArr = Array.from(ourSet);
let squared = ourSetArr.map((num) => num * num);
console.log(squared);
//[1, 4, 9]
</script>
Tworzymy zbiór, zamieniamy na tablicę, wykonujemy map, które tworzy tablicę z liczbami podniesionymi do kwadratu.
To samo możemy wykonać za jednym razem, wykorzystując Array.from:
<script>
let ourSet = new Set([1,2,3]);
let squared = Array.from(ourSet, (num) => num * num);
console.log(squared);
//[1, 4, 9]
</script>
Array.from zamienia nam zbiór na tablicę i wykonuje na nim map według naszej funkcji (której kazaliśmy podnosić liczby do kwadratu) i to zwraca.
Drobna rzecz, ale potrafi uprościć pracę, jeżeli znamy dobrze JavaScript.