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パラメーターとパラメーターを取得するコールバック関数（最初の引数）に基づいて、1つの要素（たとえば、オブジェクト、数値、または別の配列）を取得できます。

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

両方で同じことができる場合、どちらを選択する必要がありますか？コードがどのように見えるか想像してみてください。提供されている例では、次を使用して、前述のように2乗配列を計算できます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)

さて、これらを見ると、明らかに2番目の実装は見栄えが良く、短くなっています。通常は、よりクリーンなソリューションを選択しますmap。この場合はです。もちろん、でそれを行うことはできますがreduce、一言で言えば、どちらが短く、最終的にはそれが良いかを考えてください。

一般に、「map」は一連の入力を同じ長さの一連の出力に変換することを意味し、「reduce」は一連の入力をより少ない数の出力に変換することを意味します。

人々が「map-reduce」とは、通常、「変換、場合によっては並列、連続的に結合する」ことを意味すると解釈されます。

「マップ」するときは、で変換する関数を新しい値に変換xしf(x)ますx1。「reduce」とは、配列g(y)を受け取り、配列yを出力する関数を作成することですy1。それらはさまざまなタイプのデータを処理し、さまざまな結果を生成します。

この写真はそれらのHOCの違いについてあなたに答えると思います

このmap()関数は、入力配列の各要素に関数を渡すことで新しい配列を返します。

これはreduce()、配列と関数を同じように受け取るものとは異なりますが、関数は2入力（アキュムレータと現在の値）を受け取ります。

したがって、関数からの次の出力を常にアキュムレータに置く場合のreduce()ように使用できます。ただし、配列の次元を減らすためによく使用されるため、1次元を取得して単一の値を返すか、2次元配列を平坦化するなどの方法があります。map().concat

この2つを1つずつ見ていきましょう。

地図

Mapはコールバックを受け取り、配列上のすべての要素に対して実行しますが、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. 3つのメソッドはすべて配列に適用されるため、配列に対して操作を行う場合は常に、これらのメソッドを使用します。
2. 3つすべてが機能的アプローチに従うため、元の配列は同じままです。元の配列は変更されず、代わりに新しい配列/値が返されます。
3. Map 等しい番号の新しい配列を返します。元の配列にあるような要素の。したがって、元の配列に5つの要素がある場合、返される配列にも5つの要素があります。このメソッドは、配列の個々の要素ごとに変更を加えたい場合に使用されます。ann配列のすべての要素が出力配列の新しい値にマップされていることを思い出してください。したがって、名前は次のようになりますmap 。

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