关于js中高阶函数的认识

Javascript中的高阶函数,是我们在编程中使用的一种重要的函数式编程,它的主要形式有两种。一种是把函数作为参数传递到另外一个函数中(例如:事件监听器),另一种是把函数作为返回值放入另外的函数中(例如:闭包函数)。

把函数作为参数传递的形式:

例:创建10个div并给每一个div中添加相应的数字

<body>

<div id="container">

</div>

</body>

<script>

//创建函数

function create(fn){

var  container = document.getElementById(‘container‘);

for(var i=0;i<10;i++){

var  div = document.createElement(‘div‘);

div.innerHTML = i+1;

container.appendChild(div);

if( typeof fn ==‘function‘){

fn(div);

}else{

console.log(‘输入错误!‘)

}

}

}

//子元素添加样式

//样式一

function setStyle(div){

div.style.margin =‘0 auto‘;

div.style.width = ‘100px‘;

div.style.height = ‘100px‘;

div.style.background = ‘deeppink‘;

div.style.border = ‘1px solid black‘;

div.style.display = ‘inline-block‘;

}

//样式二

function setStyle1(div){

div.style.margin =‘0 auto‘;

div.style.width = ‘50px‘;

div.style.height = ‘50px‘;

div.style.background = ‘blue‘;

div.style.border = ‘1px solid black‘;

div.style.display = ‘inline-block‘;

}

create(setStyle);

create(setStyle1);

</script>

把函数作为返回值形式

例:利用高阶函数,实现简单的加减乘除计算器

//计算公式

function add(a,b){

return a+b;

};

function sub(a,b){

return a-b;

};

function mul(a,b){

return a*b;

};

function div(a,b){

return a/b;

};

//高阶函数计算器

function calc(fn){

return function(){

if(typeof fn == ‘function‘){

return fn.apply(this,arguments);

}

}

};

var a = calc(add)(1,2);

var b = calc(sub)(1,2);

var c = calc(mul)(1,2);

var d = calc(div)(1,2);

console.log(a);//输出3

console.log(b);//输出-1

console.log(c);//输出2

console.log(d);//输出0.5

时间: 2024-10-13 16:47:56

关于js中高阶函数的认识的相关文章

js 高阶函数 闭包

摘自  https://www.cnblogs.com/bobodeboke/p/5594647.html 建议结合另外一篇关于闭包的文章一起阅读:http://www.cnblogs.com/bobodeboke/p/6127650.html 一.闭包 闭包某种程度上就是函数的内部函数,可以引用外部函数的局部变量.当外部函数退出后,如果内部函数依旧能被访问到,那么内部函数所引用的外部函数的局部变量就也没有消失,该局部变量的生存周期就被延续. 一个经典的例子如下: <script> //thi

浅谈JS高阶函数

引入 我们都知道函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行,获得返回值或者实现其他功能.函数有函数名和参数,而函数参数是当调用函数接收的真实的值. 今天要说的高阶函数的英文为Higher-order function, 高阶函数的高阶是什么意思呢? 定义 至少满足下列一个条件的函数 接收一个或多个函数作为输入 输出一个函数 怎么理解这么个东西呢?引言里说过了,函数实际上都是指向某个变量.既然变量可以是一个向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这

js高阶函数

map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果: function pow(x) { return x * x; } var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81] reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个

js高阶函数应用—函数柯里化和反柯里化

在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个只有一个参数的函数,而这个函数返回一个带参数的函数,这样就实现了能写两个参数的函数了(具体参见下边代码)--这就是所谓的柯里化(Currying,以逻辑学家Hsakell Curry命名),也可以理解为一种在处理函数过程中的逻辑思维方式. 1 function add(a, b) { 2 retur

js高阶函数filter、map、reduce

1 // 高阶函数 filter/map/reduce 2 3 // filter中的回调函数有一个要求:必须返回一个boolean值, 4 // 当返回true时,函数内部会自动将这次回调的 n 加入到新的数组中 5 // 当返回false时,函数内部会自动过滤掉这次的 n 6 const nums=[10,20,60,94,348,57,24,674,645,44,4] 7 let newNums = nums.filter(function (n){ 8 return n<30 9 })

JS高阶---函数的prototype

思维导图 栈堆翻译为为stack (1)原型与原型链 概念一.原型对象 验证步骤: 1.打印Data函数的原型prototype 原型属性指向原型对象 ===ES源码结构分析示意=== 2.空对象 3.JS特点:动态添加属性 小结: prototype原型.constructor构造 1.每个函数有一个prototype原型属性,默认指向一个空对象即原型对象 2.原型对象里有个构造器属性constructor属性,指向函数对象 概念图: 构造函数与原型对象相互引用 给原型对象添加方法,给谁用??

js 高阶函数 filter

filter用于过滤array中的一些值,通过带入的函数返回的ture 或false 保留或去除,返回一个新的array filter 使用演示:判断筛选出array中的素数: 1 //判断素数自定义函数: 2 function get_su(x){ 3 if(x <=3){return x>1;} 4 if(x % 2 === 0 || x % 3 === 0){return false;} 5 for(var i = 5; i*i <= x; i +=6){ 6 if(x % i =

JS高阶函数应用——函数节流

在一些函数需被频繁调用的场景,如:window.onresize.mousemove.上传进度等等,操作频繁导致性能消耗过高,而造成浏览器卡顿现象,我们可以通过函数节流的方式解决此问题.   比如我们在window.onresize事件中打印当前浏览器窗口的大小,而拉拽窗口的时候,打印窗口大小的工作1s内进行了10次.而实际是我们只需2次或3次,这就需要我们按时间段来忽略一些事件请求,比如确保在500ms内只打印1次.实现代码如下: var throttle=function(fn,interv

js高阶函数--判断数据类型、函数胡柯里化;

一.判断数据类型: 常见的判断有typeof.instanceof. constructor. prototype,先来看typeof: var a = "hello world"; var b = 10; var c = [1, 3, 5]; var d = new Date(); var e = function() {}; console.log(typeof a); // string console.log(typeof b); // number console.log(t