IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> 柯里化的两种写法(弄懂`fn.length`与`fn.toString()`) -> 正文阅读

[游戏开发]柯里化的两种写法(弄懂`fn.length`与`fn.toString()`)

写在前面

柯里化,一个很有意思的名词,从字面意思猜不透到底是什么!?

今天就和大家一起分享一下函数的柯里化的两种写法,彻底弄懂fn.lengthfn.toString()


在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的,尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。【来自百度百科】

  • 举个例子
let add1 = (a, b, c) => {
  return a + b + c
}

let add2 = (a) => {
  return b => {
    return c => {
      return a + b + c
    }
  }
}
console.log(add1(1, 2, 3));
console.log(add2(1)(2)(3));
  • 我们把add1写成add2就叫做函数的柯里化
  • 总的来说就是柯里化会拿到部分参数生成一个新的函数,然后用新的函数接收剩余的参数
  • 这样,我们就可以在固定一些参数的情况下,生成一些细粒度更小的函数,这样更方便我们进行编程(比如函数式编程)

柯里化的两种写法

有同学看到了上面的代码,会说,柯里化还不简单,把它拆开写就好了。
但是,如果参数越来越多,上面的这种梯田式写法就很难满足我们的需求了,而且很繁琐不够优雅

  • 所以,对于这种繁琐的重复的步骤,我们就会想到使用递归来实现
  • 那么,问题来了,我们先要找到函数的递归出口
    • 引入一个知识点fn.length表示一个函数所需要的参数个数,所以我们判断参数小于fn.length就递归,否则就执行函数
  • 那么,如何来保存前面的参数呢?
    • 我们的递归函数可以使用ES6中的rest参数来保存前面的参数
  • 那么,如何获得当前函数的参数呢?
    • 我们的递归函数内部会返回一个函数,内部函数的rest参数就是当前函数的参数
  • 所以,我们的函数总参数就是let _args=[...args,...params](这里用到了ES6的扩展运算符)

  • 下一个问题,如果我们柯里化的函数的参数不确定呢?
    • fn.length不确定,前面的方法就行不通了
    • 这确实是一个问题,简单来说就是通过改写fn.toString()通过隐式转换来得到结果

下面就分为fn.length已知和未知给大家带来柯里化的两种写法

fn.length已知

  • 已知的写法在上面阐述的比较多了
  • 1.我们用到了高阶函数,这样可以拿到以前的参数和现在的参数,从而得到目前所有的参数
  • 2.如果当前参数的长度大于等于fn.length,我们就执行fn函数
    • 我们要把参数传进去就使用了apply,因为没有使用到this指针,这里第一个参数为null
  • 3.如果当前参数的长度小于fn.length,我们递归执行_curry函数
    • 同样,我们要传入参数,这里因为传入的参数不是一个数组,所以我们以参数列表的形式用到了call
  • callapply的一个区别就是第二个参数是否是数组!(call是参数列表,一个个的分开的参数)
    • 它们之间可以用扩展运算符来转换哦!
fn.apply(null,_args)
fn.call(null,...args)
// 这两个是一样的

function curry (fn, len = fn.length) {
  function _curry (fn, len, ...args) {
    return function (...params) {
      let _args = [...args, ...params]
      if (_args.length >= len) {
        return fn.apply(null, _args)
      } else {
        return _curry.call(null, fn, len, ..._args)
      }
    }
  }
  return _curry(fn, len)
}

function fn (a, b, c, d) {
  console.log(a, b, c, d);
}

let _fn = curry(fn)
_fn(1, 2, 3)(4)      //  1 2 3 4
_fn(4)(5, 6)(7, 8)   //  4 5 6 7 
_fn(4)(5,6)(7)(8)    //  报错

我们一起来看看结果

  • 第一个柯里化成功
  • 第二个从我们的代码里面也有体现,超出的参数我们就不会计算了
  • 第三个报错了,为什么?
    • 前三个括号,我们递归就结束了,下次再传入参数的时候,我们上一层return的不是一个函数,所以报错了
    • 这其实也属于fn.length未知的范畴了,那我们如何处置这种情况呢?继续往下看!

fn.length未知

  • 在未知的情况下,我们要保存参数的传递还是只能使用递归
  • 但是由于我们不用判断什么时候调用fn,我们使用了闭包来存储我们的参数
  • 那么最后我们return的结果会是一个Function函数
    • 最神奇的地方来了,我们判断res==15的时候返回的结果是true,res的类型却是一个Function,原因是这里进行了隐式转换
    • 说简单点,就是自动调用了toString()方法,所以我们可以通过改写toString()方法来解决fn.length未知的问题
  • 我们改写toString()函数,使用了reduce,这样可以很方便拿到所有的参数,然后我们写好逻辑就可以了
function add () {
  let args = [...arguments]
  let inner = function () {
    args.push(...arguments)
    return inner
  }
  inner.toString = () => {
    return args.reduce((pre, cur) => {
      return pre + cur
    })
  }
  return inner
}

const res = add(1)(2)(3)(4)(5)
console.log(res == 15);        // true
console.log(res.toString());   // 15

  • 上面是加法,也可以写成乘法或者其他的逻辑!

放一个彩蛋吧!

  • 如果第二种写法的内部函数写成一个匿名函数会怎样?
    • 我们常说ES6 匿名函数很方便,很优雅,这里使用会有问题吗?
function add () {
  let args = [...arguments]
  let inner = () => {        //  这里进行了更改,改为匿名函数了!!!
    args.push(...arguments)
    return inner
  }
  inner.toString = () => {
    return args.reduce((pre, cur) => {
      return pre + cur
    })
  }
  return inner
}


  • 虽然匿名函数看似少写了点代码很潇洒,但是这里是不行的
  • 写成匿名函数,结果add(1)(2)(3)(4)(5)==5结果就错了
    • 内部函数pusharguments
    • 匿名函数的arguments是乱七八糟的
    • 不信你看下面的函数
function test () {
  console.log(arguments);
}
let test2 = () => {
  console.log(arguments[0]);
}
test()   //[Arguments] {}
test2()  //很长,所以要用arguments还是不要用匿名函数了!
  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-04-22 19:10:32  更:2022-04-22 19:14:40 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 13:46:08-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码