
javascript
文章平均质量分 74
阿昊在
卷不动来华子打螺丝
展开
-
【JS】数组基本操作
创建增删查遍历排序颠倒顺序合并数组转字符串类数组转换为数组的方法数组拷贝filter()方法map()方法ES6的set数组去重方法原创 2022-03-21 09:58:49 · 1442 阅读 · 0 评论 -
【JS】自执行函数
目录立即调用的函数表达式一、函数的声明与执行二、 ()的问题三、自执行函数表达式四、自执行函数的应用立即调用的函数表达式在JavaScript中,会有自执行匿名函数:(function () {/*code*/} ) (),Self-executing anonymous function。一、函数的声明与执行函数声明与执行: // 声明函数fun0 function fun0(){ console.log("fun0"); .原创 2022-01-19 14:01:53 · 11242 阅读 · 1 评论 -
【JS】执行机制解析,设置定时器、取消定时器
JavaScript 执行机制浏览器( JavaScript 引擎)执行 JavaScript 的机制是基于事件循环的。由于 JavaScript 是单线程,同一时间只能执行一个任务。为了避免某些长时间任务造成无意义等待,JavaScript 引入了异步概念。同步任务直接在主线程队列中顺序执行,而异步任务会进入另一个任务队列,不会阻塞主线程。等到主线程队列空了(执行完了)的时候,就会去异步队列查询是否有可执行的异步任务了(异步任务通常进入异步队列之后还要等一些条件才能执行,如 ajax 请求、文件读原创 2022-01-16 21:42:49 · 4251 阅读 · 0 评论 -
【JS】事件流、事件冒泡、事件捕获、阻止冒泡、事件委托
目录事件:什么是事件流事件冒泡事件捕获DOM事件处理DOM0DOM2一个DOM元素同时绑定冒泡捕获,执行顺序:阻止冒泡阻止冒泡方法封装Event事件对象的使用事件委托什么是事件委托实现事件委托事件委托的优点:事件:JavaScript和HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器(或事件处理程序)来预定事件,以便事件发生时执行相应的代码。通俗的说,这种模型其实就是一个观察者模式。..原创 2022-01-15 20:46:00 · 1053 阅读 · 0 评论 -
【JS】Dom节点操作常用方法
目录1.访问/获取节点1.1 通过顶层document节点获取:1.2 通过父节点获取:1.3 通过子节点获取:1.4 通过兄弟节点获取:2.创建节点/属性3.添加节点4.复制节点5.删除节点6.添加文本1.访问/获取节点1.1 通过顶层document节点获取:document.getElementById(id); //返回对拥有指定id的第一个对象 document.getEle...原创 2022-01-14 22:16:15 · 1723 阅读 · 0 评论 -
【JS】设置、获取、删除标签属性以及H5自定义属性
使用setAttribute()('属性名', '属性值')方法可以添加、修改、删除属性。使用getAttribute(‘属性名')方法获取标签的属性使用removeAttribute('属性名')方法删除标签的属性自定义属性的目的:是为了保存和使用数据,有些数据可以保存到页面中而不用保存到数据库中自定义属性获取是通过 getAttribute(‘属性’) 方法获取但是有些自定义属性很容易引起歧义,不容易判断到底是元素内部的属性还是自定义属性H5中新增了标准原创 2022-01-14 20:41:52 · 11550 阅读 · 0 评论 -
作用域、作用域链
作用域:简单来说,在一定的空间里可以对数据进行读写操作,这个空间就是数据的作用域。JS中最常见的就是变量的作用域。变量的作用域分为两种:全局变量和局部变量。全局作用域: 最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的;局部作用域: 局部作用域一般只在固定的代码片段内可访问到,而对于函数外部是无法访问的,最常见的例如函数内部。块级作用域:ES6新增作用域链:当代码在一个环境中执行时,会创建变量对象的一个作用域链。由子级作用域返回父级作用域中寻找变量,就叫做作用域链原创 2022-01-13 22:06:11 · 152 阅读 · 0 评论 -
【JS】预处理以及执行
JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行事实上,JS的解析过程分为两个阶段:预编译期(预处理)与执行期。预编译期JS会对本代码块中的所有声明的变量和函数进行处理(类似与C语言的编译),但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。原创 2022-01-13 20:54:15 · 463 阅读 · 0 评论 -
渲染引擎、js引擎
一个完整的浏览器包含浏览器内核和浏览器的外壳(shell)。浏览器核心——内核分成两部分:渲染引擎和js引擎。由于js引擎越来越独立,内核就倾向于只指渲染引擎。浏览器一般由七个模块组成,User Interface(用户界面)、Browser engine(浏览器引擎)、Rendering engine(渲染引擎)、Networking(网络)、JavaScriptInterpreter(js解释器)、UI Backend(UI 后端)、Date Persistence(数据持久化存储)用户界.原创 2022-01-13 11:19:05 · 713 阅读 · 0 评论 -
【JS】之ES7
ES71.Array.prototype.includes()includes()作用,是查找一个值在不在数组里,若是存在则返回true,不存在返回false.1.基本用法:['a', 'b', 'c'].includes('a') // true['a', 'b', 'c'].includes('d') // false2.接收俩个参数:要搜索的值和搜索的开始索引['a', 'b', 'c', 'd'].includes('b') // t原创 2022-01-12 19:30:52 · 785 阅读 · 0 评论 -
【Es6】关键字之 super、static、new.target
ES6引入了Class(类)这个概念,作为对象的模板,通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法1.super关键字super用在调用的时候有两种情况:第一种情况,super作为函数调用时,代表父类的构造函数。 第二种情况,super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。class Person {原创 2022-01-12 17:07:50 · 743 阅读 · 0 评论 -
【JS】中的继承(包括ES6)
一、原型链继承1. 基本思想原型链继承的基本思想是通过原型来继承多个引用类型的属性和方法实现的基本思路是利用构造函数实例化对象,通过 new 关键字,将构造函数的实例对象作为子类函数的原型对象。2. 实现方法// 定义父类函数function Father() { // 定义父类属性 this.name = 'father'}// 给父类的原型添加方法Father.prototype.say = function () { console.log(.原创 2022-01-11 19:06:28 · 386 阅读 · 0 评论 -
原型与原型链
1.__proto__和constructor每一个对象数据类型(普通的对象、实例、prototype...)也天生自带一个属性__proto__,属性值是当前实例所属类的原型(prototype)。原型对象中有一个属性constructor, 它指向函数对象。2.何为原型链在JavaScript中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,原创 2022-01-10 19:30:47 · 100 阅读 · 0 评论 -
【JS】arguments
什么是arguments它是JS的一个内置对象,常被人们所忽略,但实际上确很重要,JS不像JAVA是显示传递参数,JS传的是形参,可以传也可以不传,若方法里没有写参数却传入了参数,该如何拿到参数呢,答案就是arguments了,在一些插件里通常这样使用。了解arguments这个对象之前先来认识一下javascript的一些功能:其实Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载。Javascrip中每个函数都会有一个Arguments对象实例argument..原创 2022-01-10 18:49:49 · 184 阅读 · 0 评论 -
有关闭包的概述及优缺点
一、闭包是什么:一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数,一个闭包原创 2021-12-16 08:47:19 · 3388 阅读 · 0 评论 -
【JS】判断数据类型常用方法
js基础变量类型在 JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String;复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Function, Date等等。js判断数据类型常用方法1.最常见的判断方法:typeof2.已知对象类型: instanceof3.对象原型链判断方法: prototype 通用但很繁琐4.根据对象的构造器constru..原创 2021-12-15 21:52:31 · 870 阅读 · 0 评论 -
DOM的基本操作
目录一、节点创建型API1.1 createElement1.2 createTextNode1.3 cloneNode二、页面修改形API2.1 appendChild2.2 insertBefore2.3 removeChild2.4 replaceChild三、元素属性型操作3.1 getAttribute()(获取属性)3.2 createAttribute()(创建属性)3.3 setAttribute()(设置属性)3.4 romov...原创 2021-12-15 21:16:07 · 1774 阅读 · 0 评论 -
单页面与多页面间的区别及优缺点
单页面应用:(SPA:single page web application),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。多页面:(MPA:multi page web application),就是指一个应用中有多个页面,页面跳转时是整页刷新原创 2021-12-08 11:32:56 · 1612 阅读 · 0 评论 -
JS中map()函数的使用
目录一、概念二、语法三、实例一、概念map()方法定义在JavaScript的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。注意:map()不会对空数组进行检测 map()不会改变原始数组二、语法array.map(function(currentValue, index, arr), thisIndex)参数说明:function(currentValue, index, arr):必须。为一个函数,数组中的每个...原创 2021-11-15 09:20:23 · 1721 阅读 · 0 评论 -
改变this指向的3个方法
函数中的this是在运行时候决定的,而不是函数定义时,有下列几种情况1、全局环境中的this指window2、其他函数中的this指向调用它的对象3、在构造函数里用new调用,指向创建的新实例对象4、使用call和apply改变函数中this的具体指向apply的参数需要放在一个数组里面bind改变this指向 返回函数调用执行三个方法都是原型上callcall的作用就与此相当,只不过call为stu添加了doThu方法后,执行了doThu,然后再将doThu这个方法从stu中删除。原创 2021-11-13 11:48:40 · 598 阅读 · 0 评论 -
展开运算符(...)的常见用法
目录1.数组解构赋值2.对象的解构赋值3.合并数组和对象a.数组合并b.对象合并4.帮助完成vuex中函数的映射5.使用Math对象里的相关函数1.数组解构赋值 结果数组中按顺序匹配,将’a’赋值给arg,'b’赋值给arg1,剩下的元素以数组形式赋值给展开运算符作用的变量。2.对象的解构赋值结果对象...原创 2021-11-11 22:09:34 · 1904 阅读 · 0 评论 -
JS中target属性的使用
前言:最近学习了target属性,是真的强大,可以不使用for()循环或者数组forEach()去判断我点击或者我需要找的是哪个元素,直接使用target点击就可获取。接下来说说target哪里强大。先看看target是什么意思。target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口 <ul> <li>生日快乐</li> <li>生日快乐</li>原创 2021-10-09 16:37:30 · 2732 阅读 · 0 评论 -
JavaScript中offset、client、scroll、screen、page五大系列
一、offset系列1. offsetX、offsetY获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX (offsetY)规定了事件对象与目标节点的内填充边(padding edge)在 X (Y)轴方向上的偏移量。注意:offsetX(offsetY)与clientX(cilentY)的区别是,前者是相对于触发事件的对象的坐标,而后者是相对于浏览器可视区域的坐标。IE8不支持事件参数e,要想使用事件参数对象必须是window.event。2. offsetP.原创 2021-09-18 09:35:29 · 669 阅读 · 0 评论 -
JS内置对象
文章目录前言:JS的对象就是Object,还有独立于宿主环境的ECMAScript实现提供的内置对象:Array,String,Date,Math一、基本对象Object:JS里有一句话叫万物皆对象(除了基本数据类型),对象就是属性的无序集合。数组是有序集合。创建对象的方法:直接量(也叫字面量) 属性(对象的静态体征) 方法(对象的动态行为) 一个属性属性名结束后用,逗号隔开。var stu = { //name与age属于静态体征 name: '小明', age原创 2021-08-23 23:50:43 · 504 阅读 · 1 评论 -
js创建对象的几种方式
目录js常用的几种创建对象的方式有:一、通过{}创建对象二、通过new Object()创建对象三、使用字面量创建对象四、使用工厂模式创建对象五、通过构造函数创建对象六、通过原型模式创建对象七、通过原型+构造函数的方式创建对象js常用的几种创建对象的方式有:{} new Object() 使用字面量 工厂模式 构造函数模式(constructor) 原型模式(prototype) 构造函数+原型模式还有一些不常用的方式,如动态原型,寄生构造函数,稳妥原创 2021-11-06 00:31:13 · 1013 阅读 · 0 评论 -
JavaScript入门基础
完整的Javascript语言由三部分组成:核心(ECMAScript) 文档对象模型(DOM,Document Object Model) 浏览器对象模型(BOM,Browser Object Model)为什么学习Javascript:所有主流浏览器都支持Javascript 目前,全世界大部分网页都是用Javascript 它可以让网页呈现各种动态效果 作为Web开发工程师,如果你想提供漂亮的网页,另用户满意的上网体验,Javascript是必不可少的工具浏览器内核浏览器内核原创 2021-10-12 21:08:32 · 76 阅读 · 0 评论