Parlons de la programmation fonctionnelle JavaScript

Cet article vous apporte des connaissances pertinentes sur javascript, qui introduit principalement les problèmes liés à la programmation fonctionnelle. La programmation fonctionnelle peut être comprise comme une méthode de programmation qui utilise des fonctions comme support principal et utilise des fonctions pour désassembler et des expressions générales abstraites, j'espère. cela sera utile à tout le monde.

Recommandations associées : Tutoriel d'apprentissage Javascript

J'ai vu de nombreuses explications sur la programmation fonctionnelle, mais la plupart d'entre elles sont au niveau théorique, et certaines concernent uniquement les langages de programmation fonctionnels purs​​tels que Haskell . Le but de cet article est de parler de la pratique spécifique de la programmation fonctionnelle en JavaScript à mes yeux. La raison pour laquelle elle est « à mes yeux » signifie que ce que je dis ne représente que mon opinion personnelle, qui peut entrer en conflit avec certains concepts stricts.

Cet article omettra de nombreuses introductions formelles de concepts et se concentrera sur la démonstration de ce qu'est le code fonctionnel en JavaScript, quelle est la différence entre le code fonctionnel et l'écriture générale, quels avantages le code fonctionnel peut nous apporter et quels sont les principes fonctionnels courants. des modèles ?

La programmation fonctionnelle que je comprends
Je pense que la programmation fonctionnelle peut être comprise comme une méthode de programmation qui utilise les fonctions comme support principal, utilisant des fonctions pour démonter et abstraire des expressions générales

Par rapport aux impératifs, les avantages de ce Où ? Les principaux points sont les suivants :

Sémantique plus claire
Réutilisabilité plus élevée
Meilleure maintenabilité
Portée limitée, moins d'effets secondaires
Programmation fonctionnelle de base
L'exemple suivant est une incarnation fonctionnelle spécifique

Code Javascript

// 数组中每个单词，首字母大写  // 一般写法  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)));

Quand la situation devient plus complexe, la manière d'écrire les expressions rencontrera plusieurs problèmes :

Le sens n'est pas évident et devient progressivement difficile à maintenir
La réutilisabilité est mauvaise, ce qui générera plus de code
Générer beaucoup de variables intermédiaires
La programmation fonctionnelle résout ce qui précède très bien les problèmes. Tout d'abord, reportez-vous à la méthode d'écriture fonctionnelle 1, qui utilise l'encapsulation de fonctions pour désassembler les fonctions (la granularité n'est pas unique), les encapsuler dans différentes fonctions, puis utiliser des appels combinés pour atteindre l'objectif. Cela rend l’expression claire et facile à maintenir, à réutiliser et à étendre. Deuxièmement, en utilisant des fonctions d'ordre supérieur, Array.map remplace for...of pour le parcours de tableau, réduisant ainsi les variables et opérations intermédiaires.

La principale différence entre la méthode d'écriture fonctionnelle 1 et la méthode d'écriture fonctionnelle 2 est que vous pouvez déterminer si la fonction a la possibilité d'être réutilisée dans le futur. Sinon, cette dernière est meilleure.

Optimisation de la chaîne

À partir de la méthode d'écriture fonctionnelle 2 ci-dessus, nous pouvons voir que dans le processus d'écriture de code fonctionnel, il est facile de provoquer une extension horizontale, c'est-à-dire de produire plusieurs couches d'imbrication. Prenons un extrême. point ci-dessous Exemple.

Code Javascript

// 计算数字之和  
  // 一般写法  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());

Après une réécriture de cette manière, la structure globale deviendra plus claire et ce que fait chaque maillon de la chaîne pourra être facilement affiché. Un autre bon exemple de comparaison entre l'imbrication de fonctions et le chaînage est la fonction de rappel et le modèle Promise.

Code Javascript

// 顺序请求两个接口  
  
  // 回调函数  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());

À mesure que le niveau imbriqué des fonctions de rappel et la complexité d'une seule couche augmentent, il deviendra gonflé et difficile à maintenir. Cependant, la structure en chaîne de Promise peut encore s'étendre verticalement lorsque la complexité est élevée, et. La séparation des niveaux est claire.

Modèle de programmation fonctionnelle commun

Closure

Un bloc de code qui peut conserver des variables locales et ne pas être publié s'appelle une fermeture

Le concept de fermeture est relativement abstrait, je crois que tout le monde l'a plus ou moins Connaître et utiliser cette fonctionnalité

Alors quels bénéfices la fermeture peut-elle nous apporter ?

Voyons d'abord comment créer une fermeture :

Code Javascript

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

makeCounter Le bloc de code de cette fonction fait référence à la variable locale k dans la fonction renvoyée, ce qui empêche l'utilisation de la variable locale une fois la fonction terminée. exécuté , est recyclé par le système, entraînant une fermeture. La fonction de cette fermeture est de « conserver » la variable locale afin que la variable puisse être réutilisée lorsque la fonction interne est appelée ; contrairement aux variables globales, cette variable ne peut être référencée qu'à l'intérieur de la fonction ;

En d'autres termes, les fermetures créent en fait des "variables persistantes" privées à la fonction.

Donc à partir de cet exemple, nous pouvons conclure que les conditions pour créer une fermeture sont :

Il existe deux niveaux de fonctions, interne et externe
La fonction interne fait référence aux variables locales de la fonction externe
Le but de la fermeture.
La fermeture L'objectif principal est de définir des variables persistantes à portée limitée, qui peuvent être utilisées pour la mise en cache ou des calculs intermédiaires, etc.

Code Javascript

// 简单的缓存工具  // 匿名函数创造了一个闭包  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

L'exemple ci-dessus est l'implémentation d'un simple outil de mise en cache. La fonction anonyme crée une fermeture afin que l'objet du magasin puisse toujours être référencé et ne soit pas recyclé.

Inconvénients de la fermeture
Les variables persistantes ne seront pas libérées normalement et continueront à occuper de l'espace mémoire, ce qui peut facilement entraîner un gaspillage de mémoire, donc certains mécanismes de nettoyage manuel supplémentaires sont généralement nécessaires.

Fonctions d'ordre supérieur

Une fonction qui accepte ou renvoie une fonction est appelée fonction d'ordre supérieur

听上去很高冷的一个词汇，但是其实我们经常用到，只是原来不知道他们的名字而已。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);

上面一般写法，利用 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');

通过 _.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));

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

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

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

相关推荐：javascript教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!