0

Map oraz filter – JavaScript.

Programowanie funkcyjne – map() oraz filter().

-Dzięki tym dwóm funkcją znacznie poprawisz czytelność swojego kodu. Pozwalają odejść od nieczytelnych pętli, ograniczyć ilość znaków instrukcji, oraz sprawiają mnóstwo frajdy.

Map()

Pierwszą funkcją którą weźmiemy pod lupę jest map(). Metodę tę wywołujemy na tablicy (nie może to być tablica obiektów DOM ), iteruje ona po każdym elemencie, oraz zwraca nową wartość. Spójrzmy na przykładowy kod:

const numbers = [ 6, 22, 31, 14 ];

const power = numbers.map( number => number * number );
// power is Array [ 12, 44, 62, 28 ]

Jak widać powyżej, mamy tablicę numbers na której wywołujemy metodę map, która przyjmuje funkcję ( w tym wypadku arrow function ).  Funkcja mnoży przez siebie iterowany element. W rezultacie otrzymujemy podniesione do kwadratu wartości.

Filter()

Podobnie jak map(), metoda filter() jest wywoływana na tablicy oraz iteruje po każdym elemencie.

var words = [ 'spray', 'limit', 'elite', 'exuberant', 'destruction', 'present' ];

const result = words.filter( word => word.length > 6 );

// result is Array [ "exuberant", "destruction", "present" ]

Tak samo jak w przypadku metody map nie dzieje się tutaj nic magicznego,  filter przechodzi kolejno przez każdy element oraz sprawdza czy przeszedł test ( funkcja podana jako parametr ). Jeśli wynik testu wskazał na true, zostaje zwrócony element.

W powyższym przykładzie na tablicy words użyliśmy metody filter, która jako parametr przyjęła funkcje, która sprawdza długość elementu, jeśli element ma więcej niż 6 znaków przechodzi test pozytywnie, oraz dodaje element do zwracanej tablicy.

Iterowanie po elementach DOM

Pobrane elementy DOM nie są typu Array() więc nie możemy wykonać na nich map(), filter(). Jednak w łatwy sposób możemy je przekonwertować.

const elements = document.querySelector( '.elements' );
      
//Array from
console.log( Array.from( elements ) );

// spread element
console.log( [ ..elements ] );

Konwersja za pomocą Array.from() jest bardziej czytelna, oraz działa również z array-like objects, co w przypadku spread elementu jest niemożliwe.

const arrayLikeObject = { 0: 'css', 1: 'wzorce projektowe', 2: 'javascript', 3: 'react', length: 4 };

// Output: [ 'css', 'wzorce projektowe', 'javascript', 'react' ]
console.log( Array.from( arrayLikeObject ) );

// Output: TypeError: arrayLikeObject[Symbol.iterator] is not a function
console.log( [ ...arrayLikeObject ] );

 

 

admin