企业网站 空间,凡科网页版登陆入口,建设项目环保竣工信息公开网站,贵阳微信网站制作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));
// false… 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进行复用这样别的地方就能够直接调用hasNumberhasLetter等函数让参数能够复用调用起来也更方便。 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
