Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "JavaScript functional programming case analysis". Many people will encounter such a 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!

Functional programming that I understand

I think functional programming can be understood as using functions as the main carrier of programming, using functions to disassemble and abstract general expressions.

What are the advantages of this compared to imperative? The main points are as follows:

The semantics are clearer.

Higher reusability

Better maintainability

Limited scope and few side effects

Basic functional programming

The following example is a concrete functional representation

For each word in the array, the initials are capitalized / / generally written const arr = ['apple',' pen', 'apple-pen']; for (const i in arr) {const c = arr [I] [0]; arr [I] = c.toUpperCase () + arr [I] .slice (1);} console.log (arr); / / functional function upperFirst (word) {return word [0] .toUpperCase () + word.slice (1) } function wordToUpperCase (arr) {return arr.map (upperFirst);} console.log (wordToUpperCase (['apple',' pen', 'apple-pen'])); / / functional two console.log (arr.map ([' apple', 'pen',' apple-pen'], word = > word [0] .toUpperCase () + word.slice (1)

When the situation becomes more complicated, there are several problems with the way the expression is written:

The meaning is not obvious, and gradually becomes difficult to maintain.

Poor reusability will result in more code

It produces a lot of intermediate variables.

Functional programming solves the above problems very well. First of all, see the function writing method 1, which uses the function encapsulation to disassemble the function (the granularity is not *), and encapsulates it into different functions, and then uses the combined calls to achieve the purpose. This makes it clear and easy to maintain, reuse, and extend. Secondly, using higher-order function, Array.map instead of for. Of does array traversal, reducing intermediate variables and operations.

The main difference between functional writing method 1 and functional method 2 is that we can consider whether there is the possibility of subsequent reuse of the function, if not, the latter is better.

Chain optimization

From the above functional writing method 2, we can see that in the process of writing functional code, it is easy to cause horizontal extension, that is, multi-layer nesting. Let's give an example of a more extreme point.

/ calculate the sum of numbers / / General console.log (1 + 2 + 3-4) / / functional function sum (a, b) {return a + b;} function sub (a, b) {return a-b;} console.log (sum (sum (1,2), 3), 4)

This example is only to show the more extreme cases of horizontal extension, as the number of nesting layers of the function continues to increase, resulting in a significant decline in the readability of the code, but also prone to errors.

In this case, we can consider a variety of optimization methods, such as the following chain optimization.

/ / optimize the writing (well, you read it correctly, this is how lodash is chained) const utils = {chain (a) {this._temp = a this._temp return this;}, sum (b) {this._temp + = bscape return this;}, sub (b) {this._temp-= bscape return this;}, value () {const _ temp = this._temp;this._temp = undefined;return _ return} Console.log (utils.chain (1) .sum (2) .sum (3) .sub (4) .value ())

After rewriting in this way, the structure as a whole will become clearer, and what each link of the chain is doing can be easily shown. Another good example of the comparison between function nesting and chaining is the callback function and the Promise pattern.

/ / request two interfaces sequentially / / callback function import $from 'jquery';$.post (' an if rs2 to target targets, (rs) = > {if (rs) {$.post) ('an if rs2 to an other target, (post) = > {if (URL) {$.post ('a rs2 to a thirdtarget);}) / / catta is a lightweight request tool that supports fetch,jsonp,ajax, request without dependencies (rs = > rs? $.post): Promise.reject () .then (rs2 = > rs2? $.post): Promise.reject ()

As the nesting level and single-layer complexity of the callback function increases, it will become bloated and difficult to maintain, while the chained structure of Promise can still scale vertically at high complexity, and the hierarchical isolation is clear.

Common functional programming model closures (Closure)

A block of code that can keep local variables from being released is called a closure

The concept of closure is abstract. I believe everyone knows and uses this feature more or less.

So what benefits can closures bring to us?

Let's take a look at how to create a closure:

/ / create a closure function makeCounter () {let k = 0; return function () {return + + k;};} const counter = makeCounter (); console.log (counter ()); / / 1console.log (counter ()); / / 2

The code block of the makeCounter function refers to the local variable k in the returned function, so that the local variable can not be recovered by the system at the end of the function execution, resulting in a closure. The purpose of this closure is to "retain" the local variable so that the variable can be reused when the inner function is called, unlike a global variable, which can only be referenced within the function.

In other words, closures actually create "persistence variables" that are private to the function.

So from this example, we can conclude that the conditions for closures are:

There are inner and outer functions.

The inner layer function refers to the local variable of the outer layer function.

The purpose of closures

The main purpose of closures is to define scoped persistent variables that can be used as intermediate amounts for caching or computation, and so on.

/ / simple caching tool / / Anonymous function creates a closure const cache = (function () {const store = {}; return {get (key) {return store [key];}, set (key, val) {store [key] = val;}} ()); cache.set ('asides, 1); cache.get (' a'); / / 1

The above example is an implementation of a simple caching tool where anonymous functions create a closure so that store objects can always be referenced and not recycled.

The disadvantages of closures

Persistent variables will not be released normally, continue to take up memory space, it is easy to cause memory waste, so it generally requires some additional manual cleaning mechanism.

Higher order function

A function that accepts or returns a function is called a higher order function.

It sounds like a cold word, but in fact we often use it, but we just don't know their names. The JavaScript language natively supports higher-order functions because the JavaScript function is a first-class citizen and can be used both as an argument and as a return value of another function.

We can often see many native higher-order functions in JavaScript, such as Array.map, Array.reduce, Array.filter

Let's take map as an example, and let's see how it works.

Map (Mapping)

Mapping is for a set, that is, every item of the set is transformed the same way to produce a new set.

As a higher-order function, map accepts a function parameter as the logic of the mapping.

/ / add one to each item in the array to form a new array / / the general way of writing is const arr = [1jie 2jue 3]; const rs = []; for (const n of arr) {rs.push (+ + n);} console.log (rs) / / map rewrite const arr = [1jue 2jue 3]; const rs = arr.map (n = > + + n)

Generally speaking, traversing the array using the for...of loop results in additional operations, and there is a risk of changing the original array

The map function encapsulates the necessary operations, so that we only need to care about the function implementation of the mapping logic, reducing the amount of code and the risk of side effects.

Corey (Currying)

Given some of the parameters of a function, generate a new function that accepts other parameters

You may not hear the term very often, but anyone who has used undescore or lodash has seen him.

There is a magical _. Partial function, which is the implementation of Coriarization.

/ / get the relative path of the target file to the base path / / generally write const BASE ='/ path/to/base';const relativePath = path.relative (BASE,'/ some/path'); / _ .parical rewrite const BASE ='/ path/to/base';const relativeFromBase = _ .partial (path.relative, BASE); const relativePath = relativeFromBase ('/ some/path')

Through _ .partial, we get a new function relativeFromBase, which is equivalent to calling path.relative when called. By default, * parameters are passed into BASE, and the subsequent parameters are sequenced later.

In this case, what we really want to do is to get the path relative to the BASE each time, not to any path. Corialization can make us only care about some of the parameters of the function, which makes the purpose of the function clearer and the call easier.

Combination (Composing)

Combine the capabilities of multiple functions to create a new function

Similarly, the first time you see him may be in lodash, the compose method (now called flow)

Capitalize each word in the array and write Base64// (one of them) const arr = ['pen',' apple', 'applypen']; const rs = []; for (const w of arr) {rs.push (btoa (w.toUpperCase ();} console.log (rs); / _ .flow rewrite const arr = [' pen', 'apple',' applypen'] Const upperAndBase64 = _ .partialRight (_ .map, _ .flow (_ .upperCase, btoa)); console.log (upperAndBase64 (arr))

_. Flow combines the ability to uppercase and Base64 functions to generate a new function. It is convenient to be used as a parameter function or subsequent reuse.

This is the end of the content of "JavaScript functional programming example Analysis". 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.