Основное различие между map и reduce

Я использовал оба метода, но меня довольно смущает использование обоих методов.

Есть ли что-нибудь, что mapможет, но reduceне может, и наоборот?

Примечание: я знаю, как использовать оба метода, и я сомневаюсь, что главное различие между этим методом и когда нам нужно его использовать.

Источник

Оба mapи reduceимеют в качестве входных данных массив и функцию, которую вы определяете. Они в некотором роде дополняют друг друга: mapне могут возвращать один элемент для массива из нескольких элементов, но reduceвсегда будут возвращать аккумулятор, который вы в конечном итоге изменили.

map

Используя, mapвы перебираете элементы, и для каждого элемента вы возвращаете нужный элемент.

Например, если у вас есть массив чисел и вы хотите получить их квадраты, вы можете сделать это:

// A function which calculates the square
const square = x => x * x

// Use `map` to get the square of each number
console.log([1, 2, 3, 4, 5].map(square))

reduce

Использование массива в качестве входных данных, вы можете получить один единственный элемент (скажем , объект или номер, или другой массив) , основанный на функции обратного вызова (первый аргумент) который получает accumulatorи current_elementпараметры:

const numbers = [1, 2, 3, 4, 5]

// Calculate the sum
console.log(numbers.reduce(function (acc, current) {
  return acc + current
}, 0)) // < Start with 0

// Calculate the product
console.log(numbers.reduce(function (acc, current) {
  return acc * current
}, 1)) // < Start with 1

Какой из них выбрать, если можно сделать то же самое с обоими? Попробуйте представить, как выглядит код. В приведенном примере вы можете вычислить массив квадратов, как вы упомянули, используя reduce:

// Using reduce
[1, 2, 3, 4, 5].reduce(function (acc, current) {
    acc.push(current*current);
    return acc;
 }, [])

 // Using map
 [1, 2, 3, 4, 5].map(x => x * x)

Теперь, глядя на них, очевидно, что вторая реализация выглядит лучше и короче. Обычно вы выбираете более чистое средство, которым в данном случае и является map. Конечно, вы можете это сделать reduce, но в двух словах подумайте, что будет короче, а в конечном итоге - лучше.

Обычно «карта» означает преобразование серии входов в серию выходов равной длины, в то время как «сокращение» означает преобразование серии входов в меньшее количество выходов.

То, что люди подразумевают под «уменьшением карты», обычно истолковывается как «преобразовывать, возможно, параллельно, комбинировать последовательно».

Когда вы «карта», вы пишете функцию , которая преобразует xс f(x)в какое - то новое значение x1. Когда вы «уменьшаете», вы пишете некоторую функцию, g(y)которая принимает массив yи испускает массив y1. Они работают с разными типами данных и дают разные результаты.

Думаю, эта картинка ответит вам о разнице между этими HOC

map()Функция возвращает новый массив через передавая функцию над каждым элементом во входном массиве.

Это отличается от того, reduce()что принимает массив и функцию одинаково, но функция принимает 2входные данные - аккумулятор и текущее значение.

Таким образом, reduce()можно использовать, как map()если бы вы всегда находили .concatаккумулятор для следующего вывода функции. Однако он чаще используется для уменьшения размеров массива, чтобы либо взять одномерный и вернуть одно значение, либо сгладить двухмерный массив и т. Д.

Давайте посмотрим на этих двоих по очереди.

карта

Map принимает обратный вызов и запускает его для каждого элемента в массиве, но что делает его уникальным, так это создание нового массива на основе вашего существующего массива .

var arr = [1, 2, 3];

var mapped = arr.map(function(elem) {
    return elem * 10;
})

console.log(mapped); // it genrate new array

Уменьшить

Метод Reduce объекта массива используется для уменьшения массива до одного значения .

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

Чтобы понять разницу между map, filter и reduce, запомните следующее:

1. Все три метода применяются к массиву поэтому каждый раз, когда вы хотите выполнить какую-либо операцию с массивом, вы будете использовать эти методы.
2. Все три соответствуют функциональным подходам, поэтому исходный массив остается прежним . Исходный массив не изменяется, вместо этого возвращается новый массив / значение.
3. Map возвращает новый массив с равным номером. элементов, как в исходном массиве. Следовательно, если исходный массив имеет 5 элементов, возвращаемый массив также будет иметь 5 элементов. Этот метод используется всякий раз, когда мы хотим внести некоторые изменения в каждый отдельный элемент массива. Вы можете помнить, что каждый элемент массива ann отображается на какое-то новое значение в выходном массиве, поэтому имя map For, например,

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]

4. Filter возвращает новый массив с равным / меньшим количеством элементов, чем исходный массив. Он возвращает те элементы в массиве, которые прошли какое-то условие. Этот метод используется, когда мы хотим применить фильтр к исходному массиву, следовательно, к имени filter. Например,

var originalArr = [1,2,3,4]
//[1,2,3,4]
var evenArr = originalArr.filter(function(elem){
  return elem%2==0;
})
//[2,4]

5. Reduceвозвращает одно значение, в отличие от карты / фильтра. Следовательно, всякий раз, когда мы хотим запустить операцию для всех элементов массива, но хотим получить единый вывод с использованием всех элементов, мы используем reduce. Вы можете помнить, что вывод массива сводится к одному значению, поэтому имя reduce. Например,

var originalArr = [1,2,3,4]
//[1,2,3,4]
var sum = originalArr.reduce(function(total,elem){
  return total+elem;
},0)
//10