JavaScript FunctionFormulaProgrammingは昔からある話題ですが、2016年からさらに人気が高まっているようです。これは、ES6 構文が関数型プログラミングに適しているため、または RxJS (ReactiveX) などの関数型フレームワークの人気によるものである可能性があります。
関数型プログラミングに関する多くの説明を見てきましたが、そのほとんどは理論レベルのものであり、Haskell などの純粋に関数型
プログラミング言語
のみを対象としたものもあります。この記事の目的は、私の目から見た JavaScript での関数型プログラミングの具体的な実践について話すことです。「私の目から見て」という理由は、私が述べていることは私の個人的な意見を表しているだけであり、一部の厳密な概念と矛盾する可能性があることを意味します。 この記事では、正式な概念の紹介の多くを省略し、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)));ログイン後にコピー
状況がより複雑になると、式の書き方にはいくつかの問題が発生します:
意味が明確ではなく、徐々に保守が難しくなります-
再利用性が低く、より多くのデータが生成されますコード
を生成します。関数型プログラミングは、上記の問題を非常にうまく解決します。まず、
を参照してください。これは、関数のカプセル化を利用して関数を逆アセンブルし (粒度は一意ではありません)、それらを別の関数にカプセル化してから、結合呼び出しを使用して目的を達成します。これにより、式が明確になり、保守、再利用、拡張が容易になります。次に、
高階関数を使用して、Array.map は配列トラバーサルの for...of を置き換え、中間の変数と演算を減らします。 関数記述法 1
と
関数記述法 2 の主な違いは、関数に将来再利用の可能性があるかどうかを考慮できることです。そうでない場合は、後者の方が優れています。 チェーンの最適化
上記の
関数の書き方２
から、関数コードを書く過程で
水平拡張、つまり複数層の入れ子が生じやすいことが分かります。以下の比較は極端な例です。
// 计算数字之和
// 一般写法
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 的链式写法)
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());ログイン後にコピー
コールバック関数
と Promise パターン です。
// 顺序请求两个接口
// 回调函数
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());ログイン後にコピー
共通の関数型プログラミングモデル
Closure (クロージャ)
ローカル変数を保持し、解放されないコードのブロックをクロージャと呼びます
クロージャの概念は比較的抽象的で、誰もがよく知っていると思いますこの機能を知っている、または使用している人はほとんどいません
それでは、クロージャが私たちにどのようなメリットをもたらすのでしょうか?
まずクロージャーを作成する方法を見てみましょう:
// 创建一个闭包
function makeCounter() {
let k = 0;
return function() {
return ++k;
};
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2ログイン後にコピー
makeCounter 这个函数的代码块，在返回的函数中，对局部变量 k ，进行了引用，导致局部变量无法在函数执行结束后，被系统回收掉，从而产生了闭包。而这个闭包的作用就是，“保留住“ 了局部变量，使内层函数调用时，可以重复使用该变量；而不同于全局变量，该变量只能在函数内部被引用。
换句话说，闭包其实就是创造出了一些函数私有的 ”持久化变量“。
所以从这个例子，我们可以总结出，闭包的创造条件是：
存在内、外两层函数
内层函数对外层函数的局部变量进行了引用
闭包的用途
闭包的主要用途就是可以定义一些作用域局限的持久化变量，这些变量可以用来做缓存或者计算的中间量等等。
// 简单的缓存工具
// 匿名函数创造了一个闭包
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 函数式编程，可能和许多传统概念不同。我并不只认为 高阶函数 算函数式编程，其他的诸如普通函数结合调用、链式结构等，我都认为属于函数式编程的范畴，只要他们是以函数作为主要载体的。
而我认为函数式编程并不是必须的，它也不应该是一个强制的规定或要求。与面向对象或其他思想一样，它也是其中一种方式。我们更多情况下，应该是几者的结合，而不是局限于概念。
以上がJavaScript 関数プログラミングを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
