Shulou(Shulou.com)06/03 Report--

This article focuses on "how to use JS functional programming Reduce and Map", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use JS functional programming Reduce and Map"!

JavaScript is the programming language that supports functional programming best among today's popular languages. The seven functions of functional programming are:

-reduce () and reduceRight () to apply an operation to a whole array, reducing it to a single result-map () to transform one array into another by applying a function to each of its elements-flat () to make a single array out of an array of arrays-flatMap () to mix together mapping and flattening-forEach () to simplify writing loops by abstracting the necessary looping code

And the functions of search and selection:

Filter () to pick some elements from an array-find () and findIndex () to search for elements that satisfy a condition-A pair of predicates, every () and some (), to check an array for a Boolean test

1. Array.reduce () reduces the dimension of the sequence to a value

When we deal with array, we always fall into endless loop cycles and fall into trivial traps that destroy our minds and brains.

The basic working principles of reduce are as follows:

Find the sum of a sequence

First of all, start with the familiar sum of the series.

Const myArray = [22,9,60,12,4,56]; const sum = (x, y) = > x + y; const mySum = myArray.reduce (sum, 0)

Observe its trajectory:

# + begin_src js: results output const myArray = [22, 9, 60, 12, 4, 56]; const sumAndLog = (x, y) = > {console.log (`${x} + ${y} = ${x + y}`); return x + y;}; myArray.reduce (sumAndLog, 0); # + end_src # + RESULTS:: 0 "22" 22: 22 "9" 31: 31 "60" 91: 91 "12" 103: 103 "4" 107: 107 "56" 163

Find the mean

With reduce, we can get the average in the way of "description" and the way of decalratively:

Const average = arr = > arr.reduce (sum, 0) / arr.length; console.log (average (myArray)); / / 27.166667

The second way to find the mean is to write length into it:

Const average2 = (sum, val, ind, arr) = > {sum + = val; return ind = = arr.length-1? Sum / arr.length: sum; / / use this as the raw material for thinking}; console.log (myArray.reduce (average2, 0)); / / 27.166667s

To go a step further, make average an inherent attribute:

Array.prototype.average = function () {return this.reduce ((x, y) = > x + y, 0) / this.length;}; let myAvg = [22,9,60,12,4,56] .average (); / / 27.166667

Words calculate multiple values

Although reduce can only return a single result, this return result can contain multiple elements, such as object.

Const average3 = arr = > {const sumCount = arr.reduce ((accum, value) = > ({sum: value + accum.sum, count: accum.count + 1}), {sum: 0, count: 0}); return sumCount.sum / sumCount.count;}; console.log (average3 ([7,11,19,23]))

To rewrite in the form of array:

Const average4 = arr = > {const sumCount = arr.reduce ((accum, value) = > [accum [0] + value, xaccum [1] + 1], [0,0]); return sumCount [0] / sumCount [1];}; console.log (average4 (myArray)); / / 27.166667

Folding from right to left

The working principle is as follows:

For example, the general solution for reverse strings is:

Const reverseString = str = > {let arr = str.split (""); arr.reverse (); return arr.join ("");}; console.log (reverseString ("MONTEVIDEO")); / / OEDIVETNOM

And what about reduceRight's solution?

Const reverseString2 = str = > str.split ("). ReduceRight ((x, y) = > x + y,"); console.log (reverseString2 ("OEDIVETNOM")); / / MONTEVID

2. Array.map from Mathematics to programming

Map is first of all a mathematical concept.

Extract data from object

Const markers = [{name: "AR", lat:-34.6, lon:-58.4}, {name: "BO", lat:-16.5, lon:-68.1}, {name: "BR", lat:-15.8, lon:-47.9}, {name: "CL", lat:-33.4, lon:-70.7}, {name: "CO", lat: Lon:-74.0}, {name: "EC", lat:-0.3, lon:-78.6}, {name: "PE", lat:-12.0, lon:-77.0}, {name: "PY", lat:-25.2, lon:-57.5}, {name: "UY", lat:-34.9, lon:-56.2}, {name: "VE" Lat: 10.5, lon:-66.9},] Let averageLat = average (markers.map (x = > x.lat)); / /-15.76 let averageLon = average (markers.map (x = > x.lon)); / /-65.53 / / extended array.prototype let averageLat2 = markers.map (x = > x.lat). Average (); let averageLon2 = markers.map (x = > x.lon). Average ()

Deal with data quietly.

Look at an application that we take for granted:

["123.45", "67.8", "90"] .map (parseFloat); / / [123.45, 67.8,90] ["123.45", "- 67.8", "90"] .map (parseInt); / / [123,67.8,90] .map (parseInt)

This is because parseInt has a parameter radix for optional.

The representation of a sequence

Now let's create a range.

Const range = (start, stop) = > new Array (stop-start) .fill (0). Map ((v, I) = > start + I); / / must write a v and new let from2To6 = range (2,7); / / [2, 3, 4, 5, 6]

Try to find the multiplier:

Const range = (start, stop) = > new Array (stop-start). Fill (0). Map ((v, I) = > start + I); const factorialByRange = n = > range (1, n + 1). Reduce ((x, y) = > x * y, 1); factorialByRange (5); / / 120 factorialByRange (3)

Try the alphabet:

Const ALPHABET = range ("A" .charCodeAt (), "Z" .charCodeAt () + 1) .map (x = > String.fromCharCode (x)); / / ["A", "B", "C",. "X", "Y", "Z"]

Using reduce to construct map

Reduce is the starting point for all other functions

Const myMap = (arr, fn) = > arr.reduce ((x, y) = > x.concat (fn (y)), [])

Try two different solutions:

Const myArray = [22, 9, 60, 12, 4, 56]; const dup = x = > 2 * x; console.log (myArray.map (dup)); / / [44, 18, 120, 24, 8, 112] console.log (myMap (myArray, dup)); / / [44, 18, 120, 24, 8112] console.log (myArray) / / [22, 9, 60, 12, 4, 56] so far, I believe you have a better understanding of "how to program Reduce and Map with JS functions". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.