Exklusives Verständnis: JavaScript-Funktionsprogrammierung

Die funktionale JavaScript-Programmierung ist ein Thema, das es schon seit langem gibt, aber es scheint, dass es seit 2016 immer beliebter geworden ist. Dies kann daran liegen, dass die ES6-Syntax für die funktionale Programmierung benutzerfreundlicher ist, oder an der Beliebtheit funktionaler Frameworks wie RxJS (ReactiveX).

Ich habe viele Erklärungen zur funktionalen Programmierung gesehen, aber die meisten davon sind auf theoretischer Ebene und einige beziehen sich nur auf rein funktionale Programmiersprachen wie Haskell. Der Zweck dieses Artikels besteht darin, über die spezifische Praxis der funktionalen Programmierung in JavaScript in meinen Augen zu sprechen. Der Grund, warum er „in meinen Augen“ lautet, bedeutet, dass das, was ich sage, nur meine persönliche Meinung wiedergibt, was möglicherweise im Widerspruch zu einigen strengen Konzepten steht.

In diesem Artikel werden viele formale Konzepteinführungen weggelassen und der Schwerpunkt wird darauf gelegt, zu zeigen, was Funktionscode in JavaScript ist, was der Unterschied zwischen Funktionscode und allgemeiner Schreibweise ist, welche Vorteile Funktionscode uns bringen kann und welche allgemeinen Funktionsmodelle es gibt?

Was ich über funktionale Programmierung verstehe

Ich denke, funktionale Programmierung kann verstanden werden als Eine Programmiermethode, die Funktionen als Hauptträger verwendet und Funktionen verwendet, um allgemeine Ausdrücke zu zerlegen und zu abstrahieren

​Welche Vorteile bietet dies im Vergleich zu Imperativen? Die Hauptpunkte sind wie folgt:

• Die Semantik ist klarer

• 
  

• Höhere Wiederverwendbarkeit

• 
  

• Bessere Wartbarkeit

• 
  

• Begrenzter Anwendungsbereich, wenige Nebenwirkungen

Grundlegende funktionale Programmierung

Das folgende Beispiel ist ein spezifischer Funktionsausdruck

// 数组中每个单词，首字母大写


// 一般写法
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)));

Wenn die Situation komplizierter wird, wird es mehrere Probleme beim Schreiben von Ausdrücken geben:

1. Der Ausdruck ist nicht offensichtlich und wird allmählich schwierig beizubehalten

2. 
   

3. Eine schlechte Wiederverwendbarkeit führt zu mehr Code

4. 
   

5. Es wird viele Zwischenvariablen geben

Die funktionale Programmierung löst die oben genannten Probleme sehr gut. Beziehen Sie sich zunächst auf Funktionale Schreibmethode 1, die die Funktionskapselung nutzt, um Funktionen zu zerlegen (die Granularität ist nicht eindeutig), sie in verschiedene Funktionen kapselt und dann kombinierte Aufrufe verwendet, um den Zweck zu erreichen. Dadurch ist der Ausdruck klar und leicht zu pflegen, wiederzuverwenden und zu erweitern. Zweitens ersetzt Array.map mithilfe von Funktionen höherer Ordnung for...of für die Array-Durchquerung und reduziert so Zwischenvariablen und Operationen.

Der Hauptunterschied zwischen Funktionaler Schreibmethode 1 und Funktionaler Schreibmethode 2 besteht darin, dass Sie überlegen können, ob die Funktion die Möglichkeit einer späteren Wiederverwendung hat. Wenn nicht, ist letztere besser.

Kettenoptimierung

Aus der obigen funktionalen Schreibmethode 2 können wir ersehen, dass es beim Schreiben von Funktionscode leicht dazu kommt, dass sich horizontal ausdehnt , also mehrere Verschachtelungsebenen erzeugt. Lassen Sie uns unten ein Beispiel geben. Ein extremeres Beispiel.

// 计算数字之和


// 一般写法
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);

Dieses Beispiel zeigt nur einen Extremfall einer horizontalen Erweiterung. Da die Anzahl der verschachtelten Funktionsebenen weiter zunimmt, nimmt die Lesbarkeit des Codes erheblich ab und es treten leicht Fehler auf.

​In diesem Fall können wir verschiedene Optimierungsmethoden in Betracht ziehen, wie zum Beispiel die folgende Kettenoptimierung.

// 优化写法 (嗯，你没看错，这就是 lodash 的链式写法)
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());

Nach dem Umschreiben auf diese Weise wird die Gesamtstruktur klarer und es kann leicht angezeigt werden, was jedes Glied der Kette tut. Ein weiteres gutes Beispiel für den Vergleich zwischen Funktionsverschachtelung und -verkettung ist Callback-Funktion und Promise-Muster.

// 顺序请求两个接口

// 回调函数
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());

Wenn die verschachtelte Ebene der Rückruffunktionen und die Komplexität einer einzelnen Schicht zunehmen, wird sie aufgebläht und schwierig aufrechtzuerhalten. Bei hoher Komplexität kann sich die Kettenstruktur von Promise jedoch immer noch vertikal ausdehnen, und die Schichtisolation ist sehr klar.

Gängige funktionale Programmiermodelle

Schließung

Ein Codeblock, der verhindern kann, dass lokale Variablen freigegeben werden, wird als Abschluss

bezeichnet Das Konzept der Schließung ist relativ abstrakt. Ich glaube, jeder kennt und nutzt diese Funktion mehr oder weniger

Welche Vorteile kann uns die Schließung bringen?

Schauen wir uns zunächst an, wie man einen Abschluss erstellt:

// 创建一个闭包
function makeCounter() {
  let k = 0;

  return function() {
    return ++k;
  };
}

const counter = makeCounter();

console.log(counter());  // 1
console.log(counter());  // 2

Der Codeblock der Funktion makeCounter verweist auf die lokale Variable k in der zurückgegebenen Funktion, was dazu führt, dass die lokale Variable nach Ausführung der Funktion nicht vom System recycelt werden kann, wodurch ein Abschluss entsteht. Die Funktion dieses Abschlusses besteht darin, die lokale Variable zu „behalten“, sodass die Variable beim Aufruf der inneren Funktion wiederverwendet werden kann. Im Gegensatz zu globalen Variablen kann auf diese Variable nur innerhalb der Funktion verwiesen werden.

Mit anderen Worten: Abschlüsse erzeugen tatsächlich einige „persistente Variablen“, die für die Funktion privat sind.

Aus diesem Beispiel können wir schließen, dass die Bedingungen für die Erstellung eines Abschlusses wie folgt lauten:

1. Es gibt zwei Funktionsebenen

2. 
   

3. 内层函数对外层函数的局部变量进行了引用

　　闭包的用途

　　闭包的主要用途就是可以定义一些作用域局限的持久化变量，这些变量可以用来做缓存或者计算的中间量等等。

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

　　上面例子是一个简单的缓存工具的实现，匿名函数创造了一个闭包，使得 store 对象 ，一直可以被引用，不会被回收。

　　闭包的弊端

　　持久化变量不会被正常释放，持续占用内存空间，很容易造成内存浪费，所以一般需要一些额外手动的清理机制。

　　高阶函数

接受或者返回一个函数的函数称为高阶函数

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

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

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

　　map （映射）

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

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

// 数组中每一项加一，组成一个新数组


// 一般写法
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 函数，它就是柯里化的实现

// 获取目标文件对基础路径的相对路径

// 一般写法
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）

// 数组中每个单词大写，做 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 函数式编程，可能和许多传统概念不同。我并不只认为 高阶函数 算函数式编程，其他的诸如普通函数结合调用、链式结构等，我都认为属于函数式编程的范畴，只要他们是以函数作为主要载体的。

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

Das obige ist der detaillierte Inhalt vonExklusives Verständnis: JavaScript-Funktionsprogrammierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!