Mari bercakap tentang pengaturcaraan berfungsi JavaScript

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu berkaitan pengaturcaraan fungsian boleh difahami sebagai kaedah pengaturcaraan yang menggunakan fungsi sebagai pembawa utama ungkapan umum saya harap ia akan membantu semua orang.

Cadangan berkaitan: Tutorial pembelajaran javascript

Saya telah melihat banyak penjelasan tentang pengaturcaraan berfungsi, tetapi kebanyakannya berhenti di At the peringkat teori, terdapat juga beberapa yang hanya untuk bahasa pengaturcaraan yang berfungsi semata-mata seperti Haskell. Tujuan artikel ini adalah untuk bercakap tentang amalan khusus pengaturcaraan berfungsi dalam JavaScript di mata saya Sebab mengapa ia "di mata saya" bermakna bahawa apa yang saya katakan hanya mewakili pendapat peribadi saya, yang mungkin bercanggah dengan beberapa konsep yang ketat.

Artikel ini akan meninggalkan banyak pengenalan konsep formal dan memberi tumpuan kepada menunjukkan kod fungsian dalam JavaScript, apakah perbezaan antara kod fungsian dan penulisan umum, dan apakah kod fungsian yang boleh membawa kepada kita Apakah faedahnya dan apakah beberapa model berfungsi biasa?

Apa yang saya faham tentang pengaturcaraan berfungsi
Saya rasa pengaturcaraan berfungsi boleh difahami sebagai kaedah pengaturcaraan yang menggunakan fungsi sebagai pembawa utama, menggunakan fungsi untuk membuka dan mengabstrak ungkapan umum

Apakah kelebihan melakukan ini berbanding imperatif? Perkara utama adalah seperti berikut:

Semantik yang lebih jelas
Kebolehgunaan semula yang lebih tinggi
Kebolehselenggaraan yang lebih baik
Skop terhad, kesan sampingan yang lebih sedikit
Fungsi asas Pengaturcaraan fungsional
Contoh berikut ialah ungkapan fungsi tertentu

Kod 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)));

Apabila keadaan menjadi lebih rumit, terdapat beberapa masalah dalam cara menulis ungkapan Masalah:

The ungkapan tidak jelas dan secara beransur-ansur menjadi sukar untuk dikekalkan
Kebolehgunaan semula yang lemah, yang akan menjana lebih banyak kod
Ia akan menjana banyak pembolehubah perantaraan
Pengaturcaraan berfungsi adalah penyelesaian yang baik menyelesaikan masalah di atas. Mula-mula, rujuk kaedah penulisan berfungsi 1, yang memanfaatkan pengkapsulan fungsi untuk menguraikan fungsi (kebutiran tidak unik), merangkumnya ke dalam fungsi yang berbeza, dan kemudian menggunakan panggilan gabungan untuk mencapai tujuan. Ini menjadikan ungkapan itu jelas dan mudah untuk dikekalkan, digunakan semula dan dilanjutkan. Kedua, menggunakan fungsi tertib tinggi, Array.map menggantikan untuk...of untuk traversal tatasusunan, mengurangkan pembolehubah perantaraan dan operasi.

Perbezaan utama antara kaedah penulisan berfungsi 1 dan kaedah penulisan berfungsi 2 ialah anda boleh mempertimbangkan sama ada fungsi tersebut mempunyai kemungkinan untuk digunakan semula pada masa hadapan Jika tidak, kaedah kedua adalah lebih baik.

Pengoptimuman rantai

Daripada kaedah penulisan berfungsi 2 di atas, kita dapat melihat bahawa semasa proses menulis kod fungsian, adalah mudah untuk menyebabkan sambungan mendatar, iaitu , untuk menghasilkan Dengan pelbagai peringkat sarang, mari kita ambil contoh yang lebih ekstrem di bawah.

Kod 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());

Selepas menulis semula dengan cara ini, struktur keseluruhan akan menjadi lebih jelas dan perkara yang dilakukan oleh setiap pautan dalam rantaian boleh dipaparkan dengan mudah. Satu lagi contoh baik perbandingan antara sarang fungsi dan rantaian ialah fungsi panggil balik dan corak Janji.

Kod 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());

Sebagai tahap bersarang fungsi panggil balik dan kerumitan peningkatan satu lapisan, ia akan menjadi kembung dan sukar untuk dikekalkan, dan struktur rantai Promise, pada tinggi Walaupun kerumitannya tinggi, ia masih boleh dikembangkan secara menegak, dan pengasingan lapisan sangat jelas.

Model pengaturcaraan fungsi biasa

Penutupan

Blok kod yang boleh mengekalkan pembolehubah setempat dan tidak dilepaskan dipanggil penutupan

Konsep penutupan adalah agak abstrak. Saya percaya semua orang tahu dan menggunakan ciri ini lebih kurang

Jadi apakah faedah yang boleh diberikan oleh penutupan kepada kami?

Mari kita lihat dahulu cara membuat penutupan:

Kod Javascript

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

makeCounter Blok kod fungsi ini, dalam fungsi yang dikembalikan, menetapkan pembolehubah setempat k , rujukan dibuat, menyebabkan pembolehubah tempatan tidak dapat dikitar semula oleh sistem selepas pelaksanaan fungsi selesai, sekali gus menghasilkan penutupan. Fungsi penutupan ini adalah untuk "mengekalkan" pembolehubah tempatan supaya pembolehubah boleh digunakan semula apabila fungsi dalam dipanggil tidak seperti pembolehubah global, pembolehubah ini hanya boleh dirujuk di dalam fungsi.

Dalam erti kata lain, penutupan sebenarnya mewujudkan beberapa "pembolehubah berterusan" yang tertutup kepada fungsi tersebut.

Jadi daripada contoh ini, kita boleh membuat kesimpulan bahawa syarat untuk membuat penutupan ialah:

Terdapat fungsi dalam dan luar
Fungsi dalam mengubah suai pembolehubah setempat bagi fungsi luar Petikan
Tujuan penutupan
Tujuan utama penutupan adalah untuk menentukan beberapa pembolehubah berterusan dengan skop terhad Pembolehubah ini boleh digunakan untuk caching atau pengiraan perantaraan, dsb.

Kod 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

Contoh di atas ialah pelaksanaan alat caching mudah Fungsi tanpa nama mencipta penutupan supaya objek stor sentiasa boleh dirujuk dan tidak akan dikitar semula.

Kelemahan penutupan
Pembolehubah berterusan tidak akan dikeluarkan secara normal dan terus menduduki ruang memori, yang boleh menyebabkan pembaziran memori dengan mudah, jadi beberapa mekanisme pembersihan manual tambahan biasanya diperlukan.

Fungsi tertib lebih tinggi

Fungsi yang menerima atau mengembalikan fungsi dipanggil fungsi tertib tinggi

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

Atas ialah kandungan terperinci Mari bercakap tentang pengaturcaraan berfungsi JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!