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.