
Js学习
文章平均质量分 58
想要一只肥宅快乐兽
这个作者很懒,什么都没留下…
展开
-
JS正则表达式
常用正则元字符在正则中有特殊语义的字符;.[][^]?*+{min,max}^$()\1\2|转义符表示方法\作用用于匹配元字符匹配方式test只返回是否匹配成功,不能精确匹配,例如console.log(/\d{2}/.test('13a')) //trueexec可以精确匹配,会返回匹配的内容、开始匹配的位置和输出字符组表示方法[]作用在固定范围内匹配一个字符示例console.log(/[1-9]/.test('1')) //trueconsole.log(/[原创 2021-07-12 21:51:24 · 223 阅读 · 1 评论 -
回流和重绘
浏览器渲染机制解析HTML,生成DOM树,解析CSS,生成CSSOM树将DOM树和CSSOM树结合,生成渲染树Render TreeLayout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小)Paint(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素Display:将像素发送给GPU,展示在页面上。为了构建渲染树,浏览器主要完成了以下工作:从DOM树的根节点开始遍历每个可见节点对于每个可见节点,找到CSSDOM树中对应的规则,并应用转载 2021-05-30 22:51:25 · 158 阅读 · 0 评论 -
面试题合集VUE
生命周期beforeCreate:该阶段获取不到props和data中的数据,因为这些数据的初始化都在initState中。created:这时可以访问props和data中的数据,但是还未挂载,因此不会显示内容beforeMount:开始创建VDOM(虚拟DOM)mounted:将VDOM渲染为真实的DOM并渲染数据,组件中如果有子组件的话会递归挂载子组件,当所有子组件挂载完毕,才会执行根组件挂载钩子beforeUpdate:在数据更新前调用updated:在数据更新后调用另外keep-a原创 2021-05-16 19:50:55 · 218 阅读 · 2 评论 -
面试题合集二
1.事件机制事件触发的三个阶段:window往事件触发处传播,遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处往window传播,遇到注册的冒泡事件会触发事件触发一般来说会按照上述顺序执行,但是如果给一个body中的子节点同时注册冒泡和捕获事件,事件触发会按照注册的顺序执行。node.addEventListener('click',event => { console.log('冒泡')},false)node.addEventListener('c原创 2021-05-15 19:43:16 · 110 阅读 · 0 评论 -
JS RequestAnimationFrame(五十)
RequestAnimationFramerequestAnimationFrame比起setTimeout、setInterval的优势主要有两点:requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重回或回流中就完成,并且重绘或回流的时间间隔紧紧耿穗浏览器的刷新频率,一般来说,这个频率为每秒60帧。在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的cpu、gpu和内存使用量。在运行时浏览器会自动优化方法原创 2021-05-11 21:18:59 · 168 阅读 · 0 评论 -
JS 继承(二十九)
继承ES中只支持实现继承,且主要依靠原型链来实现的。原型链首先明确构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,二实例都包含一个指向原型对象内部的指针。如果原型对象等于另一个类型的实例,那么相应的,另一个原型中也包含着一个指向另一个构造函数的指针,如此嵌套就构成了实例与原型的链条。function SuperType() { this.property = true}SuperType.prototype.getSuperValues原创 2021-04-08 15:09:05 · 104 阅读 · 0 评论 -
JS 类和对象的创建(二十八)
W3C类和对象的创建比较合适的创建方法1.混合的构造函数/原型方式:联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。使用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。function Car(sColor,iDoors) { this.color = sColor this.doors = iDoors this.drivers = new Array('Mike','John')}Car.prototype.showColor转载 2021-04-08 15:06:16 · 75 阅读 · 0 评论 -
JS 对象(二十七)
如何创建一个对象var person = new Object()person.name: 'Nicholas'person.age: 19person.sayName: function(){ alert(this.name)}属性类型ES中有两种属性:数据属性和访问属性。1.数据属性:包含一个数据值的位置。可以读取和写入值。数据属性有4个描述其行为的特性:[[Configurable]]:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属原创 2021-04-08 15:04:08 · 110 阅读 · 0 评论 -
JS this(二十六)
this是什么this关键词指的是它所属的对象。它拥有不同的值,具体取决于它所在的位置:在方法中,this指的是所有者对象单独的情况下,this指的是全局对象在函数中,this指的是全局对象在函数中(严格模式下),this是undefined在事件中,this指的是接收事件的元素call()和apply()方法可以将this引用到任何对象事件处理程序中的this在HTML事件处理程序中,this指的是接收此事件的HTML元素:<button onclick="this.sty原创 2021-03-21 16:22:40 · 89 阅读 · 0 评论 -
JS Math(二十五)
Math对象属性描述E返回算数常量e,即自然对数的底数(约等于2.718)LN2返回2的自然对数(约等于0.693)LN10返回10的自然对数(约等于2.302)LOG2E返回以2为底的e的对数(约等于0.434)PI返回圆周率(约等于3.14159)SQRT1_2返回2的平方根的倒数(约等于0.7.7)SQRT2返回2的平方根(约等于1.414)Math对象方法方法描述abs(x)返回数的绝对值ac原创 2021-03-21 16:21:00 · 75 阅读 · 0 评论 -
JS setTimeout()和setInterval()(二十三)
setTimeout:setTimeout()是属于window的方法,通常使用时会省略window这个顶层物件名称。用于在指定的毫秒数后调用函数或计算表达式。语法:setTimeout('method'(要执行的method),time(指定的等候时间))setTimeout不会重复可以使用clearTimeout(对象)清除已设置的setTimeout对象setInterval:setInterval()属于window的方法,通常使用时会省略window这个顶层物件名称。可按照指定的原创 2021-03-21 16:19:32 · 82 阅读 · 0 评论 -
JS 委托事件(二十二)
js中事件委托或是事件代理详解转载 2021-03-21 16:15:44 · 86 阅读 · 0 评论 -
JS cssText(二十一)
cssText本质是什么:本质就是设置HTML元素的style属性值。使用格式:document.getElementById("d1").style.cssText = 'color:red;font-size:13px'cssText返回值:在一般的浏览器中,它返回你赋给它的值,但是在IE中,它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号:document.getElement("d1").style.cssText = "color:red,font-size:13px原创 2021-03-21 16:14:53 · 562 阅读 · 0 评论 -
JS 动态修改CSS样式(二十)
动态修改CSS样式的四种方法几种方法:使用obj.className来修改样式表的类名使用obj.style.cssTest来修改嵌入式的css使用obj.classNmae来修改样式表的类名使用更改外联的css文件,从而改变元素的css...转载 2021-03-21 16:12:43 · 150 阅读 · 0 评论 -
JS HTML DMO Style(十九)
JS HTML DMO Style(十九)标签(空格分隔): 前端学习HTML DOM StyleStyle对象Style对象代表一个单独的样式声明。可从应用样式的文档或元素访问Style对象。使用Style对象属性的语法:document.getElementById("id").style.property = '值'...原创 2021-03-21 16:11:50 · 124 阅读 · 0 评论 -
JS HTML DOM对象(十八)
HTML DOM Text对象Text对象化代表HTML表单中的文本输入域。在HTML表单中<input type="text">每出现一次,Text对象就会被创建。该元素可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候,会触发onchange事件句柄。Text对象属性:属性描述accesskey设置或返回访问文本域的快捷键alt设置或返回当前浏览器不支持文本域时供显示的替代文本defaultValue设置或返原创 2021-03-21 16:09:20 · 84 阅读 · 0 评论 -
CSS3 CSS Sprite(二十四)
什么是CSS Sprite将图标、背景、按钮背景等图片合并成一张图,然后通过坐标来定位背景。当访问该页面时,载入的图片就不会像以前那样一个一个显示。CSS Sprite的优缺点优点:可以减少网页的http请求,从而提高性能。减少图片的大小,从而减少所在内存空间。易于风格更换。只需要改变少量图片样式或颜色,就可以改变整个网页风格。减少网页设计的时间缺点:引入不必要的背景,并不是所有图片都是背景,有些重要的信息应该写入HTML开发麻烦维护复杂更多:CSS使用Spirtes技术实原创 2021-03-18 17:34:11 · 157 阅读 · 0 评论 -
JS DOM(十七)
HTML DOM(文档对象模型)当浏览器被加载时,浏览器会创建页面的文档对象模型。HTML DOM模型对象树:文档节点文档节点是每个文档的根节点,同理文档元素即文档最外层的元素node类型常见类型:节点类型例子ELEMENT_NODE1<h1 class="heading">W3School</h1>ATTRIBUTE_NODE2class = "heading" (HTML DOM中弃用,XML DOM可用)TEXT_NOD原创 2021-03-17 14:01:43 · 279 阅读 · 0 评论 -
JS 垃圾收集(十六)
JS具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存。浏览器中常用的垃圾收集策略:标记清除:最常见的垃圾收集方式,当变量进入环境时,就将这个变量标记为"进入环境",逻辑上,永远不能释放进入环境的变量的内存,当离开环境时,则将其标记为"离开环境"引用计数:跟踪记录每个值被引用的次数,当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1,当又被赋给另一个值时,引用次数加1。相应的包含对这个值引用的变量又取得了其他值时,该值的引用次数减1,当该值的引用次数变为0时,就可原创 2021-03-17 14:00:50 · 87 阅读 · 0 评论 -
JS 执行环节与作用域(十五)
执行环境(环境)定义了变量或函数有权访问的其他数据。每个执行环境都有一个与之关联的变量对象,环境变量中定义的所有变量和函数都保存在这个对象中。环境:全局环境,是最外围的一个执行环境,在Web浏览器中,全局执行环境被认为是window对象。局部环境,函数内部的执行环境,当执行流进入一个函数时,函数的环境就会入环境栈,当函数执行完成后就会将环境弹出。作用域链当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链可以保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终是当原创 2021-03-16 15:25:06 · 88 阅读 · 0 评论 -
JS 事件(十四)
事件绑定的三种方法:1.HTML事件处理程序属性:<button onclick="bgChange()">Press me</button>function bgChange() { xxxxx}2.事件处理程序属性:const buttons = document.querySelectorAll('button')for(let i = 0; i < buttons.length; i++) { buttons[i].onclick = bgCh原创 2021-03-16 15:21:24 · 105 阅读 · 0 评论 -
JS 函数(十三)
function functionName(arg0,arg1...,argN) { statements }严格模式对函数的一些限制:不能把函数命名为eval或arguments不能把参数命名为eval或arguments不能出现两个命名参数同名的情况如果出现上述情况,会导致语法错误,代码无法执行。理解参数ES中函数的参数可以定义多个,但在调用时可以不用每个参数都传递。原因是ES中的参数在内部是用一个数组来表示的函数接收到的始终都是这个数组,而不关心数组中包含哪原创 2021-03-16 15:17:49 · 108 阅读 · 0 评论 -
JS 数组及数组方法(十二)
字符串和数组之间的转换可以使用split()方法将字符串转换为数组。let myData = 'Manchester,London,Liverpool'let myArray = myData.split(',')可以使用join()方法将数组转化为字符串。let myNewString = myArray.join(',')还可以使用toString()方法将数组转为字符串let dogNames = ["Rocket","Flash"]dogNames.toString()添加原创 2021-03-16 15:14:09 · 103 阅读 · 0 评论 -
JS 字符串及其操作(十一)
获取字符串长度可以使用length属性查找子字符串并提取可以使用indexOf()方法,该方法会返回子字符串在父字符串中的位置,例如:browserType.indexOf('zilla')上述代码返回结果为2,原字符串为mozilla当找不到子字符串时,会返回-1提取字符串时可以配合slice()方法。转换大小写转换大写:toUpperCase()转换小写:toLowerCase()替换部分字符可以使用replace()方法brow = brow.replace('被替换的内容原创 2021-03-16 15:12:27 · 151 阅读 · 0 评论 -
JS 常用方法合集(十)
1.slice()方法slice()方法提取某个字符串的一部分,并返回一个新的字符串,不会改变原字符串。slice(beginIndex[,endIndex])参数beginIndex:从该索引(以0为基数)处开始提取原字符串中的字符。如果值为负数,会被当做strLength+beginIndex看待,strLength为字符串长度。endIndex:可选,如果省略该参数,slice()会一直提取到字符串末尾。如果该参数为负数,则被看作strLength+endIndex返回值返回一个从原字原创 2021-03-16 15:10:33 · 100 阅读 · 0 评论 -
Js let和var和const(九)
MDNvar和let的区别let运行你声明一个作用域被限制在块级中的变量、语句或者表达式。var声明的变量只能是全局或者整个函数块的。var和let的不同之处在于后者在编译时才初始化作用域规则let声明的变量只在声明的块或子块中可用,这一点和var相似。二者最主要的区别在于var声明的变量的作用域是整个封闭函数。function varTest() { var x = 1; { var x = 2; console.log(x); // 2原创 2021-03-16 15:03:43 · 98 阅读 · 0 评论 -
JS 异常(八)
try和catchtry语句运行你定义一个代码块,以便在执行时检测错误catch语句允许你定义一个要执行的代码块,如果try代码块中发生错误。try { 供测试的代码块}catch(err) { 处理错误的代码块}JavaScript实际上会创建两个带有属性的Error对象name和messagethrow语句throw语句允许你创建自定义错误异常可以是js的字符串、数字、布尔或对象finally语句finally语句允许你在try和catch之后执行代码,无论结果原创 2021-03-16 14:56:15 · 86 阅读 · 0 评论 -
JS 正则(七)
什么是正则表达式?正则表达式是构成搜索模式的字符序列当你搜索文本中的数据时,你可以使用搜索模式来描述你搜索的内容正则表达式可以是单字符,或更复杂的模式正则表达式可用于执行所有类型的文本搜索和文本替换语法/pattern(模式)/modifiers使用字符串方法在JavaScript中,正则表达式常用于两个字符串方法:search()和replace()search()方法使用表达式来搜索匹配,然后返回匹配的位置replace()方法返回模式被替换处修改后的字符串使用search(原创 2021-03-16 14:53:48 · 146 阅读 · 0 评论 -
JS 语句(六)
if语句if(condition) { statement}else { statemnet2}switch语句switch(experssion) { case value: statement break; case value: statement break; default: statement}default关键字用于在表达式不匹配前面任何一种情形的时候,执行机动代码ES中的switch语句不同于其他语言,可以使用任何数据类原创 2021-03-16 14:45:23 · 80 阅读 · 0 评论 -
JS 数据类型(五)
ECMAScript中有5中基本数据类型:Undefined(变量未赋值)Null(空对象指针)(null == undefined返回值为true)Boolean(true和false两个值,要求全小写)Number(支持整数,浮点数,十进制数,八进制数(在严格模式下无效),十六进制数)String此外还有一种复杂的数据类型——Objecttypeof操作符返回类型:undefined:未定义值的变量boolean:boolean类型的变量string:字符串类型的变量nu.原创 2021-03-07 13:02:00 · 282 阅读 · 1 评论 -
JS 操作符(四)
ToBoolean操作参数类型结果UndefinedfalseNullfalseBoolean结果等于输入的参数(不转换)Number如果参数为+0,-0或NaN,则结果为false;否则为trueString如果参数为空字符串,则结果为false;否则为trueObjecttrue逻辑NOT运算符由感叹号(!)表示,逻辑NOT运算符返回的一定是Boolean值。运算行为如下:如果运算数是对象,返回false如果运算数是数字0.原创 2021-03-07 12:57:59 · 109 阅读 · 0 评论 -
JS JS关键词(三)
常见:关键词描述break终止switch或循环continue跳出循环并在顶端开始debugger停止执行JavaScript,并调用调试函数(如果可用)do…while执行语句块,并在条件为真时重复代码块for标记需被执行的语句块,只要条件为真function声明函数if…else标记需被执行的语句块,根据某个条件return退出函数switch标记需被执行的语句块,根据不同的情况try…catch对语句块.原创 2021-03-07 12:54:11 · 181 阅读 · 0 评论 -
JS 显示方案(二)
Js的几种显示方案:使用window.alert()写入警告框使用document.write()写入HTML输出(当HTML文档完全加载后使用此方法将删除所有已有的HTML)使用innerHTML写入HTML元素使用console.log()写入浏览器控制台...原创 2021-03-07 12:53:37 · 98 阅读 · 0 评论 -
JS 如何引入(一)
在HTML中Js代码必须放置于<script>和</script>之间。<script>标签可以放置在<head>和<body>中在使用该方法时,要注意避免在代码中的任何地方出现</script>字符串,否则会产生错误。如果非要写需要通过转义字符""解决这个问题<\/script>注:把脚本置于<body>元素的底部,可改善显示速度,因为脚本编译会拖慢显示。外部脚本:可以通过<script src原创 2021-03-05 09:44:20 · 182 阅读 · 1 评论