关于js中高阶函数的认识

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于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

以上是关于关于js中高阶函数的认识的主要内容,如果未能解决你的问题,请参考以下文章

js 高阶函数 闭包

React的高阶组件详解

JS中的高阶函数

JS中的高阶函数

React高阶组件

js数组高阶方法reduce经典用法代码分享