JavaScrip之函数柯理化、参数复用、提前确认、延迟执行

MENU

  • 1、参数复用
  • 2、提前确认 (惰性函数)
  • 3、延迟运行
  • 4、初步封装
  • 5、递归封装
  • 6、经典面试题


1、参数复用

// 普通函数验证
function check(regExp, text) {return regExp.test(text);
}console.log(check(/^\d+$/g, '123')); 
// true
console.log(check(/^\d+$/g, '2d')); 
// falseconsole.log(check(/^[a-z]+$/g, 'text')); 
// true
console.log(check(/^[a-z]+$/g, '3d')); 
// false// --------------------------------------------------------------------------// Currying后
function curryingCheck(regExp) {return function(regExp) {return reg.test(regExp);}
}let hasNumber = curryingCheck(/^\d+$/g);
let hasLetter = curryingCheck(/^[a-z]+$/g);console.log(hasNumber('159')); 
// true
console.log(hasNumber('2d')); 
// falseconsole.log(hasLetter('3d')); 
// false
console.log(hasLetter('text')); 
// true

示例是一个正则的校验,正常来说直接调用check函数就可以,但是如果有很多地方都要校验是否有数字,其实就是需要将第一个参数reg进行复用,这样别的地方就能够直接调用hasNumber,hasLetter等函数,让参数能够复用,调用起来也更方便。


2、提前确认 (惰性函数)

// 方案一
let on = function(element, event, handler) {if (document.addEventListener) {if (element && event && handler) {element.addEventListener(event, handler, false);};} else {if (element && event && handler) {element.attachEvent('on' + event, handler);};};
};// 方案二
// ()(); => ~function() {.. ..}();
let on = (function() {if (document.addEventListener) {return function(element, event, handler) {if (element && event && handler) {element.addEventListener(event, handler, false);};};} else {return function(element, event, handler) {if (element && event && handler) {element.attachEvent('on' + event, handler);};};};
})();// 方案三
// 换一种写法可能比较好理解一点,
// 上面就是把isSupport这个参数给先确定下来了
let on = function(isSupport, element, event, handler) {isSupport = isSupport || document.addEventListener;if (isSupport) {return element.addEventListener(event, handler, false);} else {return element.attachEvent('on' + event, handler);};
};

在做项目的过程中,封装一些dom操作可以说再常见不过,上面第一种写法也是比较常见,但是看看第二种写法,它相对于第一种写法就是自执行然后返回一个新的函数,这样其实就是提前确定了会走哪一个方法,避免每次都进行判断。


3、延迟运行

Function.prototype.bind = function (context) {let that = this,args = Array.prototype.slice.call(arguments, 1);return function() {return that.apply(context, args);};
};

js中经常使用的bind,实现的机制就是Currying。


4、初步封装

let currying = function(fn) {// args获取第一个方法内的全部参数let args = Array.prototype.slice.call(arguments, 1);return function() {// 将后面方法里的全部参数和args进行合并var newArgs = args.concat(Array.prototype.slice.call(arguments));// 把合并后的参数通过apply作为fn的参数并执行return fn.apply(this, newArgs);};
};

通过闭包把初步参数给保存下来,然后通过获取剩下的arguments进行拼接,最后执行需要currying的函数。但是,有缺陷,这样返回的只能多扩展一个参数,currying(a)(b);这样的话,就不支持多参数调用。


5、递归封装

// 支持多参数传递
function progressCurrying(fn, args) {let that = this;let len = fn.length;let args = args || [];return function() {let _args = Array.prototype.slice.call(arguments);Array.prototype.push.apply(args, _args);// 如果参数个数小于最初的fn.length,则递归调用,继续收集参数if (_args.length < len) {return progressCurrying.call(that, fn, _args);}// 参数收集完毕,则执行fnreturn fn.apply(this, _args);};
}

其实是在初步的基础上,加上了递归的调用,只要参数个数小于最初的fn.length,就会继续执行递归。


6、经典面试题

实现一个add方法,使计算结果能够满足如下预期:
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;


function add() {// 第一次执行时,定义一个数组专门用来存储所有的参数let _args = Array.prototype.slice.call(arguments);// 在内部声明一个函数,利用闭包的特性保存_args并收集所有的参数值let _adder = function() {_args.push(...arguments);return _adder;};// 利用toString隐式转换的特性,当最后执行时隐式转换,并计算最终的值返回_adder.toString = function () {return _args.reduce(function (a, b) {return a + b;});};return _adder;
}console.log(add(1)(2)(3)); // 6
console.log(add(1, 2, 3)(4)); // 10
console.log(add(1)(2)(3)(4)(5)); // 15
console.log(add(2, 6)(1)); // 9

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/197389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode算法练习top100:(7)递归回溯

package top100.递归回溯;import java.util.*;public class TOP {//46. 不含重复数字的全排列List<List<Integer>> res new ArrayList<>();public List<List<Integer>> permute(int[] nums) {LinkedList<Integer> path new LinkedList&l…

电子学会全国青少年软件编程等级考试 中小学生python一级历年真题解析【更新至2023年9月 持续更新】

中国电子学会python等级考试一级历年真题解析 一、考级知识点分析 一、 了解Python多种开发环境&#xff0c;熟练使用Python自带的IDLE开 发环境&#xff0c;能够进行程序编写、调试和分析&#xff0c;具备使用Python开发 环境进行程序设计的能力 了解Python常见的几种编程环…

堆排序详细解读

简介 堆排序是一种基于二叉堆数据结构的排序算法&#xff0c;它的特点是不同于传统的比较排序算法&#xff0c;它是通过建立一个堆结构来实现的。堆排序分为两个阶段&#xff0c;首先建立堆&#xff0c;然后逐步将堆顶元素与堆的最后一个元素交换并调整堆&#xff0c;使得最大…

EM32DX-C2【C#】

1说明&#xff1a; 分布式io&#xff0c;CAN总线&#xff0c;C#上位机二次开发&#xff08;usb转CAN模块&#xff09; 2DI&#xff1a; 公共端是&#xff1a; 0V【GND】 X0~X15&#xff1a;自带24v 寄存器地址&#xff1a;0x6100-01 6100H DI输入寄存器 16-bit &#x…

ROS2 galactic生成的bag包里的MarkerArray在humble下播放不正常

近期发现ROS2 galactic下生成的bag包在humble下回放时使用rviz可视化&#xff0c;bag里的点云可以正常看到&#xff0c;但是使用Marker和MarkerArray画的box却死活看不到&#xff0c;感觉很纳闷&#xff0c;看网上有人报告说foxy下生成的bag包在galactic下播放会报SQL错误&…

Redis部署-哨兵模式

目录 redis sentinel相关名词 redis sentinel架构 故障转移流程 基于docker搭建redis哨兵 准备工作 搭建过程 模拟主节点宕机,观察哨兵节点的工作流程 哨兵重新选取主节点的流程 1.主观下线 2.客观下线 3.哨兵节点推举出一个leader节点 4.leader选举完毕,leader挑选…

RflySim | 姿态控制器设计实验一

姿态控制器设计实验1 一. 姿态控制设计简介 本文是建立在多旋翼的姿态即控制器中的反馈信号能够被较好地估计的前提下&#xff0c;控制器中的反馈信号是估计值。不过&#xff0c;为了更加简便根据分离原理&#xff0c;我们用真值代替反馈信号。本文的目的是让多旋翼的姿态能够…

Linux入门攻坚——7、磁盘管理——文件系统挂载管理及RAID、LVM

已经安装文件系统的分区需要经过挂载才能使用。 一切文件系统的使用都是从根开始&#xff0c;根是文件系统的起始点。 计算机启动过程&#xff1a;加电自检——bootloader——kernel——rootfs——/sbin/init kernel第一步要加载根系统。 将额外文件系统与根文件系统某现存的…

【ARM64 ATF 系列 3.1 -- cpu 复位,解复位及 reset 三者之间的关系】

文章目录 概述复位信号名称复位 (Reset)解复位 (Deassert Reset)Reset 信号它们之间的关系复位信号电特性复位信号的设计注意事项概述 在 ARM CPU 架构中,复位(Reset)、解复位(Deassert Reset)以及 Reset 信号是密切相关的概念,涉及到处理器的启动、初始化和恢复到已知状…

scss:修改element组件样式(el-select)

重点解析&#xff1a; 1.el-select组件可以分为输入框和下拉弹窗两个部分&#xff0c;下面会从这两个部分进行修改 2.element组件库中弹窗会加入到和#app元素同等级别的位置&#xff0c;相关html代码可打开浏览器检查在最下方找到&#xff0c;便于修改样式 实践方法&#xf…

用swig封装c++代码给python使用

前面我们用swig封装了c的代码给java使用&#xff1a; 如何用SWIG封装c接口给java使用&#xff1f;-CSDN博客 但是由于我们的代码写的太好了&#xff0c;python用户也想用&#xff0c;我们需要将c代码封装一下给python用户使用。 这种需求很常见吧。 现在AI动不动就是用pytho…

Python如何从文件中读取数据

从文件中读取数据 1. 读取整个文件 要读取文件&#xff0c;首先来创建一个文件&#xff1a; 然后打开并读取这个文件&#xff0c;再将其内容显示到屏幕上&#xff1a; file_reader.py with open(pi_digits.txt) as file_object:contents file_object.read()print(contents)…

SQL 常见函数整理 _ DATENAME() 返回指定日期的给定日期部分的名称

1. 用法 返回指定日期的给定日期部分的名称&#xff0c;如年份、月份、星期几等。 2. 语法 DATENAME ( datepart , date )datepart DATENAME 将返回的 date 参数的特定部分。 此表列出了所有有效的 datepart 参数 。 select getdate() 2023-12-01 16:25:47.513 datepart缩写…

代码随想录第二十一天(一刷C语言)|回溯算法组合

创作目的&#xff1a;为了方便自己后续复习重点&#xff0c;以及养成写博客的习惯。 一、回溯算法 1、种类 排列、组合、分割、子集、棋盘问题 2、回溯步骤 &#xff08;0&#xff09;回溯抽象 回溯法解决的问题均可以抽象为树形结构&#xff08;N叉树&#xff09; &…

Redis 分布式锁测试

一、前提依赖&#xff08;除去SpringBoot项目基本依赖外&#xff09;&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId> </dependency><!-- 配置使用redis启动…

【React设计】React企业级设计模式

Image Source : https://bugfender.com React是一个强大的JavaScript库&#xff0c;用于构建用户界面。其基于组件的体系结构和构建可重用组件的能力使其成为许多企业级应用程序的首选。然而&#xff0c;随着应用程序的规模和复杂性的增长&#xff0c;维护和扩展变得更加困难。…

计算机辅助药物设计AIDD-小分子-蛋白质|分子生成|蛋白质配体相互作用预测

文章目录 计算机辅助药物设计AIDD【小分子专题】AIDD概述及药物综合数据库学习机器学习辅助药物设计图神经网络辅助药物设计自然语言处理辅助药物设计药物设计与分子生成 计算机辅助药物设计【蛋白质专题】蛋白质数据结构激酶-Kinase相似性学习基于序列的蛋白质属性预测基于结构…

SSM项目实战-前端-添加分页控件-调正页面布局

1、Index.vue <template><div class"common-layout"><el-container><el-header><el-row><el-col :span"24"><el-button type"primary" plain click"toAdd">新增</el-button></el-…

零知识证明友好的波塞冬哈希(ZK-friendly Hashing: Poseidon)

文章目录 背景什么是 Poseidon 哈希技术原理各STARK friendly hash函数性能对比SHA256 VS Pedersen参考背景 2018年7月2日,以太坊基金会给StarkWare团队2年的赞助,用于寻找新的STARK friendly hash (SFH) 函数,可用于在区块链中构建transparent且抗量子安全的proof系统。 …

从遍历到A星寻路

在游戏当中&#xff0c;经常需要找一个点到其它点的路径。在之前的一篇博文(地图编辑器开发&#xff08;三&#xff09;)中也有使用到到A寻路。我们期望能找到最短的路径&#xff0c;同时也需要考虑到查找路径的时间消耗。游戏中的地图可以图的数据结构来表示&#xff0c;然后使…