Javascript `map` 和 `reduce` 之间的主要区别

Main difference between `map` and `reduce`

提问by Nishant Dixit

I used both methods but I am quite confused regarding the usage of both methods.

我使用了这两种方法，但我对这两种方法的使用感到很困惑。

Is anything that mapcan do but reducecan not and vice versa?

有什么map可以做但不能做的事情，reduce反之亦然？

Note: I know how to use both methods I am questioning for main difference between these method and when we need to used.

注意：我知道如何使用这两种方法，我质疑这些方法之间的主要区别以及我们何时需要使用。

回答by Ionic? Biz?u

Source

来源

Both mapand reducehave as input the array and a function you define. They are in some way complementary: mapcannot return one single element for an array of multiple elements, while reducewill always return the accumulator you eventually changed.

双方map并reduce具有作为输入数组，你定义一个函数。它们在某种程度上是互补的：map不能为多个元素的数组返回单个元素，而reduce将始终返回您最终更改的累加器。

map

map

Using mapyou iterate the elements, and for each element you return an element you want.

使用map您迭代元素，并为每个元素返回您想要的元素。

For example, if you have an array of numbers and want to get their squares, you can do this:

例如，如果您有一个数字数组并想要获得它们的平方，您可以这样做：

// 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

reduce

Using an array as an input, you can get one single element (let's say an Object, or a Number, or another Array) based on the callback function (the first argument) which gets the accumulatorand current_elementparameters:

使用数组作为输入，您可以根据获取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

---

---

Which one should you choose when you can do the same thing with both? Try to imagine how the code looks. For the example provided, you can compute the squares array like you mentioned, using reduce:

当您可以对两者做同样的事情时，您应该选择哪一个？试着想象一下代码的样子。对于提供的示例，您可以使用以下方法计算正方形数组，就像您提到的那样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)

Now, looking at these, obviously the second implementation looks better and it's shorter. Usually you'd choose the cleaner solution, which in this case is map. Of course, you can do it with reduce, but in a nutshell, think which would be shorter and eventually that would be better.

现在，看看这些，显然第二个实现看起来更好，而且更短。通常您会选择更清洁的解决方案，在这种情况下是map. 当然，你可以用 来做reduce，但简而言之，想想哪个会更短，最终会更好。

回答by tadman

Generally "map" means converting a series of inputs to an equal lengthseries of outputs while "reduce" means converting a series of inputs into a smallernumber of outputs.

通常，“映射”意味着将一系列输入转换为等长的输出系列，而“减少”意味着将一系列输入转换为较少数量的输出。

What people mean by "map-reduce" is usually construed to mean "transform, possibly in parallel, combine serially".

人们所说的“map-reduce”通常被解释为“变换，可能并行，串行组合”。

When you "map", you're writing a function that transforms xwith f(x)into some new value x1. When you "reduce" you're writing some function g(y)that takes array yand emits array y1. They work on different types of data and produce different results.

当您“映射”时，您正在编写一个将xwithf(x)转换为一些新 value 的函数x1。当您“减少”时，您正在编写一些g(y)接受数组y并发出数组的函数y1。他们处理不同类型的数据并产生不同的结果。

回答by Joe Iddon

The map()function returns a new array through passing a function over each element in the input array.

该map()函数通过在输入数组中的每个元素上传递一个函数来返回一个新数组。

This is different to reduce()which takes an array and a function in the same way, but the function takes 2inputs - an accumulator and a current value.

这与以reduce()相同方式接受数组和函数的方式不同，但该函数接受2输入 - 累加器和当前值。

So reduce()could be used like map()if you always .concatonto the accumulator the next output from a function. However it is more commonly used to reduce the dimensions of an array so either taking a one dimensional and returning a single value or flattening a two dimensional array etc.

所以reduce()可以像map()如果你总是.concat在累加器上使用函数的下一个输出。然而，它更常用于减少数组的维数，因此要么取一维并返回单个值，要么展平二维数组等。

回答by patelarpan

Let's take a look of these two one by one.

让我们一一看看这两个。

Map

地图

Map takes a callback and run it against every element on the array but what's makes it unique is it generate a new array based on your existing array.

Map 接受一个回调并对数组中的每个元素运行它，但它的独特之处在于它根据您现有的数组生成一个新数组。

var arr = [1, 2, 3];

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

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

Reduce

降低

Reduce method of the array object is used to reduce the array to one single value.

数组对象的 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