首先看几个问题: [主体] (1)定时器真的时定时执行的吗? 顺序验证: 测试结果: 接下来对上述代码做下修改,增加一个长时间工作的消耗,此时再来验证下定时器运行的精准度 结果如下: (2)定时器回调函数是在分线程上执行的吗? 主线程上执行 原因:JS代码是在主线程执行,所以回调函数是在主线程上执行的 (3)定时器是如何实现的? 这里涉及到事件轮询(事件循环模型),稍后介绍 .…

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.a…

/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export default higherOrder将这个高阶函数抛出去 三: 使用时先导入这个高阶函数,直接将组件以参数的方式传递进来即可 */ import React,{Component} from 'react'; /** * 定义高阶函数 */ function higherOrder(Wrappe…

摘自  https://www.cnblogs.com/bobodeboke/p/5594647.html 建议结合另外一篇关于闭包的文章一起阅读:http://www.cnblogs.com/bobodeboke/p/6127650.html 一.闭包 闭包某种程度上就是函数的内部函数,可以引用外部函数的局部变量.当外部函数退出后,如果内部函数依旧能被访问到,那么内部函数所引用的外部函数的局部变量就也没有消失,该局部变量的生存周期就被延续. 一个经典的例子如下: <script> //thi…

我是一个对js还不是很精通的选手: 关于高阶函数详细的解释 一个高阶函数需要满足的条件(任选其一即可) 1:函数可以作为参数被传递 2:函数可以作为返回值输出 吧函数作为参数传递,这代表我们可以抽离一部分容易变化的业务逻辑,吧这部分业务逻辑放在函数参数中,这样一来可以分离业务代码中变化与不变的部分. 举例  ajax请求中的回调函数 Array.prototype.sort…

高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会接触到的闭包也可以通过高阶函数构建,当然本文不打算介绍闭包,我们今天的主题是函数防抖和节流. 首先我们来简单看一下什么是函数防抖和节流,我们开发过程中常经常会用到一些dom事件,比如mouseover.keydown/keyup.input(处理中文输入还可能用到compositionstart/c…

引入 我们都知道函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行,获得返回值或者实现其他功能.函数有函数名和参数,而函数参数是当调用函数接收的真实的值. 今天要说的高阶函数的英文为Higher-order function, 高阶函数的高阶是什么意思呢? 定义 至少满足下列一个条件的函数 接收一个或多个函数作为输入 输出一个函数 怎么理解这么个东西呢?引言里说过了,函数实际上都是指向某个变量.既然变量可以是一个向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这…

1.何为高阶函数呢? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数.简单来说,就是对其他函数进行操作的函数就为高阶函数. 2.下面就介绍一下在JS中常见的filter()/reduce()/map()这三个高阶函数 filter()函数:是用于把Array的某些元素过滤掉,然后返回剩下的元素.它要求我们传入一个回调函数.且回调函数的返回值必须是一个Boolean值,filter()把传…

笔记整理自:廖雪峰老师的JS教程 目录 概述 Array中的高阶函数 map(返回新的Array) reduce(返回新的Array) filter(返回新的Array) sort(返回同一Array) every find findIndex forEach 概述 高阶函数英文叫Higher-order function.那么什么是高阶函数? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶…

在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个只有一个参数的函数,而这个函数返回一个带参数的函数,这样就实现了能写两个参数的函数了(具体参见下边代码)--这就是所谓的柯里化(Currying,以逻辑学家Hsakell Curry命名),也可以理解为一种在处理函数过程中的逻辑思维方式. function add(a, b) { return a…

map 举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果: function pow(x) { return x * x; } var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(pow); // [1…

高阶函数 满足下列条件之一的函数: 函数作为参数被传递(如回调函数): 函数可以作为返回值输出: 一些内置高阶函数的例子: Array.prototype.map map()方法通过调用对输入数组中的每个元素调用回调函数来创建一个新数组. map()方法将获取回调函数的每个返回值,并使用这些值创建一个新数组. map()方法的回调函数总共接收3个参数:element,index和array. 例子: 假设我们有一个数字数组,我们想创建一个新数组,新数组的每个值是原数组对应值的两倍. 不使用高阶函…

调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localStorage.setItem('content','类容') 运行下面代码一定要先设置这两个缓存,因为我在高阶组件封装了公共方法,调用缓存到输入框的value里 ,高阶组件返回的组件调用了这个方法 /* * 高阶组件其实是一个函数,传进去的一个组件,返回一个新组件 * 实现不同组件中的逻辑复用, *…

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,函数按照原始数组元素顺序依次处理元素. 注意: map() 不会对空数组进行检测. 注意: map() 不会改变原始数组. 参数:function(currentValue.index.arr) thisValue 可选.对象作为该执行回调时使用,传递给函数,用作 "this" 的值.如果省略了 thisValue ,"this" 的值为 "undefined". fo…

高阶函数:英文叫Higher-order function.JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用户都是想把这100个div显示的的.所以就有第二种写法 var appendDiv=function…

// 高阶函数 filter/map/reduce // filter中的回调函数有一个要求:必须返回一个boolean值, // 当返回true时,函数内部会自动将这次回调的 n 加入到新的数组中 // 当返回false时,函数内部会自动过滤掉这次的 n const nums=[10,20,60,94,348,57,24,674,645,44,4] let newNums = nums.filter(function (n){ return n<30 }) console.log("fi…

[总结] 小括号和中括号开头的在其前必须加封号: [主体] 首先搜索下 [主体] (1)讨论---编码风格问题 (2)什么情况必须用封号? 1.其后跟着匿名式函数调用 此时可以在匿名函数前加:如下所示 2.有时也会加到前面 原因:上线时会对js文件进行合并压缩, 如果不加,则会报错,将之前代码视为一体 3.综上所述,以后在写IIFE即匿名函数时在之前加: 4.[]中括号开头 .…

1. 面向对象编程介绍 1.1 两大编程思想 --- 面向过程 --- 面向对象 1.2 面向过程编程 POP 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候在一个一个的依次调用就可以了. 举个例子:将大象装进冰箱-------面向过程做法 1.打开冰箱门 2.把大象装进去 3.关上冰箱门 面向过程,就是按照我们分析好了的步骤,按照步骤解决问题. 1.3 面向对象编程 OOP 面向对象就是把事务分解称为一个个对象,然后由对象之间分工与合作. 举个例子:将大象…

大纲: 相关知识点: 主体: (1)模型原理 JS部分:初始化代码执行 WebAPIS:执行上下文对象(不是一个真的对象,而是一个抽象的虚拟对象,可以看做栈里的一个区域,包含很多对象) setTimeout:定时器管理模块(分线程) DOM(document):事件响应管理模块(分线程)callback queue:回调函数队列---→待执行JS中的stack初始化代码优先执行,当执行完毕后,才会执行回调代码 重点: 先执行初始化代码,执行完毕后才会循环遍历“”回调队列“”里的回调代码 (2)相…

在一些函数需被频繁调用的场景,如:window.onresize.mousemove.scroll滚动事件.上传进度等等,操作频繁导致性能消耗过高,而造成浏览器卡顿现象,我们可以通过函数节流的方式解决此问题.   比如我们在window.onresize事件中打印当前浏览器窗口的大小,而拉拽窗口的时候,打印窗口大小的工作1s内进行了10次.而实际是我们只需2次或3次,这就需要我们按时间段来忽略一些事件请求,比如确保在500ms内只打印1次.实现代码如下: var throttle=functio…

大纲: 主体: (1)介绍 (2)案例 编程实现斐波那契数列的计算 递归调用实现案例: Web Workers多线程的新标准并没有改变JS单线程的本质,分离出的子线程完全受主线程控制,且不得操作DOM,只有主线程才可以对页面进行更新操作. (3)使用 ①创建分线程文件 ②主线程发消息并设置回调 (4)主线程代码 (5)分线程代码 (6)验证 且此时,在运算过程中,可以操作界面,不会导致界面卡死. (7)小结 相关语法: 1.创建一个Worker对象new Worker(fileUrl); 2.向…

不同浏览器的内核,不太一样 360双核切换机制 一般涉及到金钱交易时,会切换到Trident内核,因为IE内核安全性较稳 不涉及金钱利益时,则会使用webkit内核 (1)内核是由很多模块构成 注意: 定时器模块运行在分线程上,那么是不是说明回调函数在分线程上?? JS代码运行在分线程上??? 答案是:JS运行在主线程上. .…

[大纲] 二级大纲: 三级大纲: [主体] (1)进程process 如下所示,两者内存空间相互独立 (2)线程thread (3)图解 注意:有的程序是多进程的,有的时单进程的 (4)单线程与多线程 .如果一个进程只包含一个线程,那么它就是单线程的 .如果一个进程有多个线程,那么它就是多线程的 如下所示,如果一个程序有两个进程,每个进程单独对应一个线程,那么它依然是单线程. (5)其他相关知识 (6)其他问题 现在移动设备双核或者多核,在同一时间点内可以同时做两件或多件事情 JS是单线程运行的…

[一]基础 (1)什么是数据? 存储在内存里 代表特定信息 本质为0101,二进制数据 (2)什么是内存? 内存条通电后产生的可存储数据的空间(临时的) 拓展: 1.2种数据 2.内存分类--栈和堆 (3)什么是变量? (4)数据.变量.内存区别 [二]相关问题 (1)内存 (2)引用变量赋值 (3)传参问题 答案:值传递 (4)JS引擎如何管理内存 此时还有两个内存,因为这两者都在栈内存,堆内存已经释放.全局变量生命周期相关. [释放内存分情况] . .…

首先看一段代码: let obj = { x: 100 }; function fn(y) { this.x += y; console.log(this); } 现在有一个需求:在1秒后,执行函数fn,并让其this指向obj. 如果写成 setTimeout(fn, 1000); 这么写的话,fn函数中的this是指向window的,而且也没有传递参数. 如果写成 setTimeout(fn(200), 1000); 这么写的话,this指向依然是window,而且相当于立即执行fn函数,并…

第上一篇文章中我们介绍了函数柯里化,顺带提到了偏函数,接下来我们继续话题,进入今天的主题-函数的反柯里化. 在上一篇文章中柯里化函数你可能需要去敲许多代码,理解很多代码逻辑,不过这一节我们讨论的反科里化你可能不需要看很多代码逻辑,主要是理解反柯里化的核心思想,其实这种思想可能在你刚入门js时候就接触到了,而且你几乎天天在写代码过程中使用它. 首先需要理解反柯里化我们先来回顾上一节的内容,科里化简单概括一下就是我们做了这样一件事情:把接受多个参数的函数变换成接受一个单一参数的函数,并且返回新的函数…

大纲: [主体] (1)如何证明JS运行是单线程的? 上述代码执行顺序结果为:fn()→timeout →timeout 接下来对上述代码做下修改 执行结果如右图所示 接下来点击确认,关闭弹框,再往后1s执行timeoout ,再过1s执行timeout 从这里可以看出,alert暂停了计时,点击确定后才会恢复程序执行和计时 最后总结如下 (2)为什么JS是单线程模式? .…

[大纲] [主体] (1)闭包优缺点 .延长局部变量的生命周期2.外部访问函数内部变量 闭包的优点同时也是它的缺点,就是 (2)解决方案 .能不用闭包就不用(很难做到,因为应用较多) .及时释放---通过null,将其设置为垃圾对象,利用垃圾回收机制回收 如下所示,及时释放 (3)内存溢出与内存泄露 1.内存溢出 验证: 2.内存泄露 注意:内存泄露--程序仍然可以正常运行 但内存泄露过多,到达临界点时,更容易发生内存溢出 常见的内存泄露: 1.意外的全局变量(隐式全局变量) 2.没有及时清理的…

[自定义JS模块] [闭包案例] (1)案例1 对应的模块文件 (2)案例2---使用匿名函数 对应的模块文件 案例2分析:因为内部函数引用了外部函数的变量,且存在嵌套关系,所以是闭包,分析结构图如下 .…

思维导图 栈堆翻译为为stack (1)原型与原型链 概念一.原型对象 验证步骤: 1.打印Data函数的原型prototype 原型属性指向原型对象 ===ES源码结构分析示意=== 2.空对象 3.JS特点:动态添加属性 小结: prototype原型.constructor构造 .每个函数有一个prototype原型属性,默认指向一个空对象即原型对象 .原型对象里有个构造器属性constructor属性,指向函数对象 概念图: 构造函数与原型对象相互引用 给原型对象添加方法,给谁用???…