js分享
文章平均质量分 52
前端分享会
这个作者很懒,什么都没留下…
展开
-
for-in和for-of区别
for-in和for-of区别先说说结论for-in适合遍历对象属性,for-of适合遍历数组for-in循环出的是key值,for-of循环出的是valuefor-in可以遍历可枚举的属性,for-of遍历的是可迭代的for-of不能直接遍历普通的对象,需要通过Object.keys()搭配使用for-in循环最早期遍历数组的方式就是一层for循环遍历数组下标:let a=[1,2,3,4];for(let i=0;i<a.length;i++){ console.l原创 2021-01-28 15:02:24 · 885 阅读 · 2 评论 -
谈谈js的变量提升
谈谈js的变量提升所谓变量提升就是指在js代码的执行过程中,js引擎会把变量的声明部分和函数声明部分提升到代码开头的行为,变量被提升后会给变量设置默认值undefined。下面举个例子:paly();console.log(name);var name="zhangsan";function paly(){ console.log("this is paly");}//将代码拆分成声明和执行部分//-------声明-----------var name=undefined;func原创 2021-01-27 22:07:47 · 156 阅读 · 0 评论 -
谈谈对this的理解
谈谈对this的理解什么是this每个函数在被调用时都会创建一个执行上下文,这个上下文包含了变量环境、this、作用域链等,this就是执行上下文中的一个属性,他是在函数运行时进行绑定的,this的绑定和函数的声明位置没有关系,它取决于函数的调用方式。this的绑定规则默认绑定首先要说的就是函数最常用的调用方式独立函数调用,这时this就会遵守默认绑定规则。看下面这个例子:var name="zhangsan";function a(){ console.log(this.nam原创 2021-01-27 22:07:13 · 1493 阅读 · 0 评论 -
js原型和原型链
原型和原型链什么是原型?在js中,每当定义一个函数数据类型(Object、Function、Arrry、Date等)的时候都会自带一个prototype对象,这个对象就是我们说的原型。原型有什么作用?先来看一个例子:function Person(){ this.showName=function(){ console.log("zhangsan") }}let person1=new Person();let person2=new Person();console.lo原创 2021-01-27 22:06:02 · 1623 阅读 · 1 评论 -
谈谈js中new的作用
js中new的作用function fun(name){ this.name=name;}fun.prototype.getNmae=function(){ console.log(this.name)}let fc=new fun("xiaoming");console.log(fc.name);//xiaomingfc.getNmae()//xiaoming从上面的例子中可以得出以下结论:new的时候会将函数fun作为构造函数,创建一个新的实例,这个实例可以访问到构造函数中原创 2020-12-09 21:20:08 · 1718 阅读 · 1 评论 -
探究async/await
async是‘异步’的简写,async声明一个function是异步的,而await用于等待一个异步方法执行完成,await只能出现在async函数中。async await和generator的写法很像,就是将 Generator 函数的星号(*)替换成 async,将 yield 替换成await但async 函数对 Generator 函数做了改进:1、内置执行器:Generator函数的执行必须靠执行器,所以才有了 co 函数库,而 async 函数自带执行器.也就是说,async 函数的执行原创 2020-11-03 22:04:21 · 178 阅读 · 2 评论 -
你不知道的js函数提升
今天我们来聊聊js的函数提升!!!!情况一先来看的例子foo();function foo() {console.log(“foo”);}这个我们应该很容易看出来,结果是"foo",因为这是一个函数声明,函数声明在执行的时候会被提升,所以在调用之前就会被声明。所以可以写成下面这样function foo() {console.log(“foo”);}foo();情况二foo();var foo = function fun() { console.log("fun")原创 2020-09-29 22:23:25 · 510 阅读 · 1 评论 -
听我说localStorage
什么是localStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。localStorage优点1、localStorage拓展了coo...原创 2020-05-05 22:47:18 · 113 阅读 · 0 评论 -
在localStorage中存取值的方法
在前端开发中,当我们重新加载页面时我们希望显示到上一次页面的数据,这时我们就要用到LocalStorage,将我们的数据保存到这里,退出页面时将数据保存,重新加载就直接取出我们的数据,下面用个实例来介绍下我们存取值的方法。在一些购物app中我们点击不同的商家就会显示对应商家的基本信息,我们一般通过给每个商家的页面设定一个id,当我们访问某个商店时只要将对应的id返给后端,后端就会给我们对应的信息,下面我们就来实现下。上代码//假设我们的地址http://localhost:8081/?id=1234原创 2020-06-10 20:57:54 · 4204 阅读 · 2 评论 -
vue中子组件修改父组件传入的值问题
在讲vue之前,我们先来了解一下js中参数的传递按值传递什么是按值传递呢?简单来说按值传递就是将一个变量复制给另一个变量,当复制的那个变量发生改变时,原来的变量不会发生改变,举个简单的例子。var a=1;function arr(b){ b=2; console.log(b);//2}arr(a);console.log(a);//1这就验证了我们刚才所说的,这里将变量a复制给了b,相当于将a拷贝了一份,b改变时a不改变引用传递引用传递相对于按值传递适用于更复杂的数据结构,比如原创 2020-06-07 11:34:52 · 1489 阅读 · 0 评论 -
Touch事件
Touch 事件首先 touch 包含三类事件,它们分别是:touchstart、touchmove、touchend 。望文生义这种本能相信你应该会有,但在这里我还是有必需对这三个词进行一翻不必要的解释。授课时间touchstart:手指触摸到一个 DOM 元素时触发。touchmove:手指在一个 DOM 元素上滑动时触发。touchend:手指从一个 DOM 元素上移开时触发。这三个事件又分别对应三个相同的触摸列表:授课时间touches:正在触摸屏幕的所有手指的一个列表。targe转载 2020-05-21 13:50:49 · 3262 阅读 · 0 评论 -
你不知道的JS事件
鼠标事件1、onclick:单击事件2、ondbclick:双击事件3、oncontextmenu:右击事件4、onmouseover:鼠标移入事件5、onmouseout:鼠标移出事件6、onmousemove:鼠标移入事件(只要鼠标在范围内就一直会触发函数)7、onmousedown:鼠标按下事件8、onmouseup:鼠标释放事件键盘事件1、onkeydown:键盘按下2、onkeyup:键盘释放3、keyCode:按键属性(数字)其它类事件1、onload:加载事件(DO原创 2020-05-13 21:30:01 · 338 阅读 · 0 评论 -
DOM节点
节点属性1、childNodes:返回所有子节点的一个集合,子节点包括元素节点、文本节点、属性节点。2、nodeName:返回节点名称,注意是大写。3、nodeType:返回数字(节点类型)******返回1代表元素节点******返回3代表文本节点4、firstChild:获取第一个子元素(包括文本节点)5、lastChild:获取最后一个子元素(包括文本节点)6、firstElementChild:获取第一个元素节点(子元素)与之对应的是lastElementChild.举个例子区分f原创 2020-05-12 22:21:35 · 91 阅读 · 0 评论 -
getElementsByClassName封装
function fn(cName) { var dom = document.getElementsByTagName('*'); var arr = []; for (let i = 0; i < dom.length; i++) { if (dom[i].className == cName|| dom[i].className.indexOf(' ' + c...原创 2020-05-08 12:56:42 · 86 阅读 · 0 评论 -
e.target.innerHtml
在触发DOM上的事件都会产生一个对象,即事件对象(也称event对象),这里用e接收事件对象。事件对象有很多属性和方法,此处的target属性是获取事件目标,即元素DOM对象,然后获取其相应的属性,比如点击事件,e.target就是鼠标点击的对象的父元素,innerHTML就是里面的text内容。...原创 2020-05-01 09:33:51 · 2351 阅读 · 0 评论 -
js闭包
闭包:闭包本质上是将函数内部与函数外部联系起来的桥梁,内部函数可以使用外部函数的变量,闭包相关知识点:1、常见的形式是在函数内部创建另一个函数2、闭包的调用形式:{return function fu(){return “闭包”;}}调用方式:1、alert(myfun()()); 2、var bb=myfun();//bb是内部函数 alert(bb(...原创 2020-04-08 21:48:51 · 93 阅读 · 0 评论 -
js匿名函数
匿名函数顾名思义指的是没有名字的函数,在实际开发中使用的频率非常高!也是学好JS的重点。首先我们声明一个普通函数://声明一个普通函数,函数的名字叫myfun(),注意没有函数名function fn(){console.log("匿名函数");}但是运行时你会发现,运行出错,因为没有函数名的函数不符合语法要求,即单独的匿名函数无法进行调用,那么该如何调用函数呢?1、把匿名函数赋值...原创 2020-04-08 17:16:21 · 212 阅读 · 0 评论 -
HTML5新增js选择器
document.querySelector(’ select’):返回第一个满足条件的元素。document.querySelectorAll(‘select’)返回所有满足条件的元素,结果是nodeList集合。注意事项:参数select可以包含多个css选择器,用逗号隔开,<!DOCTYPE html><html> <head> <m...原创 2020-04-05 22:03:57 · 143 阅读 · 0 评论 -
轻松理解JS时间冒泡机制
首先我们先来回顾JS有哪些事件:1、鼠标事件:onclick、ondbclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout…;2、页面事件:onload、onunload、onresize、onerror、onabort;3、键盘事件:onkeypress、onkeydown、onkeyup;4、表单事件:onblur...原创 2020-04-03 21:16:20 · 765 阅读 · 0 评论 -
setInterval()和setTimeout()的区别
setTimeout() 是在指定时间后执行代码,,setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。setTimeout用法: 语法: setTimeout("c’’,ms) c:作为调用setTimeout()后执行的函数或表达式。 m...原创 2020-03-30 21:39:43 · 419 阅读 · 0 评论 -
JS代码放在head和body中的区别分析
#**JS代码放在head和body中的区别分析*最近也是学习js突然遇到了一个问题,js代码写下body中和head中运行的结果不一样, 用简单的一句话介绍就是加载顺序的问题。如果放入head,那当页面加载head部分的时候,那个控件都还没有被定义,你能得到的只可能是一个undefind。 如果放入控件后面,则达到了所想的结果,此时控件已经定义完成可以被访问。...原创 2020-03-28 21:47:06 · 208 阅读 · 0 评论