![](https://img-blog.csdnimg.cn/20200720154057491.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
js知识库
文章平均质量分 71
收集自我认为所有重要,冷门,实用的js知识
kaiqisan
新人社畜,前端开发正式员工,自学前端相关知识,有数个项目的开发经验,整过网页,也搞过小程序。了解后端一点点,搭过简易服务器。英语六级低分过,日语n2水平,欢迎交流病情!
展开
-
JS 实现对象监听 - Kaiqisan
实现监听的底层原理,能够实现在数据修改的时候触发回调函数~原创 2022-06-23 16:47:16 · 3115 阅读 · 1 评论 -
常用的BOM属性 - Kaiqisan
location history navigitor BOM原创 2022-02-23 22:50:42 · 688 阅读 · 0 评论 -
ES6继承 - Kaiqisan
大家好,都吃晚饭了吗?我是Kaiqisan,是一个已经走出社恐的一般生徒今天学TS的时候顺便复习了ES6类的继承,咱来康康吧感觉没什么多说的,相信大家在学JS之前都一定学过java,这玩意和java的继承几乎一模一样JS继承有以下特点子类可以重写父类的方法(下面的idcard方法)我先在这里写一个父类class person { // 父类 constructor(name, age) { this.name = name this.age = age } i.原创 2021-01-04 21:59:57 · 111 阅读 · 0 评论 -
js ES6 class类 - Kaiqisan
大家好,都吃晚饭了吗?我是Kaiqisan,是一个已经走出社恐的一般生徒JS在ES6出了新的语法—类,可能是因为它之前太放荡了,导致不少问题,现在它终于有了一个面向对象的语法了。首先是对象,这是什么就不用多解释了,事物的抽象。直接开锤语法首先我们康康这是怎么写的class Demo { }它没有和java一样有代表权限的前缀。直截了当创建一个它的实例let a = new Demo()a使用let定义而不是Demo,因为js的若语言性,如果要追求极致的话建议学习Typescrip.原创 2021-01-03 14:25:01 · 128 阅读 · 0 评论 -
js ES7装饰器Decorator - Kaiqisan
大家好,都吃晚饭了吗?我是Kaiqisan,是一个已经走出社恐的一般生徒,第一次了解装饰器还是在使用reace-redux的时候,在听闻了它的大名之后我第二天就去学习了它,卧槽好难!我虽然讲得不好,但一定通俗下面贴一些专业的介绍装饰器的网站阮一峰ES6redream好了开始讲了~装饰器是一个和ES6语法 class一起配合使用的一个方法,它的提案经过了大幅修改,目前还没有定案,目前所有主流的浏览器都无法兼容这个语法,需要babel来解释 (babel7.x以上使用 @babel/plugi.原创 2020-12-26 17:33:05 · 218 阅读 · 0 评论 -
JS typeof与instanceof - Kaiqisan
typeof :由于js是弱类型的语言,在程序执行中,很容易就出现很多隐性的数据类型的变换,在有些时候,这些隐性的变换很容易就会造成一些不必要的困扰(比如在数据判断的时候使用 “===” 如果数据类型不匹配就是false,或者在和后端交互的时候,提交字符串的时候提交了数字就会造成后端的错误)它返回字符串let a = 100let b = '100'let c = falselet d = {}console.log(typeof a, typeof b, typeof c, typeof d)原创 2020-10-24 17:46:03 · 117 阅读 · 0 评论 -
JS call() apply() bind() - Kaiqisan
大家好,都吃了吗?我是Kaiqisan,是一个不善言辞的羞射男孩。由于在js中的this的应用比较迷惑,有些时候,我们使用this的时候会出现很多意外,今天这三个方法拯救你的所有迷惑。call(fun, arg1, arg2...),引用别的对象,动态修改this的指向。先简单看一个例子let demo1 = { name: 'Kaiqisan', uid: 10001, doSomething: function () { console.log(this.name, this..原创 2020-10-23 09:48:31 · 85 阅读 · 0 评论 -
JS查看当前页面的url信息 - Kaiqisan
大家好,都吃了吗,我是Kaiqisan,是一个不善言辞的羞射男孩,这次来盘点一下url各个部分的获取方法。虽然是一条网址,但是,有时候,我们只是需要网址的某一部分(协议信息,域名,路由,参数…),如果每一次都需要获取整条url,那么代码量就会直线上升。这次的核心内容是BOM里面的location对象现在以一个随意的网址为例来展开说明http://kaiqisanOffcial.com:666/login?a=1&b=10#mobile获取整个url信息http://kaiqisa..原创 2020-09-20 16:49:24 · 197 阅读 · 0 评论 -
JS 屏蔽鼠标中键默认事件 - Kaiqisan
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,这次讲讲鼠标中键的屏蔽事件,在目前的主流浏览器中,鼠标中键意味着打开自动滚轮模式,每次点击右键的时候,就开始事件冒泡,如果碰到第一个拥有滚轮的元素,就将自动滚动功能赋予当前元素,关于实现效果,自己可以在随意一个网页里尝试。(PS:如果当前没有一个元素拥有滚轮的话就不会触发这个默认滚动模式)其实屏蔽它很简单很简单window.onclick = fun1function fun1(e) { if (e.button =.原创 2020-09-04 12:06:04 · 927 阅读 · 0 评论 -
JS 取消右键默认事件 - Kaiqisan
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである。之前在vue项目里面看到了屏蔽右键默认方法的一个措施,就想着,原生的js也一定有这个方法可以自动屏蔽右键默认方法。结果真的有。简答针对某个元素区域的屏蔽let objDemo = document.getElementsByClassName('demo')[0]objDemo.oncontextmenu = (e) => { e.preventDefault()}全局屏蔽document.onconte.原创 2020-09-04 11:38:49 · 3464 阅读 · 0 评论 -
JS 阻止事件的冒泡 - Kaiqisan
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである.在以前,一直一件事情困扰着我,那就是我想要试图触发元素内部的点击事件的时候,总是会触发外部元素的点击事件,拦也拦不住,直到今天,我了解了事件冒泡,我才大彻大悟。简答function fun2(e) { e = e || window.event // window.event 用于兼容ie window.event ? e.cancelBubble = true : e.stopPropagation() consol.原创 2020-09-03 18:48:37 · 328 阅读 · 0 评论 -
JS 滚轮事件 onscroll - Kaiqisan
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである.在页面过于长的时候会产生滚轮,这一章要讲的就是滚轮事件。有些时候,我们在写一些事件的时候需要通过判断块边界(利用offsetTop,offsetLeft)来实现一定的效果(拖拽移动等),但是,如果网页中存在滚轮,那么在滚轮产生滚动的时候,边界的判断就会产生错误,用户体验会直线下降。于是这个滚轮事件就可以完美解决这个问题。获取一个滚轮事件非常简单。window.onscroll = () => { let a = d.原创 2020-09-03 18:04:48 · 671 阅读 · 1 评论 -
JS 键盘事件 - Kaiqisan
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 这次讲讲键盘事件,如有不足之处,欢迎指出!键盘事件一共有仨onkeydown: 键盘按下时触发,返回键盘的代码值(不区分大小写)onkeypress : 键盘按下触发,返回当前输入的ASCII码的值(区分大小写)onkeyup: 键盘抬起时触发,获取的内容与onkeydown一样。PS:需要注意的是onkeydown与onkeypress有着很大的一个区别就是onkeypress只能获取能获得输入的按键的编码,无法获取f1.原创 2020-08-28 16:40:20 · 385 阅读 · 0 评论 -
JS 点击某元素以外的地方触发事件 - Kaiqisan
JS 点击某元素以外的地方触发事件ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,在半年前让我十分头疼的问题,自从我开始正式学习event事件和DOM之后,我:就这?就这?解决这个问题的核心关键还是利用event对象现在有HTML代码如下<div style="width: 400px;height: 300px;border: 1px solid #000000; margin: 10% auto 0 auto; text-align: ce原创 2020-08-27 16:08:00 · 13251 阅读 · 9 评论 -
JS 获取鼠标的目前在浏览器的位置 - Kaiqisan
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天不找对象,不面向对象,今天面向消息讲一讲和event有关的知识。方法1—直接注册首先,需要注册一个监听方法let a = document.getElementsByTagName('body')[0]a.onmousemove = (e) => { console.log(e);}这样直接监听获取全部的鼠标信息,然后开始获取我们想要的东西let a = document.getElementsByT.原创 2020-08-27 14:06:25 · 536 阅读 · 0 评论 -
JS Date比较时间的先后 - Kaiqisan
JS 比较时间的先后ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである ,这里没什么好讲的,直接上方法!time1 - time2: 这个是核心方法,前面的时间靠后的话计算结果就大于0,反之就小于0。let nowTime = new Date()let demoTime = new Date('2018-10-18 12:10:10')function compareTime(time, compareTime) { console.log(time - compa原创 2020-08-26 14:57:41 · 1890 阅读 · 0 评论 -
JS date日期对象加减计算天数 - Kaiqisan
JS 日期加减计算天数ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,接上节的内容,这次讲讲如何对时间对象内容进行修改网上已经有铺天盖地的方法,今天给大伙手写一个不一样的方法!这次的方法的主基调是利用Date.parse来生成当前时间距离1970年1月1日0时0分0秒的距离(单位:毫秒),然后获取两个时间距离这个初始时间的绝对距离来计算两个时间的相对距离(单位是毫秒),拿到了时间差之后,后面的事情就很轻松了。(当然这一切都建立在js Date对象上,如果没有Date对象的话一定原创 2020-08-26 14:40:13 · 1003 阅读 · 0 评论 -
JS Date()对象介绍 - Kaiqisan
JS Date()对象介绍ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 之前一直在为Date对象困扰,我对它的状态一直处于半懂不懂的状态,就是大致清楚,但是经常会面向百度编程。没错,这篇博客又是为了加深印象而写的。一种特殊的对象,可以用来表示时间。let date = new Date()这样就可以获取当前的日期,返回一个对象console.log(typeof date) // object虽然它在显示上容易让人误解为是一个字符串就是了Wed Aug 26原创 2020-08-26 13:50:06 · 160 阅读 · 0 评论 -
js dom focus() blur() onfocus onblur - Kaiqisan
js dom focus() blur() onfocus onblurヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天没有开场白,乏了乏了,直接进入正题。focus(): 给支持被聚焦的元素获取焦点(button / input / select / a /area/ textarea/frame/option)或者设置了contenteditable = "true"的不支持聚焦的元素(PS:这个谨慎使用,一旦使用,可以可视化操作当前html元素内容和位置,一顿胡乱操作原创 2020-08-25 15:40:25 · 599 阅读 · 0 评论 -
JS DOM innerHTML outerHTML - Kaiqisan
JS DOM innerHTML outerHTMLヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天没有开场白,直接进入主题。这个还是很好理解的innerHTML获取或设置当前节点内部的所有内容<div claas="demo"> <p>apppp</p></div>let a = document.getElementsByClassName('demo')[0]console.log(a.innerHTM原创 2020-08-25 00:30:49 · 206 阅读 · 0 评论 -
JS数组方法 flat(),flatMap() - Kaiqisan
JS数组方法 flat(),flatMap()ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである。这一节是我最后的一个数组方法的专题,是之前的遗漏的东西,今天把它彻底讲完,然后皆大欢喜。flat(val):高维数组降维操作,它不会修改原数组的,会有返回值,需要参数来接收,内有参数val,代表需要下降的维数,例如val=3,Arr数组维数为5那么,这个操作就会使五维数组降到二维数组,如果val值过大,也不会报错,最多降到一维数组之后就不会再进行操作。val值可选,如果不填,就是默认值原创 2020-08-22 15:50:35 · 5306 阅读 · 3 评论 -
js扩展运算符 - Kaiqisan
js扩展运算符ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,这次还是继续来讲讲ES6的其他知识吧!使用方法上面提到的剩余参数把多个数据整合成一个数组,而扩展运算符把一个可遍历对象的每个元素扩展成一个新的参数序列。下面是以前的老方法const name = ["kaiqisan", "jaon", "lio"]const name2 = ["geory", "fans", "dioda"]let member = name.concat()//最后打印输出membe原创 2020-08-21 17:08:00 · 161 阅读 · 0 评论 -
JS使用axios取消请求 - Kaiqisan
JS使用axios取消请求ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,这一次也是直面项目上遇到的问题,这次内容有点多,如果您只是想复制代码的话,我做个目录,直接跳到目录找代码即可。文章目录JS使用axios取消请求官网写的取消法取消方法2更加高度的封装,使用axios.create之后的取消方法总结前端单方面违约取消请求,所以,这里的代码只有前端的事情。官网写的取消法/* a.js */import axios from 'axios'let CancelTo原创 2020-08-20 17:06:10 · 866 阅读 · 0 评论 -
js Console 对象 - Kaiqisan
js Console 对象ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 昨天在玩webstorm的时候,在输入console.之后,它自动弹出很多其他方法,抱着好奇的心态,我查了一些资料,发现了新大陆~Console 对象提供了访问浏览器调试模式的信息到控制台。方法描述assert()如果断言为 false,则在信息到控制台输出错误信息。clear()清除控制台上的信息。count()记录 count() 调用次数,一般用于计数。原创 2020-08-19 15:54:36 · 148 阅读 · 0 评论 -
JS 带token的且不跳转页面的下载文件方式 - Kaiqisan
JS 下载文件的方式ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,做项目的时候,碰到了一些私密文件的下载需要事先上传用户token凭证,所以这导致无法直接使用a标签添加地址直接从后端获取数据,所以,今天打算放下封装好的方法,从头开始。针对下载需要使用token验证身份的时候使用。现在以axios为例来说明方式/* a.js */import axios from 'axios' // 其他导包方法详见官网axios({ methods: 'get', //原创 2020-08-19 14:05:06 · 1383 阅读 · 1 评论 -
使用JS代码增删节点改节点信息 - Kaiqisan
使用JS代码增删节点改节点信息ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,这个问题是爷刚学DOM的时候最纠结的问题,现在一年过去了,对这个知识点还是半懂不懂的,是时候要给个了结了。document.createElement(tag) 创建一个Node对象,为添加节点做准备。let a = document.createElement('a')console.log(a.__proto__) // 打开原型链可查看其所有属性和方法此时只执行这一步还不足以在HTML代原创 2020-08-18 15:54:12 · 230 阅读 · 0 评论 -
JS 连续发送多个请求 Promise.all() Promise.race() - Kaiqisan
**JS 连续发送多个请求 Promise.all() Promise.race() **ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,昨天在写项目的时候遇到一个问题,就是在批量删除文件的时候会弹出很多的提示框,待我查看代码之后,才发现是因为这批量删除操作是通过迭代循环并多次走的请求路由导致的,每删除一个文件就弹出一个 “删除成功”,这样会导致用户体验很差。本来想找后端的人沟通一下,麻烦再写一个批量删除的路由,但是,我没有这么做,我接这个项目的目的就是为了学习的,又想到自己对异步原创 2020-08-18 13:51:36 · 3381 阅读 · 0 评论 -
JS DOM 获取兄弟节点 previousSibling previousElementSibling nextSibling nextElementSibling - Kaiqisan
JS DOM previousSibling previousElementSibling nextSibling nextElementSiblingヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 这一次脱离父子关系,讲讲兄弟关系(杠精:为什么不是姐妹,气抖冷!…(略1000字))previousSibling :获取它的上一个兄弟节点的信息,如果没有的话就返回nullpreviousElementSibling: 获取它的上一个(非文本节点非注释节点的)兄弟节点的信息,原创 2020-08-17 15:03:31 · 638 阅读 · 0 评论 -
JS DOM 第一个子节点,最后一个子节点 firstChild lastChild firstElementChild lastElementChild - Kaiqisan
JS DOM firstChild lastChild firstElementChild lastElementChildヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,这次讲的四个方法还是比较简单的,而且也很实用,也希望大家能够看完之后马上记住这些方法。firstChild: 获取当前节点的第一个子节点,它等同于Obj.childNodes[0]所以它的过程是获取当前节点到所有的子节点,然后取第一个节点返回firstElementChild: 获取当前节点的第一个(原创 2020-08-17 14:29:31 · 1494 阅读 · 0 评论 -
js DOM parentElement parentNode - Kaiqisan
js DOM parentElement parentNodeヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,这篇文章不完全算是我的原创文章,有相当一部分是从别的网站借鉴来的,我也没想到表面看上去这样一个简单的问题深究起来会这么复杂。parentElement: 获取当前元素的父对象的所有信息<ul class="list"> <li> 标题 <div class="demo2">???????????????????原创 2020-08-16 13:24:29 · 693 阅读 · 0 评论 -
JS DOM childNodes 和 children - Kaiqisan
JS DOM childNodes 和 childrenヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 今天开一个新坑,开始讲DOM的知识点,也顺便复习复习以前所学的知识,毕竟,在我刚接触js的时候,学得最早的就是DOM,忘得最多的也是DOM。ele.childNodes: 获取当前节点的所有的孩子节点的信息(如果不了解树结构的可以这么理解----获取当前标签层次的下面一层标签和文本的所有信息。)就举这样的例子吧<ul class="list"> <l原创 2020-08-16 12:00:52 · 366 阅读 · 1 评论 -
js ES6新数据类型 Symbol - Kaiqisan
js ES6新数据类型 Symbolヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,这一篇文章又是全新的内容,咱来聊聊ES6的新数据类型Symbol这个是es6推出的继 undefined null boolean number string object后推出的新的数据类型在输入数据的时候,尤其是学生或者用户管理的时候,我们不可避免会遇到同名的情况,如果按照以前的写法的话,后面的重名参数会覆盖前面的重名参数,会造成不必要的麻烦。const list [ 'kaiqisa原创 2020-08-15 17:29:37 · 163 阅读 · 0 评论 -
vue Element-UI message或this.$message 主动关闭 - Kaiqisan
vue element-ui message或this.$message 主动关闭ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 在我实际的项目过程中,赶巧不巧碰到服务器特别迟缓的时候,有时候在向后端请求信息的时候,会卡顿特别久才能弹出“提交成功”,在提交成功弹出之前,页面就一直僵持在那里,这对用户非常不友好,于是,借此机会,我打算增加一个加载中动画效果。于是,我打算使用element-ui 的 message 功能模块来做一个“加载中”效果,提示用户的信息正在提交中。简答原创 2020-08-15 12:03:28 · 13573 阅读 · 6 评论 -
js字符串重复 repeat() - Kaiqisan
js字符串重复 repeat()把这个方法单独拎出来就是因为没有什么方法还有比它更加特殊了。str.repeat(n)重复字符串n遍,括号内填重复的遍数const laugh = "我笑得满地找头"const sentence = `${"哈".repeat(8)},${laugh},${"哈".repeat(7)}`//输出为 哈哈哈哈哈哈哈哈,我笑得满地找头,哈哈哈哈哈哈哈emm找不到什么这个方法的正经的用途,大家看情况使用吧。...原创 2020-08-14 16:13:32 · 396 阅读 · 0 评论 -
JS字符串判断 startsWith() endsWith() - Kaiqisan
JS字符串判断 startsWith() endsWith()ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 耽搁许久,今天重新回来讲讲数组字符串的一些方法。好巧不巧,这还是一个ES6的方法。startsWith(val, num) 判断字符串是否以XXX开头,它有俩参数,第一个是判断的参考字符串,第二个是判断开始的下标,默认为0。它有返回值,如果符合条件就返回true,反之就返回falselet str = 'append'let flag = str.startsWi原创 2020-08-14 13:13:01 · 1331 阅读 · 0 评论 -
js使用变量作为对象的属性名 - Kaiqisan
js使用变量作为对象的属性名ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 上一篇文章刚好讲了Map对象,它有一个特征就是可以使用参数决定它的属性值(“键"或者可以叫做每一个成员的第一个值),于是,我想起之前纠结的一个问题,就是动态命名一个对象属性的问题,虽然可以使用if–else判断的方法来取用不同的属性值,但是我觉得这样不方便,想要找个动态命名属性名的方法,但是好巧不巧,这个方法JS刚好有!不多废话,直接介绍方法,一共有两个使用中括号 [val]使用场景1let原创 2020-08-13 16:28:27 · 11250 阅读 · 0 评论 -
js ES6新数据结构 Map - Kaiqisan
js ES6新数据结构 Mapヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,在ES6中同时出现了 Set和Map这两种新的对象,人们总是把它们放在一起说明,仿佛它们就是天生一对,但其实他们俩虽然看起来有点不同,但是深究起来发现,其实,嘛!共同点还是挺多的。Map是一种新的数据结构,是一种全新的键值对的储存方式下面为定义一个Map类型的数据集合的方式let mapList = new Map([['name', 'tom'], ['uid', 1001]])console原创 2020-08-13 15:17:46 · 177 阅读 · 0 评论 -
js ES6新数据结构 Set - Kaiqisan
js ES6新数据结构 Setヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである.说到集合,我们应该很熟悉,毕竟这个是咱高中第一节数学课的知识。集合有一个特点就是没有重复值,这也是今天讲的Set数据结构的最大的特点。和数组类似的一种数据结构,它的一个特点就是所有的元素没有重复let setList = new Set([1, 2, 2, 3, 4, 3, 5])console.log(setList)// 结果为 {1, 2, 3, 4, 5}console.log(Arr原创 2020-08-12 15:51:13 · 124 阅读 · 0 评论 -
解决了群友的js的问题 (! + [] + [] + ![]).length = 9 的验证 - Kaiqisan
解决了群友的问题 (! + [] + [] + ![]).lengthヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 今天在群里看到这样一个问题,(! + [] + [] + ![]).length = 9 但是我一直想不明白为什么会这样,于是,带着好奇心一边查百度一边自己测试,现在,终于是搞懂了,现在想分享给大伙看一看!前排提示:JS这个语言是弱类型的一个语言,所以,在实际的一些运算里面,隐式的数据类型转化非常频繁下面先直接展示运算过程,然后开始解析! + [] +原创 2020-08-11 17:35:21 · 486 阅读 · 0 评论 -
js Array.from() 和 Array.of() - Kaiqisan
js Array.from() 和 Array.of()ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである。数组在本质上来说是对象,这次主要来讲讲一个ES6新方法,把特定对象转化为数组。Array.from(obj, callback, thisArg) 把一个可以遍历的对象(内部有Symbol.iterator迭代器)转化为真正的数组。第一个参数传入需要转化为数组的对象,第二个是回调函数,该对象被转化为数组之后还需要做什么处理的时候写上,本质上这个回调函数就是map方法,第三原创 2020-08-11 16:57:52 · 569 阅读 · 0 评论