函数式编程VS命令式编程

js在ES6出现之前的开发模式基本都是用命令式编程(IP)范式的方式做开发，自从ES6发布后，js的开发大神们模仿Python和Ruby的开发模式，也逐渐流行起来函数式编程(FP)模式，学过react的同学都深有体会吧

命令式

假设我们要打印一个数组所有元素

const print = function(arr) {
    for(let i=0;i<arr.length;i++) {
        console.log(arr[i]);
    }
};
print([1, 2, 3, 4, 5]);

函数式

拆分功能：迭代数组，打印每一项

const forEach = function (arr, act) {
    for(let i=0;i<arr.length;i++) {
        act(arr[i]);
    }
};
const log = function(item) {
    console.log(item);
};
// 声明函数
forEach([1, 2, 3, 4, 5], log);

两者区别：

函数式编程的主要目标是描述数据、对数据的应用转换
函数式编程中，程序的执行顺序不被首要考虑；在命令式编程中，执行顺序非常重要
函数式编程的核心是函数和数据集合
函数式编程中，我们可以任意使用函数和递归；命令式编程中，多使用循环、赋值、条件和函数
函数式编程中，应该避免函数副作用和可变数据的使用，不会修改传入函数的参数，如果需要基于输入返回一个解决方案，可以考虑制作一个副本兵返回数据修改后的副本

ES2015+的函数式编程进化

例：找出数组中最小的值

命令式：迭代数组，检查当前值是否大于数组元素即可

let findMin = function(arr) {
    let min = arr[0];
    for(let i=0;i<arr.length;i++) {
        if(min>arr[i]) {
            min = arr[i];
        }
    }
    retrun min;
}

函数式：Math.min函数和(...)扩展运算符

const min = function(arr) {
    return Math.min(...arr);
};

箭头函数简化过程

const min = arr => Math.min(...arr);

map、filter、reduce——函数式编程基础工具箱

例：转换或者映射一个数据集合到另一个集合上

命令式：

const dayOfWeek = [
  {name: "Monday", value: 1},
  {name: "Tuesday", value: 2},
  {name: "Wednesday", value: 3},
];
let dayOfWeekVal = [];
for(let i=0;i<dayOfWeek.length;i++) {
  dayOfWeekVal.push(dayOfWeek[i]);
}

ES2015+

cosnt dayOfWeekVal = dayOfWeek.map(day => day.value);

添加过滤器filter

命令式

const poNum = function(arr) {
  let po = [];
  for(let i=0;i<arr.length;i++) {
    if(arr[i]>=0) {
      po.push(arr[i]);
    }
  }
  return po;
}

函数式

const poNum = arr => arr.filter(num => (num>=0));

拼接数组——reduce用法

命令式

const mergeArr = function(arrays) {
  let newArr = [];
  let k = 0;
  for(let i=0;i<arrays.length;i++) {
    for(let j=0;j<arrays[i].length;j++) {
      newArr[k+1] = arrays[i][j];
    }
  }
  return newArr;
};

函数式

const mergeArr = function(arrays) {
  return arrays.reduce(
    function(p,n) {
      return p.concat(n);
    }
  );
};

精简函数式(可读性降低)

const mergeArr = (...arrays) => [].concat(...arrays);