js高级之纯函数的详解与封装js柯里化函数和封装组合函数

最新推荐文章于 2024-03-19 17:14:51 发布

乘嘘圆宝宝

最新推荐文章于 2024-03-19 17:14:51 发布

阅读量521

点赞数 1

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47342392/article/details/126895906

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、理解JS的纯函数

1.纯函数的概念

函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念
纯函数的维基百科定义：

在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数：

此函数在相同的输入值时，需产生相同的输出
函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。
该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。

简单总结：

1.确定的输入，一定会产生确定的输出；

2.函数在执行过程中，不能产生副作用；

2.副作用的概念

表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响，比如修改了全局变量，修改参数或者改变外部的存储

3.纯函数示例

纯函数：

slice能传入两个参数，还会返回确定的值（生成一个新的数组）

slice不会修改原来数组的值

var names = ["abc", "cba", "nba", "dna"]

var newNames1 = names.slice(0, 3)
console.log(newNames1)
console.log(names)

相同的输入（obj都是一样），相同输出（都输出一个确定的新对象）

// test是否是一个纯函数? 是一个纯函数
function test(info) {
  return {
    ...info,
    age: 100
  }
}

test(obj)
test(obj)
test(obj)
test(obj)

非纯函数：

splice会修改本身数组的值

var newNames2 = names.splice(2)
console.log(newNames2)
console.log(names)

修改了传入的参数，产生副作用

// baz也不是一个纯函数, 因为我们修改了传入的参数
function baz(info) {
  info.age = 100
}

var obj = {name: "why", age: 18}
baz(obj)
console.log(obj)

我们使用props一般不能修改，但是他修改了props

function HelloWorld(props) {
  props.info = {}
  props.info.name = "why"
}

4.纯函数的优势

可以安心的编写和安心的使用
在写的时候保证了函数的纯度，只是单纯实现自己的业务逻辑即可，不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改
在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出

二、JavaScript柯里化

1.定义

维基百科的解释：

在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化；
是把接收多个参数的函数，变成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数，而且返回结果的新函数的技术；
柯里化声称 “如果你固定某些参数，你将得到接受余下参数的一个函数”；

简单总结就是：

只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数，这个过程就称之为柯里化 。

代码示例：

function foo(num1, num2, num3, num4) {
  return num1 + num2 + num3 + num4
}

var result = foo(10, 20, 30, 40)
console.log(result);

// 1.柯里化过程
function sum(x) {
  return function(y) {
    return function(z) {
      return x + y + z
    }
  }
}
var result1 = sum(10)(20)(30)
console.log(result1);

// 2.柯里化简写
var sum1 = x => y => z => x + y + z
console.log(sum1(1)(2)(3));

2.柯里化的优点

让函数的职责单一 ：

在函数式编程中，我们其实往往希望一个函数处理的问题尽可能的单一，而不是将一大堆的处理过程交给一个函数来处理。p那么我们是否就可以将每次传入的参数在单一的函数中进行处理，处理完后在下一个函数中再使用处理后的结果。

代码示例：

function add(x, y, z) {
  x = x + 2
  y = y * 2
  z = z * z
  return x + y + z
}

console.log(add(10, 20, 30))


function sum(x) {
  x = x + 2

  return function(y) {
    y = y * 2

    return function(z) {
      z = z * z

      return x + y + z
    }
  }
}

console.log(sum(10)(20)(30))

柯里化的复用：

使用柯里化的场景是可以帮助我们可以复用参数逻辑

代码示例：

function makeAdder(count) {
  count = count * count

  return function(num) {
    return count + num
  }
}

// var result = makeAdder(5)(10)
// console.log(result)
var adder5 = makeAdder(5)
adder5(10)
adder5(14)
adder5(1100)
adder5(555)

3.柯里化函数的实现

封装一个柯里化函数，然后接收需要转化柯里化过程的函数作为参数，自动实现该函数转为柯里化的过程

思路：

编写一个函数，然后返回一个新的函数
判断当前接收的参数的个数，与接收函数fn的参数个数是否一致
如果一致，则调用函数fn，如果别人调用curried的是否有显示绑定this，为保证传进来的fn的this与调用curried.call(this)里的this保持一致，所以我们可以将curried里的this，也绑定到fn.apply(this)，这样就可以保证他们的this是一致的了
如果不一致，则返回一个新的函数curried2继续来接受一个新的参数，接收参数后，需要递归curried来检查函数的参数个数是否达到

代码示例：

一个函数转为柯里化的过程：

function sum(num1, num2, num3) {
  return num1 + num2 + num3
}

sum(20, 30, 40)

// 函数转为柯里化过程
// 方式一：
var sum1 = num1 => num2 => num3 => num1 + num2 + num3
console.log(sum1(10)(20)(30));
// 方式二：
var sum2 = (num1,num2) => num3 => num1 + num2 + num3
console.log(sum2(10, 20)(30));

实现函数：

// 封装一个柯里化函数
// 接受需要封装的函数
function ckCurrying(fn) {
  // 接受fn函数的参数
  function curried(...args) {
    // 首先判断当前已经接收参数的个数 是否与fn的参数个数一致
    // 1.一致 则调用fn函数 fn.length 是获取fn函数的参数个数
    if (args.length >= fn.length) {
      // 这里的this是为了curried有显示绑定this时，与显示绑定的this一致
      return fn.apply(this, args)
    } else {
      // 返回一个函数 继续接收剩余的参数
      function curried2(...args2) {
        // 接收到参数后，将args的参数与下一次接收的参数拼接，再递归调用curried来检查参数个数是否一致
        return curried.apply(this, [...args, ...args2])
      }
      return curried2
    }
  }
  return curried
}

var curryAdd = ckCurrying(sum)
// 调用方式一：
console.log(curryAdd(10)(20)(30));
// 调用方式二：
console.log(curryAdd(10, 20)(30));

三、组合函数

1.概念

组合（Compose）函数是在JavaScript开发过程中一种对函数的使用技巧、模式：

比如我们现在需要对某一个数据进行函数的调用，执行两个函数fn1和fn2，这两个函数是依次执行的；
那么如果每次我们都需要进行两个函数的调用，操作上就会显得重复；
那么是否可以将这两个函数组合起来，自动依次调用呢？
这个过程就是对函数的组合，我们称之为 组合函数（Compose Function）

代码示例：

function double(num) {
  return num * 2
}

function square(num) {
  return num ** 2
}

var count = 10
var result = square(double(count))
console.log(result)

// 实现最简单的组合函数
function composeFn(m, n) {
  return function(count) {
    return n(m(count))
  }
}

var newFn = composeFn(double, square)
console.log(newFn(10))

2.实现通用的组合函数

思路：

封装通用组合函数，接收多个函数
遍历每个参数检查他们是否为函数
返回一个函数来接收一些参数
然后判断是否有传进函数
如果没有，length = 0，则返回传入的参数
否则， length != 0, 运行第一个函数并返回结果，然后将其结果传给下一个函数作为参数执行

实现函数：

// 封装通用组合函数
function ckCompose(...fns) {
  // 记录函数的个数
  var length = fns.length
  // 遍历每个函数 判断他是否为函数
  for (var i = 0; i < length; i++) {
    if (typeof fns[i] !== 'function') {
      throw new TypeError("Expected arguments are functions")
    }
  }

  // 返回一个函数来接受一些参数
  function compose(...args) {
    // 用来表示传入这些函数的索引
    var index = 0
    // 判断函数个数，如果为为0，则返回传入的参数 否则，运行第一个函数并返回其结果
    var result = length ? fns[index].apply(this, args): args
    // 继续执行下一个函数
    while(++index < length) {
      // 把上一个结果传入到当前的函数执行，并返回当前函数的值
      result = fns[index].call(this, result)
    }
    return result
  }
  return compose
}

function double(m) {
  return m * 2
}
function square(n) {
  return n ** 2
}
var newFn = ckCompose(double, square)
console.log(newFn(10)) // 400
var newFn1 = ckCompose()
console.log(newFn1(10)); // [ 10 ]