Pourquoi JavaScript utilise-t-il la programmation fonctionnelle ?

Raisons : 1. La syntaxe de js est empruntée au langage de programmation fonctionnel Scheme. 2. En ce qui concerne le navigateur, avec le développement de divers frameworks à page unique, les capacités de traitement du client continuent de s'améliorer et de plus en plus de logique métier est placée sur le client, ce qui entraîne de plus en plus d'états. maintenu par le client. ;Le problème qui en découle est que si vous n'y faites pas attention, vous utiliserez un grand nombre de fonctions qui dépendent de variables externes. Ces fonctions continuent d'augmenter avec la logique métier, ce qui entraîne une forte augmentation des branches logiques. rendant le statut difficile à suivre, une mauvaise lisibilité du code et difficile à maintenir, et la programmation fonctionnelle a une bonne solution.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

1. Qu'est-ce que la programmation fonctionnelle ?

La programmation fonctionnelle (FP), appelée FP, n'est pas une bibliothèque ou un framework, contrairement à la programmation procédurale (Procedural Programming), mais un paradigme de programmation. FP évite ou minimise les effets secondaires des appels de fonction sur les états et systèmes externes en déclarant un traitement de données abstrait de fonction pure.

Les soi-disant effets secondaires incluent généralement la modification de l'état du système en dehors de la fonction, l'émission d'exceptions, le traitement des opérations utilisateur, la modification des paramètres d'entrée, les opérations de requête de base de données, les opérations DOM, etc., qui peuvent provoquer des erreurs système.

2. Pourquoi utiliser des idées de programmation fonctionnelle en JavaScript

2.1 Du point de vue des fonctionnalités du langage

La syntaxe de JavaScript au début a été empruntée au langage de programmation fonctionnelle Scheme. Avec l'avancement des standards du langage, les fonctionnalités du langage lui-même sont constamment enrichies. Les fermetures, les fonctions fléchées, les fonctions d'ordre supérieur, l'itération de tableau et d'autres fonctions facilitent l'implémentation de FP en JavaScript. Parlons brièvement de quelques fonctionnalités :

.

2.1.1. Expression Lambda

L'expression lambda est en fait une fonction anonyme qui utilise des flèches pour représenter clairement la relation de mappage entre l'entrée et la sortie. JavaScript utilise des fonctions de flèche pour l'implémenter.

const multiply = x => x * x
multiply(6) // 36

2.1.2 Fonctions d'ordre supérieur

Les fonctions d'ordre supérieur peuvent accepter une ou plusieurs fonctions comme paramètres d'entrée et générer une fonction.

Écrivez deux exemples simples

const add = x => y => x + y
const add10 = add(10)
add10(5) // 15
const compose = (...fns) => x =>  fns.reduce((acc, fn) => fn(acc), x)
const a = x => x + 1
const b = x => x + 2
const composedFn = compose(a, b)
composedFn(1) // 1 + 1 + 2 = 4

2.1.3 carte de filtre pour chaque itération de réduction

La carte de filtre pour chaque réduction sous Array.prototype sont toutes des fonctions d'ordre élevé, car le paramètre d'entrée est une fonction.

const flatten = (arr = []) => arr.reduce(
  (acc, val)=> accconcat(Array.isArray(val) ? flatten(val) : val),
  []
)
let arr = [1,[ 4, 5 ], 2, 3];
flatten(arr)  // [1, 4, 5, 2, 3]

2.2 Du point de vue de la demande réelle

En ce qui concerne le navigateur, avec le développement de divers frameworks monopage, les capacités de traitement du client continuent de s'améliorer et de plus en plus de logique métier est mise en place en fin de compte, le client a de plus en plus d’états à maintenir. Le problème qui se pose est que si l'on n'y prend pas garde, on utilisera un grand nombre de fonctions qui dépendent de variables externes. Ces fonctions continuent d'augmenter avec la logique métier, ce qui entraîne une forte augmentation des branches logiques, rendant le statut difficile à obtenir. track, mauvaise lisibilité du code et difficile à maintenir, et FP a juste une bonne solution.

De plus, les langages de programmation traditionnels ont désormais essentiellement introduit les fonctionnalités de la programmation fonctionnelle. Même Java, qui est célèbre pour son approche orientée objet, peut toujours mettre en pratique des idées de programmation fonctionnelle en utilisant des expressions stream + lambda, et Spring5 l'intègre même. Réactif En bref, comme principal argument de vente, FP est très populaire ces derniers temps.

L'écosystème de programmation fonctionnelle de JS est également constamment enrichi et des frameworks tels que RxJS et circleJS sont de plus en plus utilisés dans les lignes de production front-end.

3. Avantages de l'utilisation de la programmation fonctionnelle

L'utilisation de la programmation FP présente principalement les avantages suivants :

• Données séparées et logique de traitement, le code est plus concis, modulaire et lisible

• Facile à tester , l'environnement de test est facile à simuler

• Le code logique est hautement réutilisable

Quatre concepts liés à la programmation fonctionnelle

La mise en œuvre de la programmation fonctionnelle repose principalement sur :

• Déclaration déclarative. programmation

• Fonction pure

• Données immuables

4.1 Programmation déclarative

Programmation déclarative décrit uniquement la nature de la cible, faisant ainsi abstraction de la logique formelle et indiquant à l'ordinateur qu'il doit calculer Quoi au lieu de comment calculer étape par étape. Par exemple, régulier, SQL, FP, etc.

Programmation impérative Indiquez à l'ordinateur l'opération de calcul de chaque étape

Le plus simple, le même traitement de tableau, l'utilisation de la boucle for est impérative, l'utilisation de la carte et d'autres opérations est déclarative. L'utilisation de la programmation déclarative simplifie le code, améliore la réutilisation et laisse la place à la refactorisation.

4.2 Fonctions pures

Un bref résumé des fonctions pures a deux caractéristiques :

• La sortie d'une fonction est uniquement liée à l'entrée. La sortie produite par la même entrée est cohérente et ne dépend pas de l'extérieur. conditions

• Appel de fonction Il ne changera pas l'état ou les variables en dehors du domaine de la fonction et n'aura pas d'effets secondaires sur le système

看个简单的例子：

let counter = 0
const increment = () => ++counter
const increment = counter => ++counter

前一个函数每次调用都会修改外部变量的值，返回值也依赖于外部变量；后一个函数对于同一输入值每次返回的结果都相同，并且不会对外部状态造成影响。所以后一个是纯函数。

为什么要追求函数的纯度，这就涉及到一个称为引用透明性的概念。

4.2.1 引用透明性

纯函数的这种函数的返回值只依赖于其输入值的特性，被称为引用透明性（referential transparency)，纯函数都是可以进行缓存的。

const memorize(pureFn) {
  const _cache = {}
  return (...args) => {
    const key = JSON.stringify(args)
    return _cache[key] || (_cache[key] = purFu.apply(null, args))
  }
}

4.3 Immutable Data

「可变的全局状态是万恶之源」（其实从功能代码的角度看，局部和全局是相对而言的）,简而言之可变状态会让程序的运行变得不可预测，代码可读性差，难以维护。

在 JS 中，当函数入参是对象类型的数据时，我们拿到的其实是个引用，所以即使在函数内部我们也是可以修改对象内部的属性，这种情景依然会产生副作用。

所以这个时候就需要引入 Immutable 的概念。 Immutable 即 unchangeable， Immutable data在初始化创建后就不能被修改了，每次对于 Immutable data 的操作都会返回一个新的 Immutable data。 所以并不会对原来的状态形成改变（当然不是简单的深拷贝再修改）。

Immutable 比较流行的 JS 实现有 immutable-js 和 seamless-immutable; 对于 React 党来说， immutable-js 一点都不陌生， immutable-js 配合 Redux 就是一种很好的 FP 实践。

const map1 = Immutable.Map({a:1, b: {d:2}, c:3});
const map2 = map1.set('a', 50);
map1 === map2 // false
const mapb1 = map1.get('b')
const mapb2 = map2.get('b')
mapb1===mapb2 // true

【相关推荐：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!