JavaScript中函數(shù)式編程指的是什么

這篇文章主要介紹了JavaScript中函數(shù)式編程指的是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

函數(shù)式編程的概念。

應用的迭代使程序變得越來越復雜，那么程序員很有必要創(chuàng)造一個結構良好、可讀性好、重用性高和可維護性高的代碼。

函數(shù)式編程就是一個良好的代碼方式，但是這不代表函數(shù)式編程是必須的。你的項目沒用到函數(shù)式編程，不代表項目不好。

什么是函數(shù)式編程（FP）？

函數(shù)式編程關心數(shù)據(jù)的映射，命令式編程關心解決問題的步驟。

函數(shù)式編程的對立面就是命令式編程。

函數(shù)式編程語言中的變量也不是命令式編程語言中的變量，即存儲狀態(tài)的單元，而是代數(shù)中的變量，即一個值的名稱。 變量的值是不可變的（immutable），也就是說不允許像命令式編程語言中那樣多次給一個變量賦值。

函數(shù)式編程只是一個概念（一致編碼方式），并沒有嚴格的定義。本人根據(jù)網(wǎng)上的知識點，簡單的總結一下函數(shù)式編程的定義（本人總結，或許有人會不同意這個觀點）。

函數(shù)式編程就是純函數(shù)的應用，然后把不同的邏輯分離為許多獨立功能的純函數(shù)（模塊化思想），然后再整合在一起，變成復雜的功能。

什么是純函數(shù)？

一個函數(shù)如果輸入確定，那么輸出結果是唯一確定的，并且沒有副作用，那么它就是純函數(shù)。

一般符合上面提到的兩點就算純函數(shù)：

相同的輸入必定產(chǎn)生相同的輸出

在計算的過程中，不會產(chǎn)生副作用

那怎么理解副作用呢？

簡單的說就是變量的值不可變，包括函數(shù)外部變量和函數(shù)內部變量。

所謂副作用，指的是函數(shù)內部與外部互動（最典型的情況，就是修改全局變量的值），產(chǎn)生運算以外的其他結果。

這里說明一下不可變，不可變指的是我們不能改變原來的變量值。或者原來變量值的改變，不能影響到返回結果。不是變量值本來就是不可變。

純函數(shù)特性對比例子

上面的理論描述對于剛接觸這個概念的程序員，或許不好理解。下面會通過純函數(shù)的特點一一舉例說明。

輸入相同返回值相同

純函數(shù)

function test(pi) {
  // 只要 pi 確定，返回結果就一定確定。
  return pi + 2;
}
test(3);

非純函數(shù)

function test(pi) {
  // 隨機數(shù)返回值不確定
  return pi + Math.random();
}

test(3);

返回值不受外部變量的影響

非純函數(shù)，返回值會被其他變量影響（說明有副作用），返回值不確定。

let a = 2;
function test(pi) {
  // a 的值可能中途被修改
  return pi + a;
}
a = 3;
test(3);

非純函數(shù)，返回值受到對象 getter 的影響，返回結果不確定。

const obj = Object.create(
  {},
  {
    bar: {
      get: function() {
        return Math.random();
      },
    },
  }
);

function test(obj) {
  // obj.a 的值是隨機數(shù)
  return obj.a;
}
test(obj);

純函數(shù)，參數(shù)唯一，返回值確定。

function test(pi) {
  // 只要 pi 確定，返回結果就一定確定。
  return pi + 2;
}
test(3);

輸入值是不可以被改變的

非純函數(shù)，這個函數(shù)已經(jīng)改變了外面 personInfo 的值了（產(chǎn)生了副作用）。

const personInfo = { firstName: 'shannan', lastName: 'xian' };

function revereName(p) {
  p.lastName = p.lastName
    .split('')
    .reverse()
    .join('');
  p.firstName = p.firstName
    .split('')
    .reverse()
    .join('');
  return `${p.firstName} ${p.lastName}`;
}
revereName(personInfo);
console.log(personInfo);
// 輸出 { firstName: 'nannahs',lastName: 'naix' }
// personInfo 被修改了

純函數(shù)，這個函數(shù)不影響外部任意的變量。

const personInfo = { firstName: 'shannan', lastName: 'xian' };

function reverseName(p) {
  const lastName = p.lastName
    .split('')
    .reverse()
    .join('');
  const firstName = p.firstName
    .split('')
    .reverse()
    .join('');
  return `${firstName} ${lastName}`;
}
revereName(personInfo);
console.log(personInfo);
// 輸出 { firstName: 'shannan',lastName: 'xian' }
// personInfo 還是原值

那么你們是不是有疑問，personInfo 對象是引用類型，異步操作的時候，中途改變了 personInfo，那么輸出結果那就可能不確定了。

如果函數(shù)存在異步操作，的確有存在這個問題，的確應該確保 personInfo 不能被外部再次改變（可以通過深度拷貝）。

但是，這個簡單的函數(shù)里面并沒有異步操作，reverseName 函數(shù)運行的那一刻 p 的值已經(jīng)是確定的了，直到返回結果。

下面的異步操作才需要確保 personInfo 中途不會被改變：

async function reverseName(p) {
  await new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
  const lastName = p.lastName
    .split('')
    .reverse()
    .join('');
  const firstName = p.firstName
    .split('')
    .reverse()
    .join('');
  return `${firstName} ${lastName}`;
}

const personInfo = { firstName: 'shannan', lastName: 'xian' };

async function run() {
  const newName = await reverseName(personInfo);
  console.log(newName);
}

run();
personInfo.firstName = 'test';
// 輸出為 tset naix，因為異步操作的中途 firstName 被改變了

修改成下面的方式就可以確保 personInfo 中途的修改不影響異步操作：

// 這個才是純函數(shù)
async function reverseName(p) {
  // 淺層拷貝，這個對象并不復雜
  const newP = { ...p };
  await new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
  const lastName = newP.lastName
    .split('')
    .reverse()
    .join('');
  const firstName = newP.firstName
    .split('')
    .reverse()
    .join('');
  return `${firstName} ${lastName}`;
}

const personInfo = { firstName: 'shannan', lastName: 'xian' };

// run 不是純函數(shù)
async function run() {
  const newName = await reverseName(personInfo);
  console.log(newName);
}

// 當然小先運行 run，然后再去改 personInfo 對象。
run();
personInfo.firstName = 'test';
// 輸出為 nannahs naix

這個還是有個缺點，就是外部 personInfo 對象還是會被改到，但不影響之前已經(jīng)運行的 run 函數(shù)。如果再次運行 run 函數(shù)，輸入都變了，輸出當然也變了。

參數(shù)和返回值可以是任意類型

那么返回函數(shù)也是可以的。

function addX(y) {
  return function(x) {
    return x + y;
  };
}

盡量只做一件事

當然這個要看實際應用場景，這里舉個簡單例子。

兩件事一起做（不太好的做法）：

function getFilteredTasks(tasks) {
  let filteredTasks = [];
  for (let i = 0; i < tasks.length; i++) {
    let task = tasks[i];
    if (task.type === 'RE' && !task.completed) {
      filteredTasks.push({ ...task, userName: task.user.name });
    }
  }
  return filteredTasks;
}
const filteredTasks = getFilteredTasks(tasks);

getFilteredTasks 也是純函數(shù)，但是下面的純函數(shù)更好。

兩件事分開做（推薦的做法）：

function isPriorityTask(task) {
  return task.type === 'RE' && !task.completed;
}
function toTaskView(task) {
  return { ...task, userName: task.user.name };
}
let filteredTasks = tasks.filter(isPriorityTask).map(toTaskView);

isPriorityTask 和 toTaskView 就是純函數(shù)，而且都只做了一件事，也可以單獨反復使用。

結果可緩存

根據(jù)純函數(shù)的定義，只要輸入確定，那么輸出結果就一定確定。我們就可以針對純函數(shù)返回結果進行緩存（緩存代理設計模式）。

const personInfo = { firstName: 'shannan', lastName: 'xian' };

function reverseName(firstName, lastName) {
  const newLastName = lastName
    .split('')
    .reverse()
    .join('');
  const newFirstName = firstName
    .split('')
    .reverse()
    .join('');
  console.log('在 proxyReverseName 中，相同的輸入，我只運行了一次');
  return `${newFirstName} ${newLastName}`;
}

const proxyReverseName = (function() {
  const cache = {};
  return (firstName, lastName) => {
    const name = firstName + lastName;
    if (!cache[name]) {
      cache[name] = reverseName(firstName, lastName);
    }
    return cache[name];
  };
})();

函數(shù)式編程有什么優(yōu)點？

實施函數(shù)式編程的思想，我們應該盡量讓我們的函數(shù)有以下的優(yōu)點：

更容易理解

更容易重復使用

更容易測試

更容易維護

更容易重構

更容易優(yōu)化

更容易推理

函數(shù)式編程有什么缺點？

性能可能相對來說較差

函數(shù)式編程可能會犧牲時間復雜度來換取了可讀性和維護性。但是呢，這個對用戶來說這個性能十分微小，有些場景甚至可忽略不計。前端一般場景不存在非常大的數(shù)據(jù)量計算，所以你盡可放心的使用函數(shù)式編程?？聪律厦嫣岬絺€的例子（數(shù)據(jù)量要稍微大一點才好對比）：

首先我們先賦值 10 萬條數(shù)據(jù)：

const tasks = [];
for (let i = 0; i < 100000; i++) {
  tasks.push({
    user: {
      name: 'one',
    },
    type: 'RE',
  });
  tasks.push({
    user: {
      name: 'two',
    },
    type: '',
  });
}

兩件事一起做，代碼可讀性不夠好，理論上時間復雜度為 o(n)，不考慮 push 的復雜度。

(function() {
  function getFilteredTasks(tasks) {
    let filteredTasks = [];
    for (let i = 0; i < tasks.length; i++) {
      let task = tasks[i];
      if (task.type === 'RE' && !task.completed) {
        filteredTasks.push({ ...task, userName: task.user.name });
      }
    }
    return filteredTasks;
  }

  const timeConsumings = [];

  for (let k = 0; k < 100; k++) {
    const beginTime = +new Date();
    getFilteredTasks(tasks);
    const endTime = +new Date();

    timeConsumings.push(endTime - beginTime);
  }

  const averageTimeConsuming =
    timeConsumings.reduce((all, current) => {
      return all + current;
    }) / timeConsumings.length;

  console.log(`第一種風格平均耗時：${averageTimeConsuming} 毫秒`);
})();

兩件事分開做，代碼可讀性相對好，理論上時間復雜度接近 o(2n)

(function() {
  function isPriorityTask(task) {
    return task.type === 'RE' && !task.completed;
  }
  function toTaskView(task) {
    return { ...task, userName: task.user.name };
  }

  const timeConsumings = [];

  for (let k = 0; k < 100; k++) {
    const beginTime = +new Date();
    tasks.filter(isPriorityTask).map(toTaskView);
    const endTime = +new Date();

    timeConsumings.push(endTime - beginTime);
  }

  const averageTimeConsuming =
    timeConsumings.reduce((all, current) => {
      return all + current;
    }) / timeConsumings.length;

  console.log(`第二種風格平均耗時：${averageTimeConsuming} 毫秒`);
})();

上面的例子多次運行得出耗時平均值，在數(shù)據(jù)較少和較多的情況下，發(fā)現(xiàn)兩者平均值并沒有多大差別。10 萬條數(shù)據(jù)，運行 100 次取耗時平均值，第二種風格平均多耗時 15 毫秒左右，相當于 10 萬條數(shù)據(jù)多耗時 1.5 秒，1 萬條數(shù)多據(jù)耗時 150 毫秒（150 毫秒用戶基本感知不到）。

雖然理論上時間復雜度多了一倍，但是在數(shù)據(jù)不龐大的情況下（會有個臨界線的），這個性能相差其實并不大，完全可以犧牲瀏覽器用戶的這點性能換取可讀和可維護性。

很可能被過度使用

過度使用反而是項目維護性變差。有些人可能寫著寫著，就變成別人看不懂的代碼，自己覺得挺高大上的，但是你確定別人能快速的看懂不? 適當?shù)氖褂貌攀呛侠淼摹?/p>

應用場景

概念是概念，實際應用卻是五花八門，沒有實際應用，記住了也是死記硬背。這里總結一些常用的函數(shù)式編程應用場景。

簡單使用

有時候很多人都用到了函數(shù)式的編程思想（最簡單的用法），但是沒有意識到而已。下面的列子就是最簡單的應用，這個不用怎么說明，根據(jù)上面的純函數(shù)特點，都應該看的明白。

function sum(a, b) {
  return a + b;
}

立即執(zhí)行的匿名函數(shù)

匿名函數(shù)經(jīng)常用于隔離內外部變量（變量不可變）。

const personInfo = { firstName: 'shannan', lastName: 'xian' };

function reverseName(firstName, lastName) {
  const newLastName = lastName
    .split('')
    .reverse()
    .join('');
  const newFirstName = firstName
    .split('')
    .reverse()
    .join('');
  console.log('在 proxyReverseName 中，相同的輸入，我只運行了一次');
  return `${newFirstName} ${newLastName}`;
}

// 匿名函數(shù)
const proxyReverseName = (function() {
  const cache = {};
  return (firstName, lastName) => {
    const name = firstName + lastName;
    if (!cache[name]) {
      cache[name] = reverseName(firstName, lastName);
    }
    return cache[name];
  };
})();

JavaScript 的一些 API

如數(shù)組的 forEach、map、reduce、filter 等函數(shù)的思想就是函數(shù)式編程思想（返回新數(shù)組），我們并不需要使用 for 來處理。

const arr = [1, 2, '', false];
const newArr = arr.filter(Boolean);
// 相當于 const newArr = arr.filter(value => Boolean(value))

遞歸

遞歸也是一直常用的編程方式，可以代替 while 來處理一些邏輯，這樣的可讀性和上手度都比 while 簡單。

如下二叉樹所有節(jié)點求和例子：

const tree = {
  value: 0,
  left: {
    value: 1,
    left: {
      value: 3,
    },
  },
  right: {
    value: 2,
    right: {
      value: 4,
    },
  },
};

while 的計算方式：

function sum(tree) {
  let sumValue = 0;
  // 使用列隊方式處理，使用棧也可以，處理順序不一樣
  const stack = [tree];

  while (stack.length !== 0) {
    const currentTree = stack.shift();
    sumValue += currentTree.value;

    if (currentTree.left) {
      stack.push(currentTree.left);
    }

    if (currentTree.right) {
      stack.push(currentTree.right);
    }
  }

  return sumValue;
}

遞歸的計算方式：

function sum(tree) {
  let sumValue = 0;

  if (tree && tree.value !== undefined) {
    sumValue += tree.value;

    if (tree.left) {
      sumValue += sum(tree.left);
    }
    if (tree.right) {
      sumValue += sum(tree.right);
    }
  }

  return sumValue;
}

遞歸會比 while 代碼量少，而且可讀性更好，更容易理解。

鏈式編程

如果接觸過 jquery，我們最熟悉的莫過于 jq 的鏈式便利了?，F(xiàn)在 ES6 的數(shù)組操作也支持鏈式操作：

const arr = [1, 2, '', false];
const newArr = arr.filter(Boolean).map(String);
// 輸出 "1", "2"]

或者我們自定義鏈式，加減乘除的鏈式運算：

function createOperation() {
  let theLastValue = 0;
  const plusTwoArguments = (a, b) => a + b;
  const multiplyTwoArguments = (a, b) => a * b;

  return {
    plus(...args) {
      theLastValue += args.reduce(plusTwoArguments);
      return this;
    },
    subtract(...args) {
      theLastValue -= args.reduce(plusTwoArguments);
      return this;
    },
    multiply(...args) {
      theLastValue *= args.reduce(multiplyTwoArguments);
      return this;
    },
    pide(...args) {
      theLastValue /= args.reduce(multiplyTwoArguments);
      return this;
    },
    valueOf() {
      const returnValue = theLastValue;
      // 獲取值的時候需要重置
      theLastValue = 0;
      return returnValue;
    },
  };
}
const operaton = createOperation();
const result = operation
  .plus(1, 2, 3)
  .subtract(1, 3)
  .multiply(1, 2, 10)
  .pide(10, 5)
  .valueOf();
console.log(result);

當然上面的例子不完全都是函數(shù)式編程，因為 valueOf 的返回值就不確定。

高階函數(shù)

高階函數(shù)（Higher Order Function）,按照維基百科上面的定義，至少滿足下列一個條件的函數(shù)

函數(shù)作為參數(shù)傳入

返回值為一個函數(shù)

簡單的例子：

function add(a, b, fn) {
  return fn(a) + fn(b);
}
function fn(a) {
  return a * a;
}
add(2, 3, fn); // 13

還有一些我們平時常用高階的方法，如 map、reduce、filter、sort，以及現(xiàn)在常用的 redux 中的 connect 等高階組件也是高階函數(shù)。

柯里化（閉包）

柯里化（Currying），又稱部分求值（Partial Evaluation），是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)（最初函數(shù)的第一個參數(shù)）的函數(shù)，并且返回接受余下的參數(shù)而且返回結果的新函數(shù)的技術。

柯里化的作用以下優(yōu)點:

參數(shù)復用

提前返回

延遲計算/運行

緩存計算值

柯里化實質就是閉包。其實上面的立即執(zhí)行匿名函數(shù)的例子就用到了柯里化。

// 柯里化之前
function add(x, y) {
  return x + y;
}

add(1, 2); // 3

// 柯里化之后
function addX(y) {
  return function(x) {
    return x + y;
  };
}

addX(2)(1); // 3

高階組件

這是組件化流行后的一個新概念，目前經(jīng)常用到。ES6 語法中 class 只是個語法糖，實際上還是函數(shù)。

一個簡單例子：

class ComponentOne extends React.Component {
  render() {
    return <h2>title</h2>;
  }
}

function HocComponent(Component) {
  Component.shouldComponentUpdate = function(nextProps, nextState) {
    if (this.props.id === nextProps.id) {
      return false;
    }
    return true;
  };
  return Component;
}

export default HocComponent(ComponentOne);

深入理解高階組件請看這里。

無參數(shù)風格（Point-free）

其實上面的一些例子已經(jīng)使用了無參數(shù)風格。無參數(shù)風格不是沒參數(shù)，只是省略了多余參數(shù)的那一步?？聪旅娴囊恍├泳秃苋菀桌斫饬?。

范例一：

const arr = [1, 2, '', false];
const newArr = arr.filter(Boolean).map(String);
// 有參數(shù)的用法如下：
// arr.filter(value => Boolean(value)).map(value => String(value));

范例二：

const tasks = [];
for (let i = 0; i < 1000; i++) {
  tasks.push({
    user: {
      name: 'one',
    },
    type: 'RE',
  });
  tasks.push({
    user: {
      name: 'two',
    },
    type: '',
  });
}
function isPriorityTask(task) {
  return task.type === 'RE' && !task.completed;
}
function toTaskView(task) {
  return { ...task, userName: task.user.name };
}
tasks.filter(isPriorityTask).map(toTaskView);

范例三：

// 比如，現(xiàn)成的函數(shù)如下：
var toUpperCase = function(str) {
  return str.toUpperCase();
};
var split = function(str) {
  return str.split('');
};
var reverse = function(arr) {
  return arr.reverse();
};
var join = function(arr) {
  return arr.join('');
};

// 現(xiàn)要由現(xiàn)成的函數(shù)定義一個 point-free 函數(shù)toUpperCaseAndReverse
var toUpperCaseAndReverse = _.flowRight(
  join,
  reverse,
  split,
  toUpperCase
); // 自右向左流動執(zhí)行
// toUpperCaseAndReverse是一個point-free函數(shù)，它定義時并無可識別參數(shù)。只是在其子函數(shù)中操縱參數(shù)。flowRight 是引入了 lodash 庫的組合函數(shù)，相當于 compose 組合函數(shù)
console.log(toUpperCaseAndReverse('abcd')); // => DCBA

無參數(shù)風格優(yōu)點？

參風格的好處就是不需要費心思去給它的參數(shù)進行命名，把一些現(xiàn)成的函數(shù)按需組合起來使用。更容易理解、代碼簡小，同時分離的回調函數(shù)，是可以復用的。如果使用了原生 js 如數(shù)組，還可以利用 Boolean 等構造函數(shù)的便捷性進行一些過濾操作。

無參數(shù)風格缺點？

缺點就是需要熟悉無參數(shù)風格，剛接觸不可能就可以用得得心應手的。對于一些新手，可能第一時間理解起來沒那沒快。

感謝你能夠認真閱讀完這篇文章，希望小編分享JavaScript中函數(shù)式編程指的是什么內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!