函数式编程

概念

问题：JavaScript中，一等公民是什么？

函数是一等公民(First-Class Function第一级函数)，纯面向对象里，函数能做什么？

• 函数声明
• 函数调用
• 简单封装
• 赋值
• 传参
• 返回值
• 构造函数
• 类实例
• 立即执行

高阶函数

JavaScript函数实际上都是会指向某一个变量，变量可以指向一个函数，函数的参数能接收变量，一个函数就可以接受另一个函数作为变量

问题：什么是高阶函数？

只要函数的参数是函数，或者返回值是函数的形式时，都成为高阶函数

问题：高阶函数具体有什么应用场景？

1. 能够将代码划分为若干片段，然后按顺序执行
2. 将功能或复用的业务能够抽离成一个函数，如参数是函数的形式(axios的封装)
3. 一个函数只能做一件事情(单独的业务功能)，如具有高度相似业务逻辑的工具函数的再封装(返回值是函数的形式)

问题：函数的短板？

函数作为另外函数的参数，函数赋值遍历，函数作为返回值，操作比较繁琐，需要通过指针，代理的方式实现。

问题：函数式编程是什么？

一个固定的功能或者程序段被封装的过程，实现一个固定的功能或者程序，在这个封装体中需要一个入口和一个出口

• 入口就是参数
• 出口就是返回值

function test(str1, str2, str3) {
  return str1 + str2 + str3;
}
console.log(test('哈','哈哈','哈哈哈'));

函数式编程，设计模式，面向对象规范程序写法和架构，构成程序开发体系

问题：JavaScript编程特点是什么？

1. 函数式编程和面向对象编程的混编语言
2. 可拓展性强(函数参数个数和数据类型不确定)

面向对象与函数式编程的关系

• 面向对象：适用于高度复用场景，有复杂this指向问题
• 函数式编程的优点：易读易维护
• 函数式编程是第一类对象，不依赖任何其他对象独立存在(概念)

纯函数

纯函数是相同的输入得到相同的输出，不依赖且不影响外部环境也不产生任何副作用

简而言之，输出完全取决于输入

补充：副作用

只要跟函数外部发生了交互就是副作用，如数据请求，改变数据，DOM操作，数据存取cookie/session

//示例：
//不是纯函数
//1.依赖了外部
//2.并没有参数输入
var a = 1;
function test(){
console.log(a);
}
test();
//如何提纯？
function test(num){
  console.log(num);
}
test(a);

进一步理解纯函数，问题所在

//splice修改原数组(副作用)
//slice修改的是新的数组

说明slice方法是纯函数

对象会被修改数据，如不想被更改原有数据，需要克隆原有数据再修改，深度克隆的函数也是纯函数

纯函数的优点：

• 可移植性高
• 可测试性
• 合理性(引用透明)
• 并行执行
• 可缓存性

纯函数使用场景：

可提纯则提纯，不行不强求

函数组合

它也叫饲养函数(compose)，饲养高品质的函数做优质的输出，用一个新的函数把其他功能的函数组合起来后可以一次性解决这些函数的单个函数要解决的问题

若干个纯函数，偏函数，柯里化函数组合成一个新的函数形成数据传递，并实现一种有序执行的效果

左倾方式：

函数参数自右向左边执行函数的方式

function(f, g){
  //返回函数的目的为了不立即执行f,g函数
  return function(x){
    //x是通过f,g之间的管道传输值
    return f(g(x));
  }
}

写法一：

function toUpperCase(str) {
  return str.toUpperCase();
}
function join(str) {
  return str.join('-');
}
function reverse(str) {
  return str.reverse();
}
function exclaim(str) {
  return str + '!';
}
function split(arr) {
  return arr.split('');
}
function compose1() {
  //将传参组合的列表转为数组
  var args = Array.prototype.slice.call(arguments);
  // console.log(args);
  //[ƒ, ƒ]
  //传参列表最后一项
  var len = args.length - 1;
  return function (x) {
    //执行参数列表最后一项的函数
    var res = args[len](x);
    // console.log(res);
    //HELLO
    //while循环每次执行完毕向左继续执行直到长度为0结束循环
    while (len--) {
      //执行前一项函数，并传入上次计算出的结果
      res = args[len](res);
    }
    return res;
  }
}
var f = compose1(split, toUpperCase);
console.log(f('hello')); //['H', 'E', 'L', 'L', 'O']

写法二：

function compose2() {
  var args = Array.prototype.slice.call(arguments);
  return function (x) {
    return args.reduceRight(function (res, cb) {
      // console.log(res); //ƒ toUpperCase(str)
      // console.log(cb); //ƒ split(arr) 
      return cb(res);
    }, x);
  }
}
var g = compose2(split, toUpperCase);
console.log(g('hello'));

问题：什么叫结合律？

Associativity，结合律是在组合函数的参数中再进行分组，它和原来函数组合得出的结果是一样的

柯里化

curry，接受多个参数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术

目的：

• 简化代码
• 提高维护性
• 功能单一化

优点：

• 功能内聚，关键性的业务逻辑在主体(前面)去完成，最后完成整个功能体程序
• 降低耦合，闭包形式
• 降低代码的重复性
• 提高代码的适应性，适用于任何类型的项目

实现过程：

var add2 = curry(add);
var add3 = curry(1);
var add4 = curry(2);
var add5 = curry(3);
//如果没有传完参数每次都要返回一个新的函数(本应该多传参数)
function curry(fn, len) {
  var len = len || fn.length;
  var _func = function (fn) {
    //获取除了第一个参数以外的其他参数列表
    var _arg = [].slice.call(arguments, 1);
    return function () {
      //获取内部函数新的参数列表并合并外层的参数列表
      var newArgs = _arg.concat([].slice.call(arguments));
      //执行并传入合并后的参数列表
      return fn.apply(this, newArgs);
    }
  }
  return function () {
    var argLen = arguments.length;
    if (argLen < len) {
      //合并后的格式：[add, 1, 2]
      var formatedArr = [fn].concat([].slice.call(arguments));
      return curry(_func.apply(this, formatedArr), len - argLen);
    } else {
      return fn.apply(this, arguments);
    }
  }
}
function add(a, b, c, d) {
  return a + b + c + d;
}
var add2 = curry(add);
// var res = add2(1)(2)(3)(4);
// var res = add2(1, 2)(3)(4);
var res = add2(1, 2, 3)(4);
console.log(res); //10

应用：

//封装ajax请求函数
function ajaxRequest(opt, data, successCb, errorCb) {
  $.ajax({
    url: opt.url,
    type: opt.type,
    dataType: opt.dataType,
    data: data,
    success: successCb,
    error: errorCb
  });
}
var $ajax = curry(ajaxRequest);
//只固化传了参数1
var ajaxApi = {
  getCourses: $ajax({
    url: 'http://xxx.com/getCourse',
    type: 'POST',
    dataType: 'JSON'
  })
}
//继续传参
ajaxApi.getCourses({
    page: 1
  })
  (function (data) {
    console.log(data)
  })
  (function (err) {
    console.log(err)
  });

偏函数

问题：什么是函数的元？

它是函数参数的个数，如有两个参数的函数时叫二元函数

问题：什么是偏函数？

partial application，部分应用，在计算机科学中，偏函数叫做部分应用，局部应用，指固定一个函数的一些参数，然后产生另一个更小元的函数，实际上是一种降元的过程

偏函数与柯里化函数的区别：

用法比较像，但是实现的目的不一样，柯里化传参的形式不止一种，而偏函数传参是较为单一的把剩余参数传入

• 柯里化：将一个多参数的函数转成多个单参数的函数，将n元转换成n个一元函数

• 偏函数：固定一个函数的一个或多个参数，先执行一次返回新函数，将n元函数转换为n-x元的函数

问题：为什么存在偏函数的思想？

在开发的时候，一部分的函数参数是可以直接先传(固定，如系统内部程序)，后面传的值是由其他程序通过用户交互来接收新的参数

实现：

利用bind绑定参数并返回一个未执行的新函数特性

function add(a, b, c, d){
  return a + b + c + d;
}
var newAdd = add.bind(null, 1, 2);

封装：

function add(a, b, c, d) {
  return a + b + c + d;
}
Function.prototype.partial = function () {
  var _self = this,
    _args = [].slice.call(arguments);
  return function () {
    var newArgs = _args.concat([].slice.call(arguments));
    return _self.apply(null, newArgs);
  }
}
var newAdd = add.partial(1, 2);
console.log(newAdd(3, 4));

惰性函数

适用于底层代码封装，程序优化等方面，优化函数本身，函数内部改变自身的机制

var getTimeStamp = function(){
  //第一次才会执行
  var timeStamp = new Date().getTime();
  getTimeStamp = function(){
    return timeStamp;
  }
  return timeStamp;
}
console.log(getTimeStamp());

总结：

惰性函数就是惰性加载表示函数执行的分支只会在函数第一次调用的时候执行，在第一次调用的过程中，该函数被覆盖为另一个按照合适的方式执行的函数，这样任何对原函数的调用就不会再经过执行的分支

函数记忆

它是函数优化的一种方式，也叫缓存函数(memorize)

实现过程：

//统计阶乘函数递归的次数
var time = 0,
  cache = [];
function factorial(n){
  time++;
  if(cache[n]){
    return cache[n];
  }
  if(n === 0 || n === 1){
    cache[0] = 1;
    cache[1] = 1;
    return 1;
  }
  return cache[n] = n * factorial(n - 1);
}

另一种写法：

function memorize(fn) {
  var cache = {};
  return function () {
    // console.log(cache);  {16: undefined}
    //获取逗号隔开的参数列表字符串
    var str = [].join.call(arguments, ',');
    // console.log(str); //6
    var k = arguments.length + str;
    // console.log(k); //16
    return cache[k] = cache[k] || fn.apply(this, arguments);
  }
}
function factorial() {}
var f = memorize(factorial);
console.log(f(6));

防抖

防抖操作实现延迟执行，防止用户交互时产生多次触发

• 延迟执行：对于在事件被触发n秒后再执行的回调
• 如果在这n秒内再次触发事件时，重新开始计时

应用：

在发送网络请求时进行防抖处理，初次下拉不会延迟操作，再次触发时才需要延迟操作

封装：

//1.是否首次延迟执行
//2.n秒之内，触发事件不执行事件处理函数(n秒之内频繁触发事件，计时器会频繁重新开始计时)
function debounce(fn, time, triggerNow) {
  var t = null,
    res;
  var debounced = function () {
    var _self = this,
      args = arguments;
    //无论什么情况都先清除计时器
    if (t) {
      clearTimeout(t);
    }
    if (triggerNow) {
      var isFirstTrigger = !t;
      //重置t
      t = setTimeout(function () {
        t = null;
      }, time);
      if (isFirstTrigger) {
        res = fn.apply(_self, args);
      }
    } else {
      t = setTimeout(function () {
        res = fn.apply(_self, args);
      }, time);
    }
    return res;
  }
  debounced.remove = function () {
    clearTimeout(t);
    t = null;
  }
  return debounced;
}

节流

事件被触发，n秒之内只执行一次事件处理函数

应用：

输入框文本检测验证

封装：

function throttle(fn, delay) {
  var t = null,
    begin = new Date().getTime();
  return function () {
    var _self = this,
      args = arguments,
      cur = new Date().getTime();
    clearTimeout(t);
    if (cur - begin >= delay) {
      fn.apply(_self, args);
      begin = cur;
    } else {
      t = setTimeout(function () {
        fn.apply(_self, args);
      }, delay);
    }
  }
}

归类

数据归类技术，前端处理后端接口数据

• 单一归类：一条数据对应一个分类
• 复合归类：一条数据对应多个类别hobby=[1,2,3]

function sortDatas(sort, data) {
  var cache = {};
  /**
   * 数据格式1：
   * hobby = [{"id":"1","name":"football"}]
   * 数据格式2：
   * person = [{"name":"zhangsan","hobby":"1,3"}]
   * 
   * @foreign_key 两种数据关联的值
   * @sortType 归类类型 单一/复合
   */
  return function (foreign_key, sortType) {
    //排除不合法的归类类型
    if (sortType !== 'single' && sortType !== 'multi') {
      console.log(new Error('Invalid sort type.'));
      return;
    }
    sort.forEach(function (sort) {
      var _id = sort.id;
      cache[_id] = [];
      data.forEach(function (elem) {
        var foreign_val = elem[foreign_key];
        switch (sortType) {
          case 'single':
            if (foreign_val == _id) {
              cache[_id].push(elem);
            }
            break;
          case 'multi':
            var _arr = foreign_val.split(',');
            _arr.forEach(function (val) {
              if (val == _id) {
                cache[_id].push(elem);
              }
            });
            break;
          default:
            break;
        }
      });
    });
    return cache;
  }
}
var sex = [{
    "id": "1",
    "sex": "male"
  },
  {
    "id": "2",
    "sex": "female"
  }
];
var users = [{
    "id": "1",
    "name": "zhangsan",
    "sex": "1"
  },
  {
    "id": "2",
    "name": "lisi",
    "sex": "2"
  }
];
//单一归类
var singleSort = sortDatas(sex, users);
console.log(singleSort('sex', 'single'));
/**
 * {
 *   1: [{id: '1', name: 'zhangsan', sex: '1'}], 
 *   2: [{id: '2', name: 'lisi', sex: '1'}]
 * }
 */
var hobby = [{
    "id": "1",
    "name": "football"
  },
  {
    "id": "2",
    "name": "basketball"
  }
];
var person = [{
    "name": "wangwu",
    "hobby": "1,3"
  },
  {
    "name": "zhaoliu",
    "hobby": "2,4"
  }
];
//复合归类
var multiSort = sortDatas(hobby, person);
console.log(multiSort('hobby', 'multi'));
/**
 * {
 *   1: [{name: 'wangwu', hobby: '1,3'}], 
 *   2: [{name: 'zhaoliu', hobby: '2,4'}]
 * }
 */

扁平化

将多维数组变为一维数组

写法1：

function flatten(arr) {
  //用户没有填写时
  var _arr = arr || [],
    finalArr = [],
    len = _arr.length,
    item;
  for (var i = 0; i < len; i++) {
    item = _arr[i];
    //某项元素是数组时
    if (_isArr(item)) {
      //递归并拼接新的数组
      finalArr = finalArr.concat(flatten(item));
    } else {
      //不是数组时
      finalArr.push(item);
    }
  }
  return finalArr;
  function _isArr(obj) {
    return {}.toString.call(obj) === '[object Array]';
  }
}
var arr = [1, 2, ['a', 'b'], 3, [
  [
    ['c', ['d', 'e']]
  ], 'f'
], {}, null, undefined];
var res = flatten(arr);
console.log(res);
//[1, 2, 'a', 'b', 3, 'c', 'd', 'e', 'f', {…}, null, undefined]

写法2：

Array.prototype.flatten = function () {
  var _arr = this,
    toStr = {}.toString;
  if (toStr.call(_arr) !== '[object Array]') {
    throw new Error('only array type can use flatten.')
  }
  return _arr.reduce(function (prev, elem) {
    return prev.concat(
      toStr.call(elem) === '[object Array]' 
        ? elem.flatten() 
        : elem
    );
  }, []);
}
var arr = [1, 2, ['a', 'b'], 3, [
  [
    ['c', ['d', 'e']]
  ], 'f'
], {}, null, undefined];
var res = arr.flatten();
console.log(res);
//[1, 2, 'a', 'b', 3, 'c', 'd', 'e', 'f', {…}, null, undefined]

响应式

JavaScript是一种单向型的语言，并不能响应式的

问题：什么叫响应式编程?

一个方法的执行来通知其他的方法去执行，方法与方法之间是互相响应的，像开发模式中的订阅模式，或者是观察者模式，响应式是变相的订阅模式和观察者模式

问题：如何去做响应式？

通过defineProperty()方法进行对象属性的加工处理，取值重新赋值时逻辑拓展，可读写，可枚举，可删除

vue2.x版本 实际上都在用defineProperty来实现双向数据绑定，数据双向绑定实际上是响应式的编程方式，当一个方法执行或对一个属性进行设置时，希望有一些数据上响应的能力，数据一旦发生更改视图也会随之更改，视图上更改从而数据上也会更改，背后逻辑是响应式编程实现的

案例：计算器

思想：利用defineProperty()方法实现数据响应

实现：文本框输入数值的同时已将开始计算且实时显示计算结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .btn-group button.current {
      background-color: orange;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="J_calculator">
    <div class="result">0</div>
    <div class="input-group">
      <input type="text" class="f-input" value="0">
      <input type="text" class="s-input" value="0">
    </div>
    <div class="btn-group">
      <button data-field="plus" class="current">+</button>
      <button data-field="minus">-</button>
      <button data-field="mul">*</button>
      <button data-field="div">/</button>
    </div>
  </div>
</body>
<script type="text/javascript">
  class Calculator {
    constructor(doc) {
      const oCal = doc.getElementsByClassName('J_calculator')[0];
      this.fInput = oCal.getElementsByTagName('input')[0];
      this.sInput = oCal.getElementsByTagName('input')[1];
      this.oBtnGroup = oCal.getElementsByClassName('btn-group')[0];
      this.oBtnItems = this.oBtnGroup.getElementsByTagName('button');
      this.oResult = oCal.getElementsByClassName('result')[0];
      //将取值/赋值的对象属性的函数返回的新对象赋值给data
      //此操作会形成数据响应式更新
      //实现：文本框输入数值的同时已将开始计算且实时显示计算结果
      this.data = this.defineData();
      this.btnIdx = 0;
    }
    init() {
      this.bindEvent();
    }
    bindEvent() {
      this.oBtnGroup.addEventListener('click', this.onFieldBtnClick.bind(this), false);
      this.fInput.addEventListener('input', this.onNumberInput.bind(this), false);
      this.sInput.addEventListener('input', this.onNumberInput.bind(this), false);
    }
    defineData() {
      let _obj = {},
        fNumber = 0,
        sNumber = 0,
        field = 'plus',
        _self = this;
      Object.defineProperties(_obj, {
        fNumber: {
          get() {
            console.log(`got fNumber: ${fNumber}`);
            return fNumber;
          },
          set(newValue) {
            fNumber = newValue;
            _self.computeResult(fNumber, sNumber, field);
            console.log(`fNumber has been changed to ${fNumber}`);
          }
        },
        sNumber: {
          get() {
            console.log(`got sNumber: ${sNumber}`);
            return sNumber;
          },
          set(newValue) {
            sNumber = newValue;
            _self.computeResult(fNumber, sNumber, field);
            console.log(`fNumber has been changed to ${sNumber}`);
          }
        },
        field: {
          get() {
            console.log(`got field: ${field}`);
            return field;
          },
          set(newValue) {
            field = newValue;
            _self.computeResult(fNumber, sNumber, field);
            console.log(`fNumber has been changed to ${field}`);
          }
        },
      });
      return _obj;
    }
    computeResult(fNumber, sNumber, field) {
      switch (field) {
        case 'plus':
          this.oResult.innerText = fNumber + sNumber;
          break;
        case 'minus':
          this.oResult.innerText = fNumber - sNumber;
          break;
        case 'mul':
          this.oResult.innerText = fNumber * sNumber;
          break;
        case 'div':
          this.oResult.innerText = fNumber / sNumber;
          break;
      }
    }
    onFieldBtnClick(ev) {
      const e = ev || window.event,
        tar = e.target || e.srcElement,
        tagName = tar.tagName;
      tagName === 'BUTTON' && this.fieldUpdate(tar);
    }
    onNumberInput(ev) {
      const e = ev || window.event,
        tar = e.target || e.srcElement,
        className = tar.className,
        val = Number(tar.value.replace(/\s+/g, '')) || 0;
      // console.log(className); f-input/s-input
      switch (className) {
        case 'f-input':
          this.data.fNumber = val;
          break;
        case 's-input':
          this.data.sNumber = val;
          break;
      }
    }
    fieldUpdate(target) {
      // console.log(target);
      //<button data-filed="plus" class="current">+</button>
      this.oBtnItems[this.btnIdx].className = '';
      //indexOf 找到的元素在数组中的索引
      this.btnIdx = [].indexOf.call(this.oBtnItems, target);
      target.className += ' current';
      this.data.field = target.getAttribute('data-field');
    }
  }
  new Calculator(document).init();
</script>
</html>