码迷,mamicode.com
首页 > Web开发 > 详细

关于js中高阶函数的认识

时间:2016-10-23 17:08:50      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:function   epp   数字   高阶函数   black   else   console   返回值   i+1   

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

关于js中高阶函数的认识

标签:function   epp   数字   高阶函数   black   else   console   返回值   i+1   

原文地址:http://www.cnblogs.com/fyh123/p/5990024.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!