Podstawy Programowania Funkcyjnego #3 map i filter

W tej serii uczymy się Podstaw Programowania Funkcyjnego. Wykorzystamy przy okazji wiedzę zdobytą w serii dotyczącej ES6. Poznaliśmy już funkcję Filter, tym razem zajmiemy się transformowaniem jednej tablicy w drugą. Pomoże nam przy tym funkcja map. Zaczynajmy!

# Czym jest Map, a czym jest Filter?

Pamiętacie przykład zastosowania funkcji filter, zawierający odnośniki do filmu Pulp Fiction? Znajduje się w cześci dotyczącej arrow functions. Przywołam go tutaj, ponieważ będzie nam potrzebny.

 
const characters = [
	{name: 'Butch' , role: 'Boxer'},
	{name: 'Vincent', role: 'Hitman'},
	{name: 'Winston', role: 'Problem solver'},
	{name: 'Jules', role: 'Hitman'},
];

var HitMan = characters.filter(ev => ev.role == 'Hitman');

console.log(HitMan); //[{name: "Vincent", role: "Hitman"}, {name: "Jules", role: "Hitman"}]

Powyższy kod zwraca nową tablicę obiektów stworzoną z tablicy characters. Jak możemy zauważyć, funkcja filter to higher order function, które poznaliśmy w poprzedniej części podstaw programowania funkcyjnego, ponieważ jako argument przyjmuje inną funkcję.

Skorzystaliśmy już z listy płatnych zabójców, jednak nie wszystko poszło po naszej myśli. W ramach zemsty chcemy stworzyć czytelną listę osób wraz z ich profesjami, po to by umieścić ją w policyjnej bazie danych. Znamy już pierwszą operację na tablicy filter i potrafimy wyszukać potrzebne nam elementy. Jednak tym razem będziemy potrzebowali funkcji, która pomoże nam przetransformować odpowiednie obiekty. Zaimplementujmy taką funkcję.

 
function map(callback, array) {
    var newArray = [];
    for (var i = 0; i < array.length; i++) {
        newArray[i] = callback(array[i], i);
    }
    return newArray;
}

Funkcja przyjmuje dwa argumenty, kolejną funkcję callback i pierwotną tablicę array. Funkcja tworzy tablicę, a następnie iteruje po tablicy przekazanej jako argument i wykonuje funkcję którą podaliśmy przy wywołaniu. Elementy dodają się do nowej tablicy, a na końcu cała tablica zostaje zwrócona.

 
var PoliceDB = map(a => a.name + " is " + a.role, characters);
console.log(PoliceDB); //["Butch is Boxer", "Vincent is Hitman", "Winston is Problem solver", "Jules is Hitman"]

Wykonując naszą funkcję map, jako pierwszy argument podaliśmy prostą funkcję, która komponuje name i role w string, a jako drugi tablicę, na której kod ma być wykonany.

Na szczęście nie musimy implementować funkcji map, za każdym razem kiedy będziemy tworzyć projekt. JavaScript posiada funkcję map wbudowaną do każdej tablicy. Jest zbudowana w taki sposób, że bardzo łatwo użyć jej z innnymi funkcjami tablicowymi naraz, ponieważ nie przyjmuje tablicy jako argument, tak jak stworzyliśmy to powyżej. Dlatego możemy stworzyć łańcuchy operacji na tablicy - array.filter(...).map(...);

 
var PoliceDB = characters.map(a => a.name + " is " + a.role);
console.log(PoliceDB); //["Butch is Boxer", "Vincent is Hitman", "Winston is Problem solver", "Jules is Hitman"]
blog comments powered by Disqus