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

This article introduces the knowledge of "what are the advanced uses of array reduce". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Background

Reduce as one of the new conventional array methods in ES5, compared with forEach, filter and map, seems to have been ignored in practical use, and found that people around you rarely use it, resulting in such a powerful method gradually buried.

If you often use reduce, how can you let it go? I still have to take him out of the dust and clean him up and present his advanced usage to everyone. Such a useful method should not be buried by the public.

Here is a brief explanation of the syntax of reduce. For more information, please see the description of MDN's reduce ().

Definition: executes a custom accumulator for each element in the array, summarizing its results into a single return value

Form: array.reduce ((t, v, I, a) = > {}, initValue)

Parameters.

Callback: callback function (required)

InitValue: initial value (optional)

Parameters of the callback function

Total (t): the return value for which the accumulator completes the calculation (required)

Value (v): current element (required)

Index (I): index of the current element (optional)

Array (a): the array object to which the current element belongs (optional)

Process

Take t as the initial value of the cumulative result. If t is not set, the first element of the array is taken as the initial value.

Start traversing, use the accumulator to process v, accumulate the mapping results of v to t, end the loop, and return t

Enter the next loop and repeat until the last element of the array

Ends the traversal and returns the final t

The essence of reduce is to act the accumulator on the array members one by one, taking the value of the last output as the value of the next input. Let's take a simple chestnut and look at the results of reduce's calculation.

Const arr = [3,5,1,4,2]; const a = arr.reduce ((t, v) = > t + v); / / equivalent to const b = arr.reduce ((t, v) = > t + v, 0)

Reduce is essentially an accumulator function that accumulates array members through a user-defined accumulator to get a value generated by the accumulator. In addition, reduce has a younger brother reduceRight, and the functions of the two methods are actually the same, except that reduce is executed in ascending order and reduceRight is executed in descending order.

Calling reduce () and reduceRight () on an empty array will not execute its callback function, so reduce () is considered to be invalid for an empty array.

Advanced usage

The above simple chestnut alone is not enough to explain what reduce is. To demonstrate the charm of reduce, I offer you 25 scenarios to apply the advanced usage of reduce. Some advanced uses may need to be implemented in combination with other methods, which provides more possibilities for the diversification of reduce.

Some of the sample code may be written in a coquettish way. If you are not used to it, you can sort it out into your own custom.

Cumulative multiplication

Function Accumulation (... vals) {return vals.reduce ((t, v) = > t + v, 0);} function Multiplication (... vals) {return vals.reduce ((t, v) = > t * v, 1);} Accumulation (1,2,3,4,5); / / 15 Multiplication (1,2,3,4,5); / / 120,

Weight summation

Const scores = [{score: 90, subject: "chinese", weight: 0.5}, {score: 95, subject: "math", weight: 0.3}, {score: 85, subject: "english", weight: 0.2}]; const result = scores.reduce ((t, v) = > t + v.score * v.weight, 0); / / 90.5

Instead of reverse

Function Reverse (arr = []) {return arr.reduceRight ((t, v) = > (t.push (v), t), []);} Reverse ([1,2,3,4,5]); / / [5,4,3,2,1]

Instead of map and filter

Const arr = [0,1,2,3]; / instead of map: [0,2,4,6] const a = arr.map (v = > v * 2); const b = arr.reduce ((t, v) = > [... t, v * 2], []); / instead of filter: [2,3] const c = arr.filter (v = > v > 1) Const d = arr.reduce ((t, v) = > v > 1? [... t, v]: t, []); / instead of map and filter: [4,6] const e = arr.map (v = > v * 2) .filter (v = > v > 2); const f = arr.reduce ((t, v) = > v * 2 > 2? [. T, v * 2]: t, [])

Instead of some and every

Const scores = [{score: 45, subject: "chinese"}, {score: 90, subject: "math"}, {score: 60, subject: "english"}]; / instead of some: at least one qualified const isAtLeastOneQualified = scores.reduce ((t, v) = > v.score > = 60, false) / / true / / replace every: all qualified const isAllQualified = scores.reduce ((t, v) = > t & & v.score > = 60, true); / / false

Array partition

Function Chunk (arr = [], size = 1) {return arr.length? Arr.reduce ((t, v) = > (t [t.length-1] .length = = size? T.push ([v]): t [t.length-1] .push (v), [[]]): [];} const arr = [1,2,3,4,5]; Chunk (arr, 2); / / [1,2], [3,4], [5]]

Array filtering

Function Difference (arr = [], oarr = []) {return arr.reduce ((t, v) = > (! oarr.includes (v) & & t.push (v), t), []);} const arr1 = [1,2,3,4,5]; const arr2 = [2,3,6] Difference (arr1, arr2); / / [1,4,5]

Array filling

Function Fill (arr = [], val = "", start = 0, end = arr.length) {if (start)

< 0 || start >

= end | | end > arr.length) return arr; return [. Arr.slice (0, start),... arr.slice (start, end). Reduce ((t, v) = > (t.push (val | | v), t), []),... arr.slice (end, arr.length)];} const arr = [0, 1, 2, 3, 4, 5, 6] Fill (arr, "aaa", 2,5); / / [0,1, "aaa", "aaa", "aaa", 5,6]

Array flat

Function Flat (arr = []) {return arr.reduce ((t, v) = > t.concat (Array.isArray (v)? Flat (v): v), []} const arr = [0,1, [2,3], [4,5, [6,7]], [8, [9,10, [11,12]; Flat (arr); / / [0,1,2,3,4,5, 6, 7, 8, 9, 10, 11, 12]

Array deduplication

Function Uniq (arr = []) {return arr.reduce ((t, v) = > t.includes (v)? T: [... t, v], []);} const arr = [2, 1, 0, 3, 2, 1, 2]; Uniq (arr); / / [2, 1, 0, 3]

Array maximum and minimum

Function Max (arr = []) {return arr.reduce ((t, v) = > t > v? T: v);} function Min (arr = []) {return arr.reduce ((t, v) = > t

< v ? t : v); }const arr = [12, 45, 21, 65, 38, 76, 108, 43]; Max(arr); // 108 Min(arr); // 12 数组成员独立拆解 function Unzip(arr = []) { return arr.reduce( (t, v) =>

(v.forEach ((w, I) = > t [I] .push (w)), Array.from ({length: Math.max (... arr.map (v = > v.length))}) .map (v = > []));} const arr = [[a ", 1, true], [" b ", 2, false]]; Unzip (arr) / [["a", "b"], [1,2], [true, false]]

Statistics on the number of members of an array

Function Count (arr = []) {return arr.reduce ((t, v) = > (t [v] = (t [v] | | 0) + 1, t), {});} const arr = [0, 1, 1, 2, 2]; Count (arr); / / {0: 1, 1: 2, 2: 3} this method is the principle of character statistics and word statistics.

Array member position record

Function Position (arr = [], val) {return arr.reduce ((t, v, I) = > (v = val & & t.push (I), t), []);} const arr = [2,1,5,4,2,1,6,6,7]; Position (arr, 2); / / [0,4]

Array member property grouping

Function Group (arr = [], key) {return key? Arr.reduce ((t, v) = > (! t [key]) & & (t [key]] = []), t [v [key] .push (v), {}): {} } const arr = [{area: "GZ", name: "YZW", age: 27}, {area: "GZ", name: "TYJ", age: 25}, {area: "SZ", name: "AAA", age: 23}, {area: "FS", name: "BBB", age: 21}, {area: "SZ", name: "CCC", age: 19}] / / Group (arr, "area") based on regional area; / / {GZ: Array (2), SZ: Array (2), FS: Array (1)}

Statistics of keywords contained in array members

Function Keyword (arr = [], keys = []) {return keys.reduce ((t, v) = > (arr.some (w = > w.includes (v)) & & t.push (v), t), []) } const text = ["it's a beautiful day today, I want to go fishing", "I do my homework while watching TV", "Xiao Ming likes Xiao Hong, the deskmate, and Xiao Jun at the back table, he is really TM flirtatious", "too many people like to touch fish at work recently, they don't write the code properly, and they are delusional." Const keyword = ["lazy", "like", "sleep", "fish touching", "nice", "side", "tomorrow"]; Keyword (text, keyword); / ["like", "touch fish", "really nice", "side"]

String flipping

Function ReverseStr (str = ") {return str.split ("). ReduceRight ((t, v) = > t + v);} const str = "reduce is the best"; ReverseStr (str); / / "the most awesome"

Digital differentiation

Function ThousandNum (num = 0) {const str = (+ num). ToString (). Split ("."); const int = nums = > nums.split ("). Reverse (). ReduceRight ((t, v, I) = > t + (I% 3? V: `${v},`), "). Replace (/ ^, |, $/ g,"); const dec = nums = > nums.split (") .reduce ((t, v, I) = > t + ((I + 1)% 3? V: `${v},`), "). Replace (/ ^, |, $/ g,"); return str.length > 1? `${int (str [0])}. ${dec (str [1])}`: int (str [0]);} ThousandNum (1234); / / "1234" ThousandNum (1234.00); / / "1234" ThousandNum (0.1234); / / "0.123 ThousandNum 4" (1234.5678) / / "1234.567 Jol 8"

Asynchronous accumulation

Async function AsyncTotal (arr = []) {return arr.reduce (async (t, v) = > {const at = await t; const todo = await Todo (v); at [v] = todo; return at;}, Promise.resolve ({}));} const result = await AsyncTotal (); / / need to be surrounded by async

Fibonacci series

Function Fibonacci (len = 2) {const arr = [... new Array (len). Keys ()]; return arr.reduce ((t, v, I) = > (I > 1 & & t.push (t [I-1] + t [I-2]), t), [0,1]);} Fibonacci (10); / / [0,1,1,2,3,5,8,13,21,34]

URL parameter deserialization

Function ParseUrlSearch () {return location.search.replace (/ (^\?) | (& $) / g, "). Split (" & "). Reduce ((t, v) = > {const [key, val] = v.split (" = "); t [key] = decodeURIComponent (val); return t;}, {});} / suppose URL is: https://www.baidu.com?age=25&name=TYJ ParseUrlSearch () / / {age: "25", name: "TYJ"}

URL parameter serialization

Function StringifyUrlSearch (search = {}) {return Object.entries (search). Reduce ((t, v) = > `${t} ${v [0]} = ${encodeURIComponent (v [1])} &`, Object.keys (search). Length? ":") .replace (/ & $/ ");} StringifyUrlSearch ({age: 27, name:" YZW "}); / /"? age=27&name=YZW "

Returns the specified key value of the object

Function GetKeys (obj = {}, keys = []) {return Object.keys (obj). Reduce ((t, v) = > (keys.includes (v) & & (t [v] = obj [v]), t), {});} const target = {a: 1, b: 2, c: 3, d: 4}; const keyword = [a "," d "]; GetKeys (target, keyword); / / {a: 1, d: 4}

Array to object

Const people = [{area: "GZ", name: "YZW", age: 27}, {area: "SZ", name: "TYJ", age: 25}]; const map = people.reduce ((t, v) = > {const {name,... rest} = v; t [name] = rest; return t;}, {}); / / {YZW: {… }, TYJ: {... }}

Redux Compose function principle

Function Compose (... funs) {if (funs.length = 0) {return arg = > arg;} if (funs.length = 1) {return funs [0];} return funs.reduce ((t, v) = > (... arg) = > t (v (.arg);}

Compatibility and performanc

It's easy to use, but what about compatibility? Search on Caniuse, the compatibility is absolutely good, and you can use it boldly on any project. Don't be stingy with your imagination and make the most of reduce's compose skills. For often doing some cumulative functions, reduce is definitely the preferred method.

In addition, some students may ask, what about the performance of reduce? Let's look at the execution time of each of the four methods by adding up to 100000 for for-in, forEach, map and reduce at the same time.

/ / create an array of length 100000 const list = [. New Array (100000). Keys ()]; / / for-in console.time ("for-in"); let result1 = 0; for (let I = 0; I)

< list.length; i++) { result1 += i + 1; } console.log(result1); console.timeEnd("for-in"); // forEach console.time("forEach"); let result2 = 0; list.forEach(v =>

(result2 + = v + 1); console.log (result2); console.timeEnd ("forEach"); / / map console.time ("map"); let result3 = 0; list.map (v = > (result3 + = v + 1, v)); console.log (result3); console.timeEnd ("map"); / / reduce console.time ("reduce"); const result4 = list.reduce ((t, v) = > t + v + 1, 0); console.log (result4) Console.timeEnd ("reduce"); cumulative operation execution time for-in6.719970703125msforEach3.696044921875msmap3.554931640625msreduce2.806884765625ms

The above code is executed under Chrome 79 of MacBook Pro 2019 15-inch 16G memory 512g flash memory. There may be differences in the execution of the above code on different machines in different environments.

This is the end of the content of "what are the advanced uses of array reduce". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.