Źródło
Obie map
i reduce
mają jako dane wejściowe tablicę i funkcję, którą zdefiniujesz. Są w pewnym sensie komplementarne: map
nie mogą zwrócić pojedynczego elementu dla tablicy wielu elementów, a reduce
zawsze zwracają akumulator, który ostatecznie zmieniłeś.
map
Używając map
iteracji elementów, dla każdego elementu zwracasz żądany element.
Na przykład, jeśli masz tablicę liczb i chcesz uzyskać ich kwadraty, możesz to zrobić:
const square = x => x * x
console.log([1, 2, 3, 4, 5].map(square))
reduce
Używając tablicy jako danych wejściowych, możesz uzyskać pojedynczy element (powiedzmy obiekt, liczbę lub inną tablicę) na podstawie funkcji wywołania zwrotnego (pierwszy argument), która pobiera parametry accumulator
i current_element
:
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.reduce(function (acc, current) {
return acc + current
}, 0))
console.log(numbers.reduce(function (acc, current) {
return acc * current
}, 1))
Którą wybrać, jeśli możesz zrobić to samo z obydwoma? Spróbuj sobie wyobrazić, jak wygląda kod. W podanym przykładzie możesz obliczyć tablicę squares, jak wspomniałeś, używając reduce
:
[1, 2, 3, 4, 5].reduce(function (acc, current) {
acc.push(current*current);
return acc;
}, [])
[1, 2, 3, 4, 5].map(x => x * x)
Patrząc na to, oczywiście druga implementacja wygląda lepiej i jest krótsza. Zwykle wybierasz czystsze rozwiązanie, którym w tym przypadku jest map
. Oczywiście możesz to zrobić reduce
, ale w skrócie zastanów się, który byłby krótszy i ostatecznie byłby lepszy.
reduce
? Nie możesz, to właśnie próbowałem pokazać w tych przykładach.console.log([1, 2, 3, 4, 5].reduce(function (acc, current) { acc.push( current = current*current); return acc; }, []))
Generalnie „mapowanie” oznacza przekształcanie serii danych wejściowych w serie danych wyjściowych o równej długości, natomiast „zmniejszanie” oznacza przekształcanie serii danych wejściowych w mniejszą liczbę wyników.
To, co ludzie rozumieją przez „zmniejszanie mapy”, jest zwykle rozumiane jako „przekształcanie, prawdopodobnie równoległe, łączenie szeregowe”.
Kiedy „mapujesz”, piszesz funkcję, która przekształca się
x
zf(x)
w nową wartośćx1
. Kiedy „redukujesz”, piszesz funkcję,g(y)
która pobiera tablicęy
i emituje tablicęy1
. Pracują na różnych typach danych i dają różne wyniki.źródło
Myślę, że to zdjęcie odpowie ci na temat różnicy między tymi HOC
źródło
Plik
map()
Zwraca się nową tablicę funkcji przez przepuszczanie przez każdy element tablicy wejściowego.Różni się to od
reduce()
tego, że przyjmuje tablicę i funkcję w ten sam sposób, ale funkcja przyjmuje2
dane wejściowe - akumulator i wartość bieżącą.Więc
reduce()
może być użyty takmap()
, jakbyś zawsze.concat
na akumulatorze następował wynik funkcji. Jednak jest częściej używany do zmniejszania wymiarów tablicy, więc albo branie jednowymiarowej i zwracanie pojedynczej wartości, albo spłaszczanie dwuwymiarowej tablicy itp.źródło
Przyjrzyjmy się tym dwóm jeden po drugim.
Mapa
Map pobiera wywołanie zwrotne i uruchamia je na każdym elemencie tablicy, ale to, co czyni go unikalnym, to generuje nową tablicę na podstawie istniejącej tablicy .
var arr = [1, 2, 3]; var mapped = arr.map(function(elem) { return elem * 10; }) console.log(mapped); // it genrate new array
Zmniejszyć
Metoda Reduce obiektu tablicy służy do zredukowania tablicy do jednej wartości .
var arr = [1, 2, 3]; var sum = arr.reduce(function(sum, elem){ return sum + elem; }) console.log(sum) // reduce the array to one single value
źródło
Aby zrozumieć różnicę między mapowaniem, filtrowaniem i redukowaniem, pamiętaj o tym:
Map
zwraca nową tablicę z równym nie. elementów w oryginalnej tablicy. Dlatego jeśli oryginalna tablica ma 5 elementów, zwrócona tablica również będzie miała 5 elementów. Ta metoda jest używana, gdy chcemy dokonać jakiejś zmiany w każdym pojedynczym elemencie tablicy. Możesz pamiętać, że każdy element tablicy ann jest mapowany na jakąś nową wartość w tablicy wyjściowej, stąd nazwamap
Na przykład,var originalArr = [1,2,3,4] //[1,2,3,4] var squaredArr = originalArr.map(function(elem){ return Math.pow(elem,2); }); //[1,4,9,16]
Filter
zwraca nową tablicę z równą / mniejszą liczbą elementów niż oryginalna tablica. Zwraca te elementy w tablicy, które spełniły jakiś warunek. Ta metoda jest używana, gdy chcemy zastosować filtr do oryginalnej tablicy, a zatem nazwafilter
. Np.var originalArr = [1,2,3,4] //[1,2,3,4] var evenArr = originalArr.filter(function(elem){ return elem%2==0; }) //[2,4]
Reduce
zwraca pojedynczą wartość, w przeciwieństwie do mapy / filtra. Dlatego za każdym razem, gdy chcemy wykonać operację na wszystkich elementach tablicy, ale chcemy uzyskać jedno wyjście zawierające wszystkie elementy, używamyreduce
. Możesz pamiętać, że wyjście tablicy jest zredukowane do jednej wartości, stąd nazwareduce
. Np.var originalArr = [1,2,3,4] //[1,2,3,4] var sum = originalArr.reduce(function(total,elem){ return total+elem; },0) //10
źródło