![](https://img-blog.csdnimg.cn/d43612809b6d44b186549ca47919519e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 68
JS相关知识点
会飞的战斗鸡
专注前端领域开发~
展开
-
前端drag api课程表demo
【代码】前端drag api课程表demo。原创 2023-10-30 22:53:51 · 220 阅读 · 0 评论 -
JavaScript实现观察者模式和发布订阅模式
观察者创建一个函数来等待被触发,主题创建一个函数用来改变状态,状态一改变就遍历每个观察者执行里面的响应函数。主题创建一个数组来存放观察者。订阅用on,发布用emit。原创 2023-02-03 11:30:36 · 211 阅读 · 0 评论 -
JavaScript字符串常用方法
【代码】JavaScript字符串常用方法。原创 2023-02-03 11:10:44 · 218 阅读 · 0 评论 -
JavaScript两数之和
Set是一种叫做集合的数据结构,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。,或者直接初始化一个空Map。是一组键值对的结构,具有极快的查找速度。,或者直接创建一个空Set。原创 2023-02-03 10:08:36 · 516 阅读 · 1 评论 -
Vue源码分析(状态管理&&路由)
以前前端是通过MVC模式管理代码,但后来我们使用例如Vue、React、Angular这类通过声明式开发的框架,发现状态很难管理,容易出现状态被任意修改。在vue中我们经常会使用到路由,路由有hash和history两种模式,二者的实现思路基本相同,为了简便,我们以hash模式为例。监听路由变化的事件,修改data中的url,再通过动态组件变化,这样就实现了一个最基本的路由。,监听路由变化并修改vue实例中的url,使用计算属性得出当前的组件名,再动态显示。Vue2的状态管理使用的是。原创 2022-10-04 20:27:22 · 589 阅读 · 0 评论 -
前端同源策略和跨域详解
webcoket作为一种常用于实时聊天的协议,本身就不存在跨域问题,利用websocket的api创建一个socket实例,利用open方法向后台发送数据,利用message方法接收后台的数据。因为浏览器同源策略只针对于ajax,并不限制服务器之间的通信传输,我们在客户端和服务器中间使用一个代理服务器,代理服务器和客户端同源,代理服务器和服务器进行数据交互,这样就实现了跨域。等标签不受浏览器同源策略的影响,可以通过src属性,请求非同源的js脚本。上面的配置是最基础的,实际项目中我们还有更加细化的配置。原创 2022-09-24 00:48:15 · 1385 阅读 · 0 评论 -
vue3+ts封装table组件并注册发布
操作项大部分table都具有button用于编辑删除等操作,我们在传入options的中定义操作项的action为true,因为操作的特殊性,我们选择单独编写,所以要先处理传入的数据,将操作项与数据部分分离// 传入options的数据 let options : TableOptions [ ] = [ {............原创 2022-08-28 21:37:02 · 2549 阅读 · 0 评论 -
vue2添加(修改)数据后需要刷新才能显示的问题
vue2无法对于对象进行深度监听,因此直接点击后数据无法立刻进行响应式变化,需要手动刷新。此时我们可以采用,watch深度监听这个数据,监听到这个数据变化后,再发起一次请求拿回数据原创 2022-06-30 23:04:16 · 2584 阅读 · 0 评论 -
JS中的树(含leetcode例题)<持续更新~>
数组链表哈希表树:树结构综合了上面的部分优点,每种树结构都有自己独特的应用场景。只记录左儿子和右兄弟将左儿子和右兄弟作为父节点的二叉,所以二叉树能够模拟所有的树除了最下一层叶子节点外,每层节点都有两个子节点除了最下一层叶子节点外,每层节点都有两个子节点最下一层叶子节点从左向右连续存在,只缺右侧若干节点满二叉树是特殊的完全二叉树用数组表示非完全二叉树时,空着的节点也要占位,会造成空间浪费,所以一般我们采用链表的方式满足条件:当我们进行搜索的时候,如果节点大于搜索值,就向左边继续查找;节点小于搜索值,就向右边继原创 2022-06-16 12:09:34 · 317 阅读 · 0 评论 -
JS中的字符串(含leetcode例题)<持续更新~>
H5使用str[index]即可和出现次数有关的,不要犹豫,hash383. 赎金信和上道题目基本相同原创 2022-06-12 11:09:33 · 117 阅读 · 0 评论 -
TypeScript类型声明文件(三)
项目中的TS最终都会编译成JS,那我们在使用外部的三方库时,如何使用TS语法呢。类型声明文件:用来为已存在的JS库提供类型信息如果要为JS库提供类型信息,就要用到.d.ts文件windows系统按ctrl键点击内置API即可打开文件在TypeScript官网搜索下载即可如果多个ts文件都用到同一类型,可以创建.d.ts文件提供该类型,实现类型共享在导入一个js文件时,TS会自动加载于js文件同名的.d.ts文件使用declare关键字:用于类型声明,为js文件中已存在的变量声明类型,而不是创建一个新的变量原创 2022-06-09 16:42:58 · 325 阅读 · 0 评论 -
TypeScript高级类型(二)
构造函数实例方法实现接口修饰符public(公有):默认,可以被任何地方访问protected(受保护):仅在对其声明所在类和子类中(非实例对象)可见private(私有的):只在当前类中可见(实例对象和子类都不可见)readonly(只读修饰符):防止在构造函数之外对属性进行赋值;只能修饰属性,不能修饰方法注意:readonly和const的意思一样,都是不能修改,所以它和const一样,如果直接赋初值(不指定类型),数据类型就会变成字面量同样,readonly也可以原创 2022-06-08 19:15:07 · 771 阅读 · 0 评论 -
JS中的数组(含leetcode例题)<持续更新~>
JavaScript中已经为我们封装好了较为完善的数组(自动扩容,允许存放不同类型的数据)数组中间插入和删除性能较低,但是查找速度快(下标查找)查询方法名说明返回值indexOf(参数)从前向后找,只找一个第一个满足条件的索引号,不存在返回-1lastIndexOf(参数)从后向前找,只找一个第一个满足条件的索引号,不存在返回-1includes(参数,开始位置)查找是否存在true/false连接、截取、过滤、更新方法名说明返回值原创 2022-06-05 19:31:45 · 318 阅读 · 0 评论 -
JS中的栈(含leetcode例题)<持续更新~>
先进后出基于链表实现待补充155.最小栈232.用两个栈实现队列当然,这种方式复杂度太高,需要优化原创 2022-06-04 18:53:46 · 236 阅读 · 0 评论 -
JavaScript数组常用方法及其特性
JavaScript中已经为我们封装好了较为完善的数组(自动扩容,允许存放不同类型的数据)数组中间插入和删除性能较低,但是查找速度快(下标查找)查询方法名说明返回值indexOf(参数)从前向后找,只找一个第一个满足条件的索引号,不存在返回-1lastIndexOf(参数)从后向前找,只找一个第一个满足条件的索引号,不存在返回-1includes(参数,开始位置)查找是否存在true/false连接、截取、过滤、更新方法名说明返回值原创 2022-06-04 11:28:24 · 132 阅读 · 0 评论 -
Vue3为什么要用Proxy替代defineProperty
文章目录Vue3为什么要用Proxy替代defineProperty先导知识:Object.defineProperty()和ProxyObject.defineProperty()ProxyObject.defineProperty与Proxy区别ES5中,通过defineProperty()的set进行监听ES6中,通过Proxy实现为什么要替代替代defineProperty只能对单例属性做监听Proxy代理对象响应式是懒惰的Vue3为什么要用Proxy替代defineProperty先导知识:O原创 2022-05-10 23:56:49 · 439 阅读 · 0 评论 -
DOM常用API
文章目录DOMAPI节点查询型api节点关系型api父关系子关系兄弟关系节点创建型api页面修改型api增加节点删除节点替换节点元素属性api获取属性值设置属性值移除属性值DOMAPI节点查询型apidocument.getElementById();// 根据id获取元素let parent = document.getElementById('parent')document.getElementByTagName();// 根据标签名获取元素let divs = docume原创 2022-05-09 15:40:42 · 397 阅读 · 0 评论 -
手撕promise--promise的底层实现<究极详细>
文章目录手撕promisepromise有三种状态创建初始结构修改this指向接下来实现.then解决异常异常一异常二实现异步实现链式最终代码手撕promisepromise有三种状态创建初始结构// 初始结构class Commitment { static PENDING='待定';static FULFILLED='成功';static REJECT='拒绝'; constructor(func){ // status状态 this.status = Commitm原创 2022-05-08 20:06:27 · 756 阅读 · 1 评论 -
JS数组、字符串、数字的相互转化
文章目录JS数组、字符串、数字的相互转化数组转字符串字符串转数组字符串转数字数字转字符串数组转数字数组数字转数组JS数组、字符串、数字的相互转化数组转字符串方法名说明返回值toString()把数组转换为字符串,逗号分隔每一项返回一个字符串join(‘分隔符’)把数组中所有元素转换为一个字符串返回一个字符串字符串转数组方法名说明返回值split()split(separator, limit),separator可选,字符串或正则表达原创 2022-05-08 15:42:05 · 846 阅读 · 0 评论 -
闭包原理及使用场景
闭包闭包指有权访问另一个函数作用域中变量的函数。函数套函数,内部函数访问外部函数变量,必须return,从而避免了变量被销毁 //这个例子中,闭包就是fn()函数 function fn(){ var num=1; function fun(){ console.log(num); } return fun; }闭包demo点击小li输出索引传统操作 //1.利用动态添加属性的方式 var原创 2022-05-07 19:36:46 · 899 阅读 · 0 评论 -
JS的数据类型以及判断类型<含ES6新增>
JS的数据类型以及判断类型JS的数据类型ES5基本数据类型Number:数字String:字符串Boolean:布尔null:空undefined:未定义引用数据类型objectfunctionarray内置对象ES6新增基本数据类型Symbol:唯一标识(内置对象)BigInt:比Number数据类型支持的范围更大的整数值(内置对象)JS判断数据类型typeof基本数据类型除了null外都返回对应类型的字符串(NaN返回number原创 2022-05-07 18:43:07 · 329 阅读 · 0 评论 -
setTimeout和setInterval区别,用setTimeout实现setInterval
setTimeout和setInterval区别setTimeout(function,time)指延迟指定时间后调用函数,调用次数仅一次;setInterval(function,time)每隔指定的时间就调用函数,可多次重复调用用setTimeout实现setInterval function setTimeToInterval(fn,times){ if(!times) return setTimeout(()=>{ fn()原创 2022-05-06 18:12:43 · 168 阅读 · 0 评论 -
JS监听对象属性<ES5和ES6详解>
文章目录JS监听对象属性Object.defineProperty()ProxyObject.defineProperty与Proxy区别ES5中,通过defineProperty()的set进行监听ES6中,通过Proxy实现JS监听对象属性在这之前,先了解以下稍后要用到的知识Object.defineProperty()// Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象Object.defineProperty原创 2022-05-06 15:55:05 · 1797 阅读 · 0 评论 -
Ajax基础和封装Ajax<详细解析>
文章目录Ajax基础和封装AjaxAjax基础XMLHttpRequestxhr对象的readyState属性使用xhr发起GET请求使用xhr发起POST请求Ajax数据处理JSONJSON和转JS对象JS对象转JSONAjax的简单封装Ajax基于promise封装Ajax基础和封装AjaxAjax基础XMLHttpRequest简称xhr,是浏览器提供的javascript对象,通过他可以请求服务器上的数据资源。xhr对象的readyState属性用来表示当前ajax请求所处的状态,每个a原创 2022-05-05 20:54:52 · 511 阅读 · 0 评论 -
深拷贝和浅拷贝
深浅拷贝 var obj ={ id:1, name:'mkbird', msg:{ age:18 }, fn:function(){ console.log('123'); } }浅拷贝浅拷贝只拷贝一层,更深层次对象级别的只拷贝引用(即地址) // 浅拷贝(方法一) // 使用es6新增语法糖Object.assign(newObj,old0bj) const n原创 2022-05-05 16:22:41 · 461 阅读 · 0 评论 -
JS防抖和节流
JS防抖和节流概念解析这里先抛出防抖和节流的概念防抖:在指定时间内触发,则重新计算时间(回城),即只使用最后一次的节流:在指定时间内,只响应第一次(技能CD),即只使用第一次的应用场景防抖搜索联想时,用户不断输入,使用防抖节省资源用户滚动事件,我们希望当界面停下来时才进行一些操作节流鼠标不断点击触发某事件,只在单位时间触发一次懒加载要监听计算滚动条的位置,但是不必每此滚动都触发,降低计算频率实现防抖防抖在于每次触发前都清除一次定时器,再赋一个新的定原创 2022-05-04 20:04:21 · 366 阅读 · 0 评论 -
js异步加载<面试常考>
js异步加载输入url后发生了什么在讲解异步加载之前,我们先要了解,当我们将url输入后,页面发生了什么。找ip输入url找缓存(浏览器->系统->路由器->hosts文件)缓存中没有则DNS解析得到ip发请求构造http请求封装在tcp包网络传输(传输层、网络层、数据链路层、物理层)服务器构建页面服务器返回数据构建DOM,过程中遇到JS脚本优先JS脚本构建CSSOMCSSOM和DOM合并渲染布局渲染页面同步加载平常编写代码时,转载 2022-05-04 18:09:14 · 83 阅读 · 0 评论 -
this的指向以及修改this指向
文章目录this指向this的基本指向this指向被改变的情况箭头函数中的thisthis指向this的基本指向调用方式this指向普通函数调用window构造函数调用实例对象 原型对象里的方法也指向实例对象对象方法调用该方法所属对象事件绑定方法绑定事件对象定时器函数window立即执行函数window总结来说:除了定时器、普通函数和立即执行函数this指向为window,其他都指向调用者this指向被改变的情况call():调原创 2022-05-04 17:22:48 · 665 阅读 · 0 评论 -
new操作符做了哪些事情
new操作符做了哪些事情new一个类或构造函数可以在内存中创建一个空对象this会指向刚才创建的空对象,空对象的__proto__指向构造函数的prototype执行构造函数里的代码,给空对象添加属性和方法返回这个对象对于上面用词不理解的可以查看ES5和ES6类的创建与继承–含原型和原型链...原创 2022-05-04 12:55:52 · 110 阅读 · 0 评论 -
图片预加载和懒加载的多种方法
图片预加载和懒加载图片懒加载在渲染页面的时候,先将图片用一张默认图片代替,当图片到达浏览器可视区域时,才显示真实的图片。这样的好处是,可以减缓服务器负担,加快初始界面的渲染速度。实现方式:使用setTimeOut或setInterval定时器进行延迟加载条件加载,符合条件或触发事件后再进行异步下载通过滚动条监听用户距图片距离,快要到达之前进行加载// 通过滚动条监听用户距图片距离,到达进行加载 let img = document.querySelector('img')原创 2022-05-04 12:13:19 · 1596 阅读 · 0 评论 -
事件:事件流、事件对象、事件委托、如何先冒泡后捕获
文章目录事件事件流事件对象事件委托(代理、委派)事件事件流事件流描述的是页面接收事件的顺序(比如点击)可以理解为向水底扔了石头,石头向下为捕获阶段,向上冒泡为冒泡阶段,同理鼠标点击后DOM先向下捕获这次点击事前,捕获后再向上冒泡,中间经过的对应事件处理函数都会被触发实际开发过程都用冒泡,即没有参数有些事件没有冒泡,如onblur,onfocus,onmouseenter,onmouseleave事件冒泡有时会带来麻烦,比如给son和father添加点击事件,点击son,会先弹出son,再弹原创 2022-05-03 23:32:45 · 393 阅读 · 0 评论 -
JS的函数
文章目录函数函数声明函数调用参数形参实参返回值break、continue、return区别arguments的使用函数调用函数封装了一段可以被重复使用的代码块函数声明函数关键字自定义(命名函数)function 函数名(){ //函数体}函数表达式(匿名函数)var 变量名 = function() {};注意:是变量,存的是值函数调用函数名();变量名();参数形参声明时为形参实参调用时为实参js较为自由,如果实参比形参多,则会取实参的个数,比形参少原创 2021-07-26 22:59:12 · 44 阅读 · 0 评论 -
什么是回调地狱,如何用Promise解决回调地狱<附:Promise.then的第二个参数和catch的区别>
文章目录解决异步回调地狱同步(单)和异步(多)回调地狱Promise基本概念promise实现图片异步加载用Promise时的注意事项使用async和await解决回调地狱解决异步回调地狱同步(单)和异步(多)同步任务:都在主线程上执行,形成一个主线程执行栈异步任务:通过回调函数实现,主要有以下三种普通事件,click、resize等资源加载,load、error等定时器,setInterval、setTimeout等异步任务相关回调函数添加到**任务队列(消息队列)**中回调地原创 2022-05-03 19:00:01 · 587 阅读 · 2 评论 -
ES5和ES6类的创建与继承--含原型和原型链
文章目录通过类的创建与继承解读原型和原型链ES5构造函数的创建与实例化对象constructor构造函数的继承与原型链继承原型对象es6类的创建类的继承通过类的创建与继承解读原型和原型链在开始之前,先和大家说明es5中的类用的是构造函数,es6才有了类(本质还是构造函数)类创建的实例有两种属性,一种是实例自身的,一种是公共的(公共的存在原型对象中)ES5es5中构造函数就是类,所以下文可能会出现两种称呼,我们知道是一个东西就好构造函数的创建与实例化对象// 类中创建的实例有两种属性,一种是实原创 2022-05-03 01:24:36 · 447 阅读 · 0 评论