JS高阶函数的理解(函数作为参数传递)
JS高阶函数的理解
高阶函数是指至少满足下列条件之一的函数。
· 函数可以作为参数被传递
· 函数可以作为返回值输出
一个例子,我们想在页面中创建100个div节点,这是一种写法。我们发现并不是所有用户都是想把这100个div显示的的。所以就有第二种写法
var appendDiv=function(){
for(var i=0;i<100;i++){
var div =document.createElement('div');
div.innerHTML=i;
document.body.appendChild(div);
div.style.display='block';
} }
appendDiv();
第二种写法
这是我们appendDiv传入了一个函数
function(node){
node.style.display='none';
}
然后在appendDiv中判断这个是否是function,如果是我们就执行他,把它传入appendDiv()中
var appendDiv=function(callback){
for(var i=0;i<100;i++){
var div =document.createElement('div');
div.innerHTML=i;
document.body.appendChild(div);
if(typeof callback=='function'){
callback(div);
//console.log(callback);
}
}
}
appendDiv(function(node){
node.style.display='none';
});
结论:
div.style.display='block';//这段代码是不合理的,这段代码放进去成为了难以复用的程序,所以我们得用函数作为参数传进去 //原理是这样的,function(node){node.style.display='block';}传入进去后,就相当于把这个匿名函数变成了callback函数
//即
var callback = function(node){
node.style.display='block';
}
callback(div);//函数执行
JS高阶函数的理解(函数作为参数传递)的更多相关文章
- JS高阶编程技巧--compose函数
先看代码: let fn1 = function (x) { return x + 10; }; let fn2 = function (x) { return x * 10; }; let fn3 ...
- JS高阶编程技巧--惰性函数
在vue.react等框架大量应用之前,我们需要使用jQuery或者原生js来操作dom写代码,在用原生js进行事件绑定时,我们可以应用DOM2级绑定事件的方法,即:元素.addEventListen ...
- React.js高阶函数的定义与使用
/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...
- js高阶函数的理解
高阶函数:英文叫Higher-order function.JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数 ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- 浅谈JS高阶函数
引入 我们都知道函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行,获得返回值或者实现其他功能.函数有函数名和参数,而函数参数是当调用函数接收的真实的值. 今天要说的高阶函数的英文为High ...
- JS 高阶函数
笔记整理自:廖雪峰老师的JS教程 目录 概述 Array中的高阶函数 map(返回新的Array) reduce(返回新的Array) filter(返回新的Array) sort(返回同一Array ...
- js高阶函数
我是一个对js还不是很精通的选手: 关于高阶函数详细的解释 一个高阶函数需要满足的条件(任选其一即可) 1:函数可以作为参数被传递 2:函数可以作为返回值输出 吧函数作为参数传递,这代表我们可以抽离一 ...
- js高阶函数应用—函数柯里化和反柯里化
在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...
随机推荐
- stage3D基础二-----顶点和片段着色器(转)
来源:http://www.adobe.com/cn/devnet/flashplayer/articles/vertex-fragment-shaders.html 本教程将介绍着色器.着色器是 S ...
- UIWebView的全屏截图
项目开发中,我们可能会遇到如下的应用场景:将一篇文章,进行截屏(需要全屏截取,包括滚动部分)后,分享到新浪微博.邮箱等等.前段时间,我在应用开发中实现了该功能,代码也是从网上找到的,自己整理了一下.主 ...
- ztreeSearch
$.fn.extend({ ztreeSearch : function(options) { // var _self=$(this); var defaults = { id : '', sear ...
- hdu3068 最长回文(manacher 算法)
题意: 给定字符串.求字符串中的最长回文序列 解题思路: manacher 算法 时间复杂度:O(N) 代码: #include <cstdio> #include <cstring ...
- 打造自己的LINQ Provider(上):Expression Tree揭秘
概述 在.NET Framework 3.5中提供了LINQ 支持后,LINQ就以其强大而优雅的编程方式赢得了开发人员的喜爱,而各种LINQ Provider更是满天飞,如LINQ to NHiber ...
- [Catalan数]1086 栈、3112 二叉树计数、3134 Circle
1086 栈 2003年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 栈是计算机中 ...
- Python高级入门01-property
JAVA中存在对变量 私有化,公开,保护... 私有化时候,需要提供一个公开的get 和 set方法对外公开,让别人进行调用 python中同样存在 私有化变量定义是__是这个双下划线,eg:_ ...
- 【python】-- Socket
socket socket本质上就是在2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道来实现数据的互相传递. 我们知道网络 通信 都 是基于 ip+port 方能定位到目标的具体机器上的具体 ...
- Python中为什么要使用线程池?如何使用线程池?
系统处理任务时,需要为每个请求创建和销毁对象.当有大量并发任务需要处理时,再使用传统的多线程就会造成大量的资源创建销毁导致服务器效率的下降.这时候,线程池就派上用场了.线程池技术为线程创建.销毁的开销 ...
- 我的Android进阶之旅------>Android关于ImageSpan和SpannableString的初步了解
最近要实现一个类似QQ聊天输入框,在输入框中可以同时输入文字和表情图像的功能.如下图所示的效果: 为了实现这个效果,先去了解了一下ImageSpan和SpannableString的用法.下面用一个小 ...