wordpress 导入网站,百度百度一下百度,最好的网站建设系统,网站建设图片如何循环转不知道大家有没有一种感觉#xff0c;那就是自己写的javascript代码虽然能完全解决工作上的需要#xff0c;但是#xff0c;一眼望去#xff0c;too simple#xff01;#xff01;#xff01;简直就是一个傻子都能看懂的水平#xff0c;于是#xff0c;在工作之余那就是自己写的javascript代码虽然能完全解决工作上的需要但是一眼望去too simple简直就是一个傻子都能看懂的水平于是在工作之余我开始去收集一些几乎在日常开发中未曾用过的javascript写法/有价值的javascript知识点借此来提高自身javascript水平。 一、函数式编程与面向对象编程 script/*函数式编程*/function f1(){var n999;nAddfunction(){n1;};var f2 function(){console.log(n);};return f2;}var resultf1();result(); // 999nAdd();result(); // 1000/*面向对象编程1之json写法*/var obj1 {n:999,nAdd:function(){this.n 1;},getN:function(){console.log(this.n);}};obj1.getN();//999obj1.nAdd();obj1.getN();//1000/*面向对象编程2之工厂模式*/var obj2 function(){var obj new Object;obj.n 999;obj.nAdd function(){this.n 1;};obj.getN function(){console.log(this.n);}return obj;};var objins new obj2();objins.getN();//999objins.nAdd();objins.getN();//1000/*面向对象编程3之原型prototype*/function obj3(n) {this.n n;}obj3.prototype.nAdd function() {this.n1;};obj3.prototype.getN function() {console.log(this.n);}var objins2 new obj3(999);objins2.getN();//999objins2.nAdd();objins2.getN();//1000
/script View Code 针对上面所示的函数式编程涉及了作用域和闭包的知识这里简要提一下 里面的nAdd没有用var关键字声明所以他是全局的后面可以全局调用其次利用闭包访问和修改了函数作用域内的n值。 二、纯函数和非纯函数 1.此函数在相同的输入值时总是产生相同的输出。函数的输出和当前运行环境的上下文状态无关。 2.此函数运行过程不影响运行环境也就是无副作用如触发事件、发起http请求、打印/log等。 简单来说也就是当一个函数的输出不受外部环境影响同时也不影响外部环境时该函数就是纯函数也就是它只关注逻辑运算和数学运算同一个输入总得到同一个输出。 var xs [1,2,3,4,5];
// 纯的
xs.slice(0,3);
// [1,2,3]
xs.slice(0,3);
// [1,2,3]
xs.slice(0,3);
// [1,2,3]// 不纯的
xs.splice(0,3);
// [1,2,3]
xs.splice(0,3);
// [4,5]
xs.splice(0,3);
// [] View Code 纯函数相对于非纯函数来说在可缓存性、可移植性、可测试性以及并行计算方面都有着巨大的优势。 三、函数的柯里化 curry 的概念很简单将一个低阶函数转换为高阶函数的过程就叫柯里化。 函数柯里化是一种“预加载”函数的能力通过传递一到两个参数调用函数就能得到一个记住了这些参数的新函数。从某种意义上来讲这是一种对参数的缓存是一种非常高效的编写函数的方法 /*一般写法两数相加*/var add function(x,y){return x y;}/*21和210*/add(2,1);//3add(2,10);//12/*柯里化写法*///es5var add function(x) {return function(y) {return x y;};};//es6var add x (y x y);//定义1和10函数var increment add(1);//柯里化后得到的1函数var addTen add(10);//柯里化后得到的10函数increment(2); // 3addTen(2); // 12 View Code 四、Array.reduce/Array.reduceRight数组迭代 先不看标题来个题目如何求数组[1,2,3,4,5]的各项累加的和 大多数人恐怕会立即说出for循环、while循环的确for循环和while循环是可以解决上述问题但是这个答案显然脱离了此篇博客的主题逼格 并且实验表明将上述求和方法循环1W次用for循环和while循环耗时大概在50~55ms但是用Array.reduce/Array.reduceRight仅仅耗时0.4ms 关于该方法的详解请猛戳→https://www.w3cplus.com/javascript/array-part-8.html这里给个demo var arr [1,2,3,4,5];/*ES6写法*/var reducer (prevalue,curvalue)prevalue curvalue;console.log(arr.reduce(reducer));//15/*ES5写法*/var reducer function(prevalue,curvalue){return prevalue curvalue;};console.log(arr.reduce(reducer));//15/*解析*/数组的reduce方法有两个参数callbackprevalue对于第一个参数callback里面有4个参数prevalue、curvalue、index、arrayindex是当前迭代时的curvalue的索引数组中的索引array当然是操作的数组了着重看另外两个参数prevalue和curvalue上一个值和当前值如果reduce方法没有第二个参数的话那么callback回调将数组第一个值作为prevalue第二个值作为curvalue如果reduce方法有第二个参数那么将第二个参数值作为prevalue将数组第一个值作为curvalue每一次的操作结果将变为下一次操作的prevalue而curvalue的值教上一次往后推一位/*实例解析*/针对上述数组相加没有第二个参数只有一个回调callback那么他的过程是这样的第一次运算prevalue为1curvalue为2运算结果为123并将结果作为下次运算的prevalue第二次运算prevalue为3上一次运算的结果curvalue为3,运算结果为334以此类推如果有第二个参数假设为5arr.reduce(reducer5)那么将是这么计算的第一次运算prevalue为5第二个参数curvalue为1运算结果为516并将结果作为下次运算的prevalue第二次运算prevalue为6上一次运算的结果curvalue为2,运算结果为628以此类推reduceRight和reduce类似只不过他是从右边开始迭代的。 View Code 五、函数组合reduce高级用法 假想一下要将字符串“my name is echo”进行如下操作你会怎么做转大写、然后末尾加一个感叹号 我想你大概会定义一个函数operate对于形参str先toUpperCase()然后 !ok这样做没错但是现在我需求改了我不要求转大写了你是不是得删除那行代码 可能你会说了我定义两个函数一个是转大写一个是加叹号需要哪个用哪个其实无论你用几个函数来写还是直接用prototype或者链式调用的方法去写都只是大众化的写法且不易维护so请看下面的写法 var compose (...args) x args.reduceRight((prevalue, curvalue) curvalue(prevalue), x);var toUpperCase x x.toUpperCase();var exclaim x x !;var shout compose(exclaim, toUpperCase);console.log(shout(my name is echo)); View Code 一眼望去是不是两眼懵逼不怕我们用ES5还原一下请看 var compose function (...args){return function (x){return args.reduceRight(function(prevalue, curvalue){return curvalue(prevalue);},x)}};var toUpperCase function(x){return x.toUpperCase();};var exclaim function(x){return x !;};var shout compose(exclaim, toUpperCase);console.log(shout(my name is echo)); View Code 结合上述第四例所讲到的reduce我希望此时你已经看懂了没看懂也没关系接着往下看继续解析 var shout compose(exclaim, toUpperCase) function (x) {return [exclaim, toUpperCase].reduceRight(function(prevalue, curvalue){return curvalue(prevalue);},x)};shout(my name is echo) [exclaim, toUpperCase].reduceRight(function(prevalue, curvalue){return curvalue(prevalue);},my name is echo);/*前面说过如果reduce/reduceRight传了第二个参数那么该第二个参数将作为prevalue给callback调用。*//*运算过程如下reduceRight从右往左curvalue(prevalue)*/1.toUpperCase(my name is echo);并将结果作为prevalue供下次调用2.exclaim(toUpperCase(my name is echo));如此实现了先转大写再加感叹号。 View Code 转载于:https://www.cnblogs.com/eco-just/p/10328522.html
