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演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...
随机推荐
- UVA 11354 - Bond (最小生成树 + 树链剖分)
题目链接~~> 做题感悟:这题開始看到时感觉不是树不优点理,一想能够用 Kruskal 处理成树 ,然后就好攻克了. 解题思路: 先用 Kruskal 处理出最小生成树.然后用树链剖分 + 线段 ...
- scala 编写wordCount
加载文件 scala> var f1=sc.textFile("/tmp/dataTest/followers.txt") scala> f1.flatMap(x=&g ...
- NHibernate二级缓存(第十一篇)
NHibernate二级缓存(第十一篇) 一.NHibernate二级缓存简介 NHibernate由ISessionFactory创建,可以被所有的ISession共享. 注意NHibernate查 ...
- 《TomCat与Java Web开发技术详解》(第二版) 第六章节的学习总结 ---- JSP技术
第六章主要介绍了JSP的相关知识. 1.JSP:是通过在HTML文件中加入java程序片段(Java Scriptlet)和JSP标记,就构成了JSP文件.JSP实质上是Servlet.JSP的API ...
- 使用Application Loader上传APP流程解读[APP公布]
本文仅仅是提供一个公布流程的总体思路.假设没有公布经验.建议阅读苹果官方公布文档或者Google搜索具体教程. 1.申请开发人员账号:99美金的(须要信用卡支付),详细流程网上有非常多样例.自行搜索. ...
- 查看tcp各个连接状态的数量
4. 查看tcp各个连接状态的数量 下面对的 netstat -tan|awk '$1~/tcp/{aa[$NF]++}END{for (h in aa)print h,aa[h]}' SYN_SEN ...
- PHP 学习内容
第一阶段: (PHP+MySQL核心编程) 面向对象编程 MySQL数据库, MySQL的优化细节. HTTP协议,http也是我们web开发的基石.对我们了解PHP底层机制有很大帮助,做到知其然,还 ...
- java实体类如果不重写toString方法,会如何?
先认识一下Object Object 类的 toString 方法 返回一个字符串,该字符串由类名(对象是该类的一个实例).at 标记符“@”和此对象哈希码的无符号十六进制表示组成.换句话说,该方法返 ...
- Python读取word文档(python-docx包)
最近想统计word文档中的一些信息,人工统计的话...三天三夜吧 python 不愧是万能语言,发现有一个包叫做 docx,非常好用,具体查看官方文档:https://python-docx.read ...
- EventBus的使用详解,功能为在Fragment,Activity,Service,线程之间传递消息
最近跟同事用到了EventBus的使用,之前不太了解EventBus,查阅资料发现EventBus还挺好用的,用法比较简单,下面就把我看到的关于EventBus的博客分享给大家,里面介绍了很多的使用详 ...