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高阶函数的理解(函数作为参数传递)的更多相关文章

  1. JS高阶编程技巧--compose函数

    先看代码: let fn1 = function (x) { return x + 10; }; let fn2 = function (x) { return x * 10; }; let fn3 ...

  2. JS高阶编程技巧--惰性函数

    在vue.react等框架大量应用之前,我们需要使用jQuery或者原生js来操作dom写代码,在用原生js进行事件绑定时,我们可以应用DOM2级绑定事件的方法,即:元素.addEventListen ...

  3. React.js高阶函数的定义与使用

    /* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...

  4. js高阶函数的理解

    高阶函数:英文叫Higher-order function.JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数 ...

  5. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  6. 浅谈JS高阶函数

    引入 我们都知道函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行,获得返回值或者实现其他功能.函数有函数名和参数,而函数参数是当调用函数接收的真实的值. 今天要说的高阶函数的英文为High ...

  7. JS 高阶函数

    笔记整理自:廖雪峰老师的JS教程 目录 概述 Array中的高阶函数 map(返回新的Array) reduce(返回新的Array) filter(返回新的Array) sort(返回同一Array ...

  8. js高阶函数

    我是一个对js还不是很精通的选手: 关于高阶函数详细的解释 一个高阶函数需要满足的条件(任选其一即可) 1:函数可以作为参数被传递 2:函数可以作为返回值输出 吧函数作为参数传递,这代表我们可以抽离一 ...

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

    在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...

随机推荐

  1. 【转】【FTP】之windows8.1上搭建FTP服务器方法

    参考地址:<windows8.1上搭建FTP服务器方法>

  2. PowerBuilder--Aes128加解密

    通过C#开发Com控件,注册到系统,然后由pb通过OLEObject进行调用 原文:https://www.cnblogs.com/eric_ibm/archive/2012/07/06/dll.ht ...

  3. 查看硬盘负载情况:iostat命令

    Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.同 ...

  4. python 文字识别 之 pytesseract

    pytesseract资源 链接:https://pan.baidu.com/s/1eTsqhsY 密码:j0yo 安装时前面一直next就可以了,直到这一步,勾选Math和Chinese,支持计算和 ...

  5. vagrant系列四:vagrant搭建redis与redis的监控程序redis-stat

    上一篇php7环境的搭建 真是火爆.仅仅两天时间,就破了我之前swagger系列的一片文章,看来,大家对搭建好开发环境真是情有独钟. 为了訪问量,我今天再来一篇redis的搭建. 当然不能仅仅是red ...

  6. linux 常用的17个性能指标

    1.Average load:Average number of processes simultaneously in Ready state during the last minute.   上 ...

  7. python is == 的区别, 编码与解码.深浅拷贝

    一. is  ==  的区别 双等表示的是判断是否相等, 注意. 这个双等比较的是具体的值.而不是内存地址 is 比较的是地址 编码回顾 除了了ASCII码以外, 其他信息不能直接转换 编码和解码的时 ...

  8. 爬虫入门【7】Python-文件的读写和JSON

    文本文档的读写 最重要的open()方法将返回一个file对象,经常使用的两个参数为open(filename,mode) 其中,filename为file保存的地址,可以是本地地址,相对地址或者绝对 ...

  9. EasyNVR无插件直播服务器软件使用详情功能-通道配置Excel

    背景需求 使用EasyNVR的用户都有知道,由于EasyNVR是将设备与EasyNVR的通道进行绑定的,因此EasyNVR是通过手动的通道配置来进行设备接入的,这样可以做到将设备的和通道对应的接入.但 ...

  10. iOS 添加震动效果

    开发过程中,有时候会碰到点击按钮或者某个动画会配合震动效果:下面介绍iOS开发过程中的震动添加: 导入:#import <AudioToolbox/AudioToolbox.h> 在需要出 ...