![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
狗焕sama
这个作者很懒,什么都没留下…
展开
-
Promise 一些面试题
setTimeout(() => { //执行后 回调一个宏事件 console.log('内层宏事件3')}, 0)console.log('外层宏事件1');new Promise((resolve) => { console.log('外层宏事件2'); resolve()}).then(() => { console.log('微事件1');}).then(()=>{ console.log('微事件2')})原创 2020-09-25 08:03:53 · 210 阅读 · 0 评论 -
实现数组扁平化
利用apply和some方法实现var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; flatten = (arr) => { while (arr.some((item) => Array.isArray(item))) { arr = [].concat.apply([], arr); console.log(arr); } .原创 2020-09-23 16:27:27 · 217 阅读 · 0 评论 -
判断是否为数组类型 为什么Object.prototype.toString.call(arr)可以检测
Array.isArray()arr instanceof Arraytypeof arr == ‘object’ && arr.constructor == ArrayObject.prototype.toString.call(arr) == ‘[object Array]’原创 2020-09-23 10:43:03 · 474 阅读 · 0 评论 -
reduce实现map
Array.prototype.myMap = function(condiction,thisArr){ let ans = [] thisArr = thisArr || [] this.reduce((pre,curr,index) => { ans.push(condiction.call(thisArr,curr,index)) },[]) return ans; } let arr = [1,2,4] let test = a原创 2020-09-22 22:21:43 · 1212 阅读 · 2 评论 -
手写call,apply,bind
实现callFunction.prototype.myCall = function(context){ if(typeof this != 'function') throw new Error('type Error'); context = context || window//context上下文,指要指向的对象 const args = [...arguments].slice(1);//接收到的参数,因为第一个参数为要改变的this,不加入参数列表,用数组包原创 2020-09-14 12:47:10 · 158 阅读 · 0 评论 -
延长函数环境的生命周期(闭包)
当我们只调用函数时:function hd(){ let n = 1; function sum(){ console.log(++n); } sum(); } hd();//2 hd();//2从上面例子我们可以知道,单纯的调用的话,这个函数是会在内存里直接删除的。因为没有变量去指向它,这样会导致js内部觉得你不需要了。无论是全局还是局部,都会被删除而当我们用变量去引用它,即有指针指向它的时候,他就不会被清除。但是我们每调用一次hd1()函原创 2020-09-13 19:42:46 · 504 阅读 · 0 评论 -
instanceof 与 isPrototypeOf 的区别
原博客:jianshu.com/p/31b09a13f212和https://www.cnblogs.com/ArthurXml/p/6555509.html判断A构造函数的prototype对象是否在B的原型链上:B instanceof A:语法: prototypeObj.isPrototypeOf(object)参数: object 在该对象的原型链上搜寻返回值: Boolean,表示调用对象是否在另一个对象的原型链上。描述:isPrototypeOf 方法允许你检查原创 2020-09-13 19:42:23 · 487 阅读 · 0 评论 -
JS中new的过程做了什么
var obj = new Base();var obj = {};//创建一个空对象obj.__proto__ = Base.prototype;//让他的原型指向构造函数(Base)的原型对象Base.call(obj);//改变Base函数对象的指针this,将其替换成obj第一行,我们创建了一个空对象obj第二行,我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象第三行,我们将Base函数对象的this指针替换成obj,然后再调用Base函数。原创 2020-09-13 19:41:55 · 711 阅读 · 0 评论 -
_proto_和prototype的关系以及区别
_proto_是服务于函数对象的,prototype是服务于构造函数的实例化对象的js的函数会有一个默认的prototype对象,这个prototype对象用来指定函数的继承关系,prototype对象默认有两个属性,一个是constructor,另一个就是proto属性,默认的prototype对象在被改变之前就像是这个函数用来表示自己的一个对象,其中proto属性和普通对象的proto属性一样用来对应继承关系总结原型链的形成真正是靠__proto__ 而非prototype,当JS引擎执行原创 2020-09-13 19:41:26 · 746 阅读 · 0 评论 -
块级作用域
ES6开始因为const和let的出现有了块级作用域块级作用域的优点:原博客:https://blog.csdn.net/qq_40413396/article/details/85055092a没有块级作用域说法,但是会有函数作用域function hd(){ for(var a = 1;a < 10;a++); }console.log(a);//a is not defined1 外层代码块不受内层代码块的影响.function f1() { let n = 5;原创 2020-09-13 19:40:59 · 173 阅读 · 0 评论 -
数组去重
// 数组去重方法: //1.将原数组传入set中 // let arr = [1, 1, 2, 3, 4, 2]; // let set = new Set(arr); // console.log(set); // 2.双重循环遍历数组如果值相同,使用splice方法删去后一个相同的值 // let arr = [1, 1, 2, 3, 4, 2]; // Array.prototype.distinct6 = function () { // for (let i原创 2020-09-13 19:40:20 · 259 阅读 · 0 评论 -
ES6新特性
原文:https://www.cnblogs.com/hmchen/p/11390274.html一、 let 和 const主要就是暂时性死区,TDC关于let和const有几个小tips:let 关键词声明的变量不具备变量提升let 和 const 声明只在最靠近的一个块中有效;当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING;const 在声明时必须被赋值,否则会报错。使用let会出现暂时性死区,原因是let所声明的变量会锁在它所在的作用域里,不允许访原创 2020-09-12 11:17:58 · 136 阅读 · 0 评论 -
什么是事件委托?什么时候用?
js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上。事件代理就是,本来加在子元素身上的事件,加在了其父级身上。事件委托就是通过事件冒泡的原理,利用父级去触发子级的事件(即事件绑定在父节点上)那就产生了问题:父级那么多子元素,怎么区分事件本应该是哪个子元素的?答案是:event对象里记录的有“事件源”,它就是发生事件的子元素。它存在兼容性问题,在老的IE下,事件源是window.event.srcElement,其他浏览器是 event.target用事件委托有什么好处呢?第一个好处是原创 2020-09-12 11:08:03 · 1946 阅读 · 0 评论 -
元素scroll属性
这个和client与offset的区别:offset:包含padding和边框scroll:不包含padding,不包含边框client:不包含边框,包含padding但是scroll包含了超出盒子的大小,所以又叫做滚动!而client最多就是盒子加padding的大小超出边框的大小就是scrollTop利用scrollTop我们可以做一个到一定时候出现回到顶部案例...原创 2020-03-18 21:53:58 · 1293 阅读 · 1 评论 -
立即执行函数
js立即执行函数可以让你的函数在创建后立即执行,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行。写法:(function () {})();最后面的括号就是传入参数(function () {}());相当于第一种方法的最后的括号放进里面去了传入的参数可以有多个有时我们会看到传入的参数是window, jQuery为什么要传...原创 2020-03-18 21:34:28 · 149 阅读 · 0 评论 -
元素偏移量offset与可视区client
offset:获得相对于带有定位的父元素的位置,还可以获得自身宽度和长度(返回的数值都不带单位!)当元素父元素有position定位的时候,获取的是到父元素的边距offset和style的区别offset只能得到值,不能修改值offsetWidth包含:padding+border+width。而style不包括其中offset得到的值没用单位。style则有。案例:拖动窗口案...原创 2020-03-18 19:23:46 · 138 阅读 · 0 评论 -
BOM(2)同步异步,与窗口对象
**JS是单线程的语言:**同一时间只能做一件事。同步和异步既然JS是单线程的,我们就只能进行优化,才有了同步和异步的概念:同步:就算做完一个再做另一个异步:做一件事的时候,如果是判定为异步事件,就跳过先做下面的事。实例:输出还是1,2,3.定时器定时时间为0了,这是为什么呢?当我们编译时:主线程的栈中:但是由于异步任务中包括了回调(callback事件):包括了定时器。...原创 2020-03-17 23:56:08 · 145 阅读 · 0 评论 -
BOM(1)窗口加载,定时器
目标:BOM:浏览器对象模型,与浏览器窗口进行交互的对象而BOM是包含DOM的。一个浏览器窗口当然包含文档关于BOM:它是JS访问浏览器窗口的一个接口它是一个全局对象。定义再全局作用域的变量,函数都会变成window对象的属性和方法窗口加载事件:但是其也是一个传统的事件,如果用window.onload如果写多个只会以最后一个window.onload为准。为此我们可...原创 2020-03-17 17:06:32 · 146 阅读 · 0 评论 -
常用键盘事件
onkeyup:某个键盘按键被松开是触发onkeydown:某个键盘按键被按下时触发(识别所有)onkeypress:某个键盘按键被按下时触发(不识别功能键。shift,ctrl等等)onkeydown和onkeyup不区分字母大小写可以按照keyCode来判断我们按下了哪个键????让我们按下s键就把光标定位到搜索框:.focus():直接可以定位到搜索框...原创 2020-03-17 10:36:57 · 3189 阅读 · 0 评论 -
常用的鼠标事件(event)
常见的鼠标事件client:相对于浏览器可视区的坐标。(能看见的范围,无论你如何下拉翻页)page:相对于整个文档。即相对于整个页面的x,y轴坐标(距离)screen:相对于整个电脑屏幕的坐标实现图片跟图片一起移动功能onmousemove:鼠标移动注意:一定不要忘了位置的单位<head> <meta charset="UTF-8"> &l...原创 2020-03-16 21:00:04 · 1309 阅读 · 0 评论 -
事件的委托
事件的冒泡可以带给我们好处。例如:我们如果想让下面的li标签点击一下就变成粉红色因为冒泡事件,子元素点击之后父元素也会执行。再根据这个性质。先绑定父元素,再利用e.target可以让点击的子元素变成粉红色即可。不再像以前一样写个数组for循环一个一个的写。添加父元素侦听器因为冒泡原理。e.target可以让点击的子元素变成粉红色即可...原创 2020-03-16 20:32:25 · 97 阅读 · 0 评论 -
事件对象
其实就是idea经常代码补全的形参。可写可不写,但是如果想自己命名就必须写。它有很多属性和方法:例如:鼠标触发事件的话,可以得到鼠标的相关信息,如鼠标位置e.target:跟this有些不一样。比如说我们写了ul,里面有很多子节点li。此时我们如果绑定了ul事件并且我们点击了li,如果我们写this,返回的是ul,因为li是其子元素。但是如果我们写的是e.target。返回的是具体是...原创 2020-03-16 20:13:52 · 131 阅读 · 0 评论 -
事件高级与DOM事件流
高级事件目标:我们平时用的绑定事件如果我们用平时的传统方法注册事件,后面绑定的处理函数会覆盖之前的处理函数。事件监听方式(传入的type必须是字符串!!!)当我们用传统的做法:只弹出hao a u;证明了平时的传统方法注册事件,后面绑定的处理函数会覆盖之前的处理函数。但是如果我们使用事件监听方式:注意type是字符串形式,并且不能加on此时先弹出22,后弹出33如何解...原创 2020-03-16 18:07:02 · 100 阅读 · 0 评论 -
创建动态元素
三种动态创建元素的区别: document.write():直接把内容写入页面的内容流但是文档加载完成后,会导致页面全部重绘只显示他自己创造的元素或者文本innerHTML跟createlements的区别:innerHTML跟createlements的效率不一样:当创建元素很多时,createlements效率慢很多。这样会导致加载页面的时候如果我们选 createle...原创 2020-03-16 15:04:50 · 148 阅读 · 0 评论 -
节点操作
节点操作可以利用父子兄弟节点获取元素,更为简单的操作,因为我们网页所有的内容都是节点(标签,属性,文本,文档)我们网页所有的内容都是节点(标签,属性,文本,文档)节点的属性有:nodeType():节点类型nodeName():节点名称nodeValue():节点值nodeType:节点类型元素节点:nodeType为1属性节点:nodeType为2文本节点:node...原创 2020-03-16 01:00:41 · 139 阅读 · 0 评论 -
H5自定义属性
自定义属性的目的:是为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中。设置属性:element.setAttribute(name, value);:name代表属性名,value代表属性的值/新值。getAttribute()。 返回元素上一个指定的属性值。如果指定的属性不存在,则返回 null 或 “”removeAttribute() 从指定的元素中删除一个属性。...原创 2020-03-16 00:09:35 · 161 阅读 · 0 评论 -
换板块案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册页面</title> <style> .head{ width: 500px; he...原创 2020-03-15 21:48:52 · 121 阅读 · 0 评论 -
JS字符串
当我们创建一个字符串var str = ‘andy’时,我们又没用new实例化这个对象,为什么会有属性和方法呢?后台做了这么一件事:基本包装类型有三个:String,Number,Boolean字符串的不可变指的是值不可变!虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间indexOf:一个参数,表示查找此字符串出现的第一个位置两个参数,表示从指定位置开始查找字...原创 2020-03-13 18:39:14 · 177 阅读 · 0 评论 -
倒计时案例
var now = +new Date(); function set(time) { var pastTime = +new Date(time);//获取过去时间毫秒数 var gaptime = (now - pastTime) / 1000;//获取过去时间和现在的秒数差距,因为是毫秒。所有/1000; ...原创 2020-03-13 16:06:22 · 101 阅读 · 0 评论 -
JS对象
对象一定是一个具体的事物:对象时一组无序的相关属性和方法的集合,所有的事物都是对象。对象由属性和方法组成的三种创建对象方式1....原创 2020-03-13 01:14:04 · 116 阅读 · 0 评论 -
JS预解析
知识点:JS引擎运行方式:先预解析,再执行代码预解析:把js里面所有的var还有function提升到当前作用域的最前面预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)...原创 2020-03-11 22:38:02 · 116 阅读 · 0 评论 -
JS作用域
作用域:变量再某个范围内起作用和效果,目的是为了提高程序额可靠性,减少命名冲突JS的作用域(es6之前)全局作用域与全局变量在局部作用域与局部变量只在在函数内部起作用的作用域叫做局部作用域,此时的变量叫做局部变量。作用域链只要是一个变量,只有一个作用域。除了全局和局部作用域之外...原创 2020-03-11 16:29:09 · 79 阅读 · 0 评论