Let's talk about JavaScript functional programming-JS Tutorial-php.cn

This article brings you relevant knowledge about javascript, which mainly introduces issues related to functional programming. Functional programming can be understood as a programming method that uses functions as the main carrier. Use functions to disassemble and abstract general expressions. I hope it will be helpful to everyone.

Let's talk about JavaScript functional programming

Related recommendations: javascript learning tutorial

I have seen many explanations about functional programming, but most of them stay at At the theoretical level, there are also some that are only for purely functional programming languages such as Haskell. The purpose of this article is to talk about the specific practice of functional programming in JavaScript in my eyes. The reason why it is "in my eyes" means that what I say only represents my personal opinion, which may conflict with some strict concepts.

This article will omit a lot of formal concept introduction, and focus on showing what functional code is in JavaScript, what is the difference between functional code and general writing, and what functional code can bring us What are the benefits and what are some common functional models?

My understanding of functional programming
I think functional programming can be understood as a programming method that uses functions as the main carrier, using functions to disassemble and abstract general expressions

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

Clearer semantics
Higher reusability
Better maintainability
Limited scope, fewer side effects
Basic functions Formula programming
The following example is a specific functional embodiment

Javascript code

// 数组中每个单词，首字母大写  // 一般写法  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);  
  
  // 函数式写法一  function upperFirst(word) {  
  return word[0].toUpperCase() + word.slice(1);  }  
  function wordToUpperCase(arr) {  
  return arr.map(upperFirst);  }  
  console.log(wordToUpperCase(['apple', 'pen', 'apple-pen']));  
  
  // 函数式写法二  console.log(arr.map(['apple', 'pen', 'apple-pen'], word => word[0].toUpperCase() + word.slice(1)));

Copy after login

When the situation becomes more complicated, the way to write expressions will encounter several problems ：

The meaning is not obvious and gradually becomes difficult to maintain
The reusability is poor and more code will be generated
A lot of intermediate variables will be generated
Functional programming solves the above problems very well question. First, refer to functional writing method 1, which takes advantage of function encapsulation to decompose functions (the granularity is not unique), encapsulates them into different functions, and then uses combined calls to achieve the purpose. This makes the expression clear and easy to maintain, reuse and extend. Secondly, using higher-order functions, Array.map replaces for...of for array traversal, reducing intermediate variables and operations.

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

Chain Optimization

From the functional writing method 2 above, we can see that during the writing process of functional code, it is easy to cause horizontal extension, that is, produce With multiple levels of nesting, let’s take a more extreme example below.

Javascript code

// 计算数字之和  
  // 一般写法  console.log(1 + 2 + 3 - 4)  
  
  // 函数式写法  function sum(a, b) {  
  return a + b;  }  
  function sub(a, b) {  
  return a - b;  }  
  console.log(sub(sum(sum(1, 2), 3), 4);  本例仅为展示 横向延展 的比较极端的情况，随着函数的嵌套层数不断增多，导致代码的可读性大幅下降，还很容易产生错误。 

在这种情况下，我们可以考虑多种优化方式，比如下面的 链式优化 。 
// 优化写法 (嗯，你没看错，这就是 lodash 的链式写法) Javascript代码 


const utils = {  
  chain(a) {  
    this._temp = a;  
    return this;  
  },  
  sum(b) {  
    this._temp += b;  
    return this;  
  },  
  sub(b) {  
    this._temp -= b;  
    return this;  
  },  
  value() {  
    const _temp = this._temp;  
    this._temp = undefined;  
    return _temp;  
  }  };  
  console.log(utils.chain(1).sum(2).sum(3).sub(4).value());

Copy after login

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

Javascript code

// 顺序请求两个接口  
  
  // 回调函数  import $ from 'jquery';  $.post('a/url/to/target', (rs) => {  
  if(rs){  
    $.post('a/url/to/another/target', (rs2) => {  
      if(rs2){  
        $.post('a/url/to/third/target');  
      }  
    });  
  }  });  
  
  // Promise  import request from 'catta';  // catta 是一个轻量级请求工具，支持 fetch,jsonp,ajax，无依赖  request('a/url/to/target')  
  .then(rs => rs ? $.post('a/url/to/another/target') : Promise.reject())  
  .then(rs2 => rs2 ? $.post('a/url/to/third/target') : Promise.reject());

Copy after login

As the nested level of callback functions and the complexity of a single layer increase, it will become bloated and difficult to maintain, and the chain structure of Promise, in high complexity , it can still be expanded vertically, and the hierarchical isolation is very clear.

Common functional programming model

Closure

A block of code that can retain local variables and not be released is called a closure

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

So what benefits can closure bring to us?

Let’s first look at how to create a closure:

Javascript code

// 创建一个闭包  function makeCounter() {  
  let k = 0;  
  
  return function() {  
    return ++k;  
  };  }  
  const counter = makeCounter();  
  console.log(counter());  // 1  console.log(counter());  // 2

Copy after login

makeCounter The code block of this function, in the returned function, performs the local variable k The reference is missing, causing the local variable to be unable to be recycled by the system after the function execution is completed, resulting in a closure. The function of this closure is to "retain" the local variable so that the variable can be reused when the inner function is called; unlike global variables, this variable can only be referenced inside the function.

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

So from this example, we can conclude that the conditions for creating a closure are:

There are two layers of functions, inner and outer.
The inner function modifies the local variables of the outer function. Quote
Purpose of closure
The main purpose of closure is to define some persistent variables with limited scope. These variables can be used for caching or intermediate calculations, etc.

Javascript code

// 简单的缓存工具  // 匿名函数创造了一个闭包  const cache = (function() {  
  const store = {};  
    
  return {  
    get(key) {  
      return store[key];  
    },  
    set(key, val) {  
      store[key] = val;  
    }  
  }  }());  
  cache.set('a', 1);  cache.get('a');  // 1

Copy after login

The above example is the implementation of a simple caching tool. The anonymous function creates a closure so that the store object can always be referenced and will not be recycled.

Disadvantages of closure
Persistent variables will not be released normally and continue to occupy memory space, which can easily cause memory waste, so some additional manual cleanup mechanisms are generally required.

Higher-order function

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

听上去很高冷的一个词汇，但是其实我们经常用到，只是原来不知道他们的名字而已。JavaScript 语言是原生支持高阶函数的，因为 JavaScript 的函数是一等公民，它既可以作为参数又可以作为另一个函数的返回值使用。

我们经常可以在 JavaScript 中见到许多原生的高阶函数，例如 Array.map , Array.reduce , Array.filter

下面以 map 为例，我们看看他是如何使用的

map （映射）

映射是对集合而言的，即把集合的每一项都做相同的变换，产生一个新的集合

map 作为一个高阶函数，他接受一个函数参数作为映射的逻辑

Javascript代码

// 数组中每一项加一，组成一个新数组  
  // 一般写法  const arr = [1,2,3];  const rs = [];  for(const n of arr){  
  rs.push(++n);  }  console.log(rs)  
  
  // map改写  const arr = [1,2,3];  const rs = arr.map(n => ++n);

Copy after login

上面一般写法，利用 for…of 循环的方式遍历数组会产生额外的操作，而且有改变原数组的风险

而 map 函数封装了必要的操作，使我们仅需要关心映射逻辑的函数实现即可，减少了代码量，也降低了副作用产生的风险。

柯里化（Currying）

给定一个函数的部分参数，生成一个接受其他参数的新函数

可能不常听到这个名词，但是用过 undescore 或 lodash 的人都见过他。

有一个神奇的 _.partial 函数，它就是柯里化的实现

Javascript代码

// 获取目标文件对基础路径的相对路径  
  
  // 一般写法  const BASE = '/path/to/base';  const relativePath = path.relative(BASE, '/some/path');  
  
  // _.parical 改写  const BASE = '/path/to/base';  const relativeFromBase = _.partial(path.relative, BASE);  
  const relativePath = relativeFromBase('/some/path');

Copy after login

通过 _.partial ，我们得到了新的函数 relativeFromBase ，这个函数在调用时就相当于调用 path.relative ，并默认将第一个参数传入 BASE ，后续传入的参数顺序后置。

本例中，我们真正想完成的操作是每次获得相对于 BASE 的路径，而非相对于任何路径。柯里化可以使我们只关心函数的部分参数，使函数的用途更加清晰，调用更加简单。

组合（Composing）

将多个函数的能力合并，创造一个新的函数

同样你第一次见到他可能还是在 lodash 中，compose 方法（现在叫 flow）

Javascript代码

// 数组中每个单词大写，做 Base64  
  
  // 一般写法 (其中一种)  const arr = ['pen', 'apple', 'applypen'];  const rs = [];  for(const w of arr){  
  rs.push(btoa(w.toUpperCase()));  }  console.log(rs);  
  
  // _.flow 改写  const arr = ['pen', 'apple', 'applypen'];  
  const upperAndBase64 = _.partialRight(_.map, _.flow(_.upperCase, btoa));  
  console.log(upperAndBase64(arr));

Copy after login

_.flow 将转大写和转 Base64 的函数的能力合并，生成一个新的函数。方便作为参数函数或后续复用。

自己的观点
我理解的 JavaScript 函数式编程，可能和许多传统概念不同。我并不只认为高阶函数算函数式编程，其他的诸如普通函数结合调用、链式结构等，我都认为属于函数式编程的范畴，只要他们是以函数作为主要载体的。

而我认为函数式编程并不是必须的，它也不应该是一个强制的规定或要求。与面向对象或其他思想一样，它也是其中一种方式。我们更多情况下，应该是几者的结合，而不是局限于概念。