高阶函数
高阶函数
函数柯里化
函数柯里化，又称部分求值。一个currying函数首先会接收一些参数，接受这些参数后该函数不会立即求值。而是会将传入的参数在函数内保存，待函数真正需要求值时，之前的所有参数都会被一次性用于求值
非柯里化
var mothlyCost = 0;
var cost = function(money:number) {
mothlyCost += money;
}
cost(100);
cost(200);
cost(300);
cost(400);
console.log(mothlyCost);
柯里化实现
function sum(args: Array<number>) {
// 没有这个参数，就开始计算结果返回
let count = 0;
args.forEach(item => {
count += item;
})
return count;
}
// 简单柯里化
var curringCost = function(): any {
let args:Array<number> = [];
return function(money?: number){
if(money) {
// 如果有这个参数，就讲数据添加到参数数组中
args.push(money);
} else {
return sum(args);
}
}
}
// 先初始化
let testCost = curringCost();
testCost(100);
testCost(200);
testCost(300);
testCost(400);
console.log(testCost());
最后我们来给写一个函数，让其可以未其他函数提供柯里化的能力
套壳柯里化
// 柯里化外套
let comCurring = function(fn:Function){
var args:Array<any> = [];
return function(money?: number){
if(arguments.length > 0){
// 有参数，保存，不做其他操作
args.push(...arguments);
} else {
// 无参数，使用参入fn对数据处理
return fn.apply(this, args);
}
}
}
// 先初始化
let sumCost = comCurring(sum);
sumCost(100);
sumCost(200);
sumCost(300);
sumCost(400);
console.log(sumCost());
反柯里化
interface Function {
uncurrying: () => (obj:any, number: any) => {};
}
Function.prototype.uncurrying = function(){
// 将this指针保留下来
let self = this;
// 返回一个匿名函数被“push”接收了
return function() {
/**
* push(currentObj, 5)
* 获取第一个参数，也就是需要执行的对象(currentObj)
* 这个时候arguments就只剩下“5”这个变量了
*/
let obj = Array.prototype.shift.call(arguments);
/**
* 执行这个方法，注意这个方法是由谁调用的
* 在这个案例中，这个匿名函数是被Array的push方法调用的
* 所以这里的self为push这个方法
*/
return self.apply(obj, arguments);
}
}
// 提取push方法
const push = Array.prototype.push.uncurrying();
let currentObj = {
0 : 1,
length : 1
}
push(currentObj, 5);
console.log(currentObj)
分时函数
/**
* 分时函数
* 将数据分批操作
* 例子：渲染1000个好友
*/
function timeSharing<T>(arr:Array<T>, fn:Function, count:number, time:number) {
function strat(){
let index = 0,
len = Math.min(arr.length, count);
for (; index < len; index++) {
const element = arr.shift();
fn(element);
}
}
let timer = setInterval(() => {
if(arr.length === 0) {
return clearInterval(timer);
}
strat();
}, time)
}
let arr = [];
for (let index = 0; index < 1000; index++) {
arr.push(index);
}
timeSharing(arr, function(num: number){
console.log(num)
}, 10, 200);
惰性加载
其实我觉得这个还是比较勤快，也许是聪明的懒惰。如果方法里有判断，就先加载方法，后面就不需要再进行判断了，下面模拟 浏览器嗅探
if A浏览器 使用 aTest方法
if B浏览器 使用 bTest方法
公共代码
// 全局控制变量，模拟不同浏览器
const GLOBAL_CONTROL = "A";
function aTest(){
console.log("A浏览器中使用")
}
function bTest(){
console.log("B浏览器中使用")
}
基础版
/**
* 简版
* 需要使用if判断，每次执行都需要
*/
function compatibleFunction() {
if(GLOBAL_CONTROL === "A") {
aTest();
} else {
bTest();
}
}
compatibleFunction();
console.log(compatibleFunction)
先行版
/**
* 惰性加载函数 先行版
* 避免了每次判断，只需要开始的时候执行一遍即可
* 但是如果项目中没有用到，那这个方法就累赘并且还占用了启动时间
*/
let lazyCompatibleBefore = (function() {
if(GLOBAL_CONTROL === "A") {
return aTest;
} else {
return bTest;
}
})()
lazyCompatibleBefore();
console.log(lazyCompatibleBefore)
懒加载版
/**
* 惰性加载函数 懒加载版
* 避免了每次判断，执行一遍完第一遍后就是以后都是正常方法
* 中间将方法替换为正确版本的方法
* 最后记得再执行一遍，不然第一次就相当于只做了替换
*/
let lazyCompatibleRuntime = function() {
if(GLOBAL_CONTROL === "A") {
lazyCompatibleRuntime = aTest;
} else {
lazyCompatibleRuntime = bTest;
}
lazyCompatibleRuntime();
}
console.log(lazyCompatibleRuntime)
lazyCompatibleRuntime();
console.log(lazyCompatibleRuntime)
节流函数
/**
* 节流函数
* 通用的节流函数
* @param fn 需要节流的函数
* @param time 节流时间
* @param isFrist 第一次是否立即执行
*/
function throttlingWrapper(fn:Function, time:any, isFrist = true) {
var timer:any = null,
_self = fn;
let throtting = () => {
let _me:any = this;
// 如果timer有值，也就是还在执行中，则直接返回
if(timer){
return;
}
// 是否首次触发
if(isFrist){
_self.apply(_me, arguments);
isFrist = false;
return;
}
// 节流函数本体
timer = setTimeout(() => {
_self.apply(_me, arguments);
clearTimeout(timer);
timer = null
}, time)
}
return throtting;
}
赞 (0)