1.1函数式编程理念

1. 什么是函数式编程

函数式编程(Functional Programming, FP)，FP 是编程范式之一，我们常听说的编程范式还有面向过程编程、面向对象编
程。

面向对象编程的思维方式

把现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承和多态来演示事物事
件的联系

函数式编程的思维方式

把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）

• 程序的本质
  根据输入通过某种运算获得相应的输出，程序开发过程中会涉及很多有输入和输出的函数
• X -> f(联系、映射) -> y, y=f(x)
  函数式编程中的函数指的不是程序中的函数(方法)，而是数学中的函数即映射关系，例如：y = sin(x), x 和 y 的关系
• 相同的输入始终要得到相同的输出，即纯函数
• 函数式编程用来描述数据（函数）之间的映射

// 非函数式
let num1 = 2
let num2 = 3
let sum = num1 + num2

console.log(sum)

// 函数式
function add (n1, n2) {
  return n1 + n2
}

let sum = add(2, 3)

console.log(sum)

2. 函数是一等公民

函数可以存储在变量中

在 JavaScript 中函数就是一个普通的对象（可以通过 new Function()），我们可以把函数存储到变量/数组中，它还可以作为另一个函数的参数和返回值，甚至我们可以在程序运行的时候通过 new Function(‘alert(1)’) 来构造一个新的函数。

• 把函数赋值给变量

// 把函数赋值给变量
let fn = function () {
  console.log('Hello First-class Function')
}

fn();

// 一个示例
let BlogController = {
  index (posts) { return Views.index(posts) }
  show (post) { return Views.show(post) }
  create (attrs) { return Db.create(attrs) }
  update (post, attrs) { return Db.update(post, attrs) }
  destroy (post) { return Db.destroy(post) }
}

// 优化，将函数赋值给变量
let BlogController = {
  index: Views.index,
  show: Views.show,
  create: Db.create,
  update: Db.update,
  destroy: Db.destroy,
}

3. 高阶函数

高阶函数定义（Higher-order function）

• 可以把函数作为参数传递给另一个函数
• 可以把函数作为另一个函数的返回结果

函数作为参数

// forEach
function forEach(array, fn) {
  for (let i = 0; i < array.length; i++) {
    fn(array[i]);
  }
}

const arr = [1, 3, 4, 7, 8];

// 测试用例
forEach(arr, function (item) {
  console.log(item);
});

// filter
function filter(array, fn) {
  let results = [];
  for (let i = 0; i < array.length; i++) {
    if (fn(array[i])) {
      results.push(array[i]);
    }
  }
  return results;
}

const dist = filter(arr, function (item) {
  return item % 2 === 0;
});

console.log(dist);

函数可以作为返回值

• 基本用法

function makeFn() {
  const message = "Hello function";

  return function () {
    console.log(message);
  };
}

const fn = makeFn();
fn(); // 声明调用执行结果： Hello function

// 直接调用
makeFn()();
// 执行结果：Hello function

• 实战用法

function once(fn) {
  let done = false;
  return function (...args) {
    if (!done) {
      done = true;
      fn.call(this, ...args);
    }
  };
}

const pay = once(function (momney) {
  console.log(`支付：${momney} RMB`);
});

pay(5);
pay(6);
pay(7);
pay(8);

// 执行结果：支付：5 RMB

使用高阶函数的意义

• 抽象可以帮我们屏蔽细节，只需要关注目标
• 高阶函数用来抽象通用问题

// 使用高阶函数的意义

// 面向过程的方式
const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}
console.log("-----------");

// 高阶函数方式
function forEach(array, fn) {
  for (let i = 0; i < array.length; i++) {
    fn(array[i]);
  }
}

// filter
function filter(array, fn) {
  let results = [];
  for (let i = 0; i < array.length; i++) {
    if (fn(array[i])) {
      results.push(array[i]);
    }
  }
  return results;
}
const arr = [1, 2, 3, 4];
forEach(array, (item) => {
  console.log(item);
});

const result = filter(array, (item) => {
  return item % 2 === 0;
});

console.log(result);

// 执行结果
// 1
// 2
// 3
// 4
// -----------
// 1
// 2
// 3
// 4
// [ 2, 4 ]

常用的高阶函数

map 函数

const map = (array, fn) => {
  const result = [];
  for (let value of array) {
    result.push(fn(value));
  }
  return result;
};

const array = map([1, 2, 3, 4], (v) => v * v);

console.log(array); // [ 1, 4, 9, 16 ]

every 函数

const every = (array, fn) => {
  for (let value of array) {
    if (!fn(value)) {
      return false;
    }
  }
  return true;
};

const isAnEvenArray1 = every([2, 4, 6, 8], (v) => v % 2 === 0);
const isAnEvenArray2 = every([2, 4, 6, 9], (v) => v % 2 === 0);

console.log(isAnEvenArray1, isAnEvenArray2); // true false

some 函数

const some = (array, fn) => {
  for (let value of array) {
    if (fn(value)) {
      return true;
    }
  }
  return false;
};

const arraySome1 = some([2, 4, 6, 9], (v) => v % 2 === 0);
const arraySome2 = some([1, 0, undefined, NaN, {}, []], (v) => v === undefined);
const arraySome3 = some([2, 4, 6, 8, 10], (v) => v % 2 === 1);

console.log(arraySome1, arraySome2, arraySome3); // true true false

闭包

• 闭包（Closure）：函数和其周围的状态（词法环境）的引用捆绑在一起形成闭包
  • 可以在另一个作用域链中调用一个函数的内部函数并访问到该函数的作用域中的成员
  • JavaScript 高级程序设计定义：闭包是指有权访问另一个函数作用域中的变量的函数

函数作为返回值

function makeFn() {
  const msg = "Hello, function";
  return function () {
    console.log(msg);
  };
}

makeFn()(); // Hello, function

执行一次的节流函数

function once(fn) {
  let done = false;
  return function (...args) {
    if (!done) {
      done = true;
      return fn.call(this, ...args);
    }
  };
}

const click = once(function () {
  console.log("you clicked once recently");
});

click();
click();
click();
// you clicked once recently

• 闭包的本质：函数在执行的时候回放到一个执行栈上当函数执行完毕之后会从执行栈上移除，但是堆上的作用域成员因为被外部引用不能释放，因此内部函数依然可以访问外部函数的成员

案例一

import React from 'react';
import styles from './index.less';

function makePower(power) {
  return function(number) {
    return Math.pow(number, power);
  };
}

export default () => {
  const res1 = Math.pow(4, 2);
  const power2 = makePower(2);
  const power3 = makePower(3);
  const power4 = makePower(4);

  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <p>{res1}</p>
      {/* 16 */}
      <p>{power2(5)}</p>
      {/* 25 */}
      <p>{power3(2)}</p>
      {/* 8 */}
      <p>{power4(4)}</p>
      {/* 256 */}
    </div>
  );
};

案例二

import React from 'react';
import styles from './index.less';

function calcSalary(base) {
  return function(performance) {
    return base + performance;
  };
}

export default () => {
  const rank1 = calcSalary(12000);
  const rank2 = calcSalary(15000);

  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <p>{rank1(2000)}</p>
      <p>{rank1(3000)}</p>
      <p>{rank2(2000)}</p>
      <p>{rank2(3000)}</p>
      <p>{rank2(5000)}</p>
    </div>
  );
};

4. 纯函数

纯函数概念

• 纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用
  • 纯函数就类似数学中的函数（用来描述输入和输出的关系），y = f(x)
    
• lodash 是一个纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法
• 数组的 slice 和 spilce 分别是：纯函数和不纯的函数
  • slice 返回数组中的指定部分，不会改变原数组
  • spilce 对数组进行操作返回该数组，会改变原数组

const array = [1, 2, 3, 4, 5];

console.log(array.slice(0, 3));
console.log(array.slice(0, 3));
console.log(array.slice(0, 3));

// console.log(array.splice(0, 3));
// console.log(array.splice(0, 3));
// console.log(array.splice(0, 3));

function splice(array, ...args) {
  const dist = [].concat(array);
  return dist.splice(...args);
}

console.log(splice(array, 0, 3));
console.log(splice(array, 0, 3));
console.log(splice(array, 0, 3));

纯函数的好处

可缓存

• 因为纯函数对相同输入始终有相同的结果，所以可以把纯函数的结果缓存起来

const _ = require('lodash');

function getArea(radius) {
  console.log(radius);
  return Number(Math.PI * radius * radius).toFixed(2);
}

const getAreaWithMemory = _.memoize(getArea);

console.log(getAreaWithMemory(4));
console.log(getAreaWithMemory(4));
console.log(getAreaWithMemory(4));
console.log(getAreaWithMemory(4));
// 4
// 50.27
// 50.27
// 50.27
// 50.27

• 自己模拟一个 memoize 函数

function memoize(fn) {
  const cache = {};

  return function(...args) {
    let key = JSON.stringify(...args);

    const currentFunction = cache[key];
    if (currentFunction) {
      return currentFunction;
    }

    const distFunction = fn.call(this, ...args);
    Object.assign(cache, {
      [key]: distFunction,
    });
    return distFunction;
  };
}

可测试

• 纯函数让测试更方便

并行处理

• 在多线程环境下并行操作共享的内存数据很可能会出现意外情况
• 纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数(Web Worker)

副作用

• 纯函数：对于相同的输入永远会得到相同的输出，而且没有任何可观察的副作用

// 不纯的函数
let mini = 18;
function checkAge(age) {
  return age >= mini;
}

// 纯的（有硬编码，后续可以通过柯里化解决）
function chechAgePure(age) {
  let mini = 18;
  return age >= mini;
}

副作用让一个函数变得不纯（如上例），纯函数的根据相同的输入返回相同的输出，如果函数依赖于外部的状态就无法保证输出相同，就会带来副作用。
副作用来源：

• 配置文件
• 数据库
• 获取用户的输入
• 其他来源

所有的外部交互都有可能带来副作用，副作用也使得方法通用型下降不适合扩展和重用，同时副作用会给程序中带来安全隐患给程序带来不确定性，但是副作用不可能完全禁止，尽可能控制它们在可控范围内发生。