![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Javascript
Javascript
龙易安
这个作者很懒,什么都没留下…
展开
-
使用addEventListener绑定事件并传参
1、问题的由来使用addEventListener 绑定事件时,如果同时想传参,一般可使用匿名函数绑定事件。但是这样做的问题时,匿名函数将不能解绑事件。所以如何做到又能传参,又能解绑事件呢?2、使用bind解决var btn1 = document.getElementById('btn1');var btn2 = document.getElementById('btn2'); function fa(e) { console.log('传递参数',e)原创 2022-03-28 16:49:22 · 6499 阅读 · 1 评论 -
isNaN的各种结果
isNaN(‘abc’)true原创 2021-12-16 15:32:27 · 3582 阅读 · 0 评论 -
子组件引入的js文件的两个问题
子组件中通过import引入的js文件,会在创建子组件的vue实例前就会被执行,所以会先于父组件中的钩子先执行。另:在两个组件中都引入了同一个js文件,此js文件中都做了打印;那么最终只会打印一次。...原创 2021-10-19 08:48:54 · 450 阅读 · 0 评论 -
使用Promise封装的请求方法
export function fake(n) { return new Promise((resolve, reject) => { setTimeout(() => { if (n === 0) { reject('error') } else { resolve(n) } }, 2000) }).catch(原创 2021-09-06 09:04:24 · 238 阅读 · 0 评论 -
Promise.reject的一个用法
//请求前拦截器service.interceptors.request.use( config => { // 请求前需要设置header之类在此设置 if (service.showLoading) { showFullScreenLoading() } config.headers['X-Requested-With'] = 'XMLHttpRequest' config.heade原创 2021-08-25 15:11:13 · 3482 阅读 · 0 评论 -
Promise的then、catch、finally、async、await
对于Promise一直使用async、await,而对它的then、catch、finally这三个方法都快忘了怎么用了。then接收两个方法作为参数,第一个参数是成功的回调,第二个参数是失败的回调。catch相当于 then(undefined, onRejected)catch方法拥有一个参数finallyfinally 方法用来指定在 promise 结束时,无论结果是 fulfilled 或者是 rejected,都会执行的回调函数finally 方法的回调函数不接受任何参数原创 2021-08-25 10:05:19 · 3800 阅读 · 0 评论 -
时间格式化函数
第一个参数date为时间对象或时间数值;第二个参数为格式字符串,默认为’yyyy-MM-dd hh:mmm:ss’,除了yyyy、MM等这些字符,其它的字符可随意替换。 function DateFormat (date, fmt='yyyy-MM-dd hh:mmm:ss') { if(!(date instanceof Date)){ date=Number(date); if(!isNaN(date)){ date=new Date(date原创 2021-08-17 09:52:55 · 508 阅读 · 0 评论 -
Uint8Array转普通数组
1、定义根据文档的解释:Uint8Array 数组类型表示一个8位无符号整型数组,创建时内容被初始化为0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素2、在JS中遇到Uint8Array 的场景js调用动态库,动态库由c语言编写,并且里面的方法使用了指针、int、double等js所没有的概念。那么在使用动态库时,需要使用ref、ref-array等库来进行转换。例如使用一个double类型数组的指针var doubleArray = refArray(ref.types.原创 2021-08-12 09:47:05 · 3392 阅读 · 0 评论 -
使用计时器的注意点
1、计时器方法包括setTimeout和setInterval方法setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。setTimeout和setInterval都回将任务放到任务队列(属于宏任务);2、setInterval在vue组件中使用了setInterval,当组件被销毁后,s原创 2021-07-15 11:43:24 · 293 阅读 · 0 评论 -
宏任务和微任务
一个生动的例子说明:银行柜台前排着一条队伍,都是存钱的人,存钱属于宏任务,这条队伍就是宏任务队列,当一个‘宏大爷’被叫到了自己的号码,就上前去–被处理,处理存钱业务时,‘宏大爷’突然想给自己的存款办个微理财(微任务),那么银行职员就将他的需求添加到自己的微任务队列,大爷就不用再排队了,直接在存钱宏任务进行完后就处理衍生出来的微任务理财,办理财时大爷又说办个信用卡,那就又排到微任务队列里。但要是在此次存钱时‘宏大爷’说他还要存钱,且是他老伴要存钱,也是宏任务,但不好意思,需要取号到宏任务队列的后面排队(这里原创 2021-07-12 16:06:18 · 68 阅读 · 0 评论 -
使用FileReader对象进行文件操作
FileReader对象,用于把文件读入内存,并且读取文件中的数据。 <input type="file" id="file" multiple> <!-- 添加multiple属性就可以提交多个文件 --> <input type="button" id="btn" value="提交"> btn.onclick = function () { var list = file.files;原创 2021-05-25 21:31:55 · 290 阅读 · 0 评论 -
DOM遍历
假设a为某DOM元素。1、获取父元素a.parentNode2、获取子节点1、childNodes、firstChild、lastChild获取的是子节点,不管是元素节点还是文本节点2、children、firstElementChild、lastElementChild获取的是子元素节点3、获取兄弟元素previousElementSibling、nextElementSibling...原创 2021-05-13 21:02:22 · 92 阅读 · 0 评论 -
getElementById的注意点
getElementById前面只能是document,而getElementsByClassName前面可以是其它的dom对象;getElementById不可以操作动态创建的DOM元素;原创 2021-05-13 20:45:11 · 221 阅读 · 1 评论 -
封装观察者模式Observer类
在Meteor项目中的观察者模式封装var _manager = {};var Observer = { regist: function (eventName, fn) { if (typeof _manager[eventName] === 'undefined') { _manager[eventName] = [fn]; } else { _manager[eventName].push(fn); } }, fire: function原创 2021-04-20 08:49:10 · 261 阅读 · 0 评论 -
cookie、localStorage和sessionStorage的区别
1、存储大小不同cookie存储大小不能超过4k;localStorage和sessionStorage存储大小能达到5M。2、数据有效期cookie可以设置过期时间sessionStorage在页面或浏览器关闭时就清除了;localStorage会一直存在,需要手动清除。3、作用域不同sessionStorage只在当前页面有效cookie和localStorage在不同页面也会存在4、webstorage支持事件的通知机制可以在更新数据时发送消息给事件监听者。5、与服务端通信c原创 2021-04-18 13:39:30 · 121 阅读 · 0 评论 -
解决跨域的方式
1、同源策略协议、域名、端口号一致就称为同源。同源策略是浏览器的一种安全策略。2、实现跨域的4种方式使协议、域名、端口号一致corsjsop代理这四种中只有第四种代理不需要后端参与,前端就能搞定。1、使用cors解决跨域有两种方式第一种,设置头文件信息app.all表示所有的请求,都会走这个中间件处理。app.all("*",function(req,res,next){ //设置允许跨域的域名,*代表允许任意域名跨域 res.header("Access-原创 2021-04-17 21:27:34 · 261 阅读 · 0 评论 -
proxy代理对象
var obj={ a:1, b:2 }const m=new Proxy(obj,{ get(target,key){ console.log(target,key) return target[key] }, set(target,key,val){ console.log(target,key,val) target[key]=val } })o原创 2021-04-17 18:44:27 · 895 阅读 · 0 评论 -
冒泡排序
简单的冒泡排序var arr=[3,5,1,9,53,2,8,23,67,12,65,34,89,23,98,34] function bubble(arr){ var len=arr.length; for(var i=0;i<len;i++){ for(var j=0;j<len-i-1;j++){ if(arr[j]>arr[j+1]){原创 2021-04-17 13:54:40 · 59 阅读 · 0 评论 -
实现继承的5种方式
1、借助callfunction Parent(){ this.name='parent' } function Child(){ Parent1.call(this) } var a=new Child();子类虽然能够拿到父类的属性值,但是,子类无法拿到父类中的方法。2、借助原型链 function Parent(){ this.name='parent' this.arr=[1,2,3] }原创 2021-04-17 13:30:11 · 457 阅读 · 0 评论 -
立即执行函数的this指向全局
var name='a' var obj={ name:'b', func:(function(){ console.log(this.name) })() }打印结果为a原创 2021-04-16 21:21:09 · 1064 阅读 · 0 评论 -
使用Plotly.js绘制图形
Plotly.js是一个绘图库,它有多种图表类型,包括 3D 图表,统计图表,和 SVG 地图,它具有较快快的性能。适合绘制数据量较大大的图形。而且它是免费的。在示波器显示项目中,前端不停地调用服务端的dll动态库后,向设备请求波形数据,波形数据返回回来之后再发给前端,然后需要将数据绘制成图形显示再屏幕上。波形数据的点数一般在2000-4000个点,我们使用Plotly.js来实现图形展示。1、安装npm install plotly.js-dist2、引入import Plotly from原创 2021-04-15 17:39:35 · 4832 阅读 · 1 评论 -
让事件在捕获阶段执行
让事件在捕获阶段执行,而不在冒泡阶段执行的使用场景原创 2021-04-15 15:31:54 · 987 阅读 · 0 评论 -
函数知识点补充及函数的吊装
函数知识点补充:函数的参数的默认值function fa(x=6){ console.log(x) }调用fa()时,本来需要传入一个参数,但没有传任何参数,此时上述函数就会使用参数的默认值。如果没有定义参数的默认值,也没有传参数,那么就是undefined。写在if语句中的函数声明,在预编译阶段不会被提到上面,要在if语句执行之后,才会把这个函数提到上面。所以要在if语句执行之后,调用这个函数才有用。在for语句中函数声明也是一样。函数内部没有使用var 定义变量x,原创 2021-04-15 12:06:14 · 104 阅读 · 0 评论 -
自定义事件
在nodeJS中有一个事件模块,可以在服务端创建自定义的事件,触发事件。在前端,js也提供了自定义事件功能,只是我们用的很少。1、自定义事件的创建2、监听自定义事件3、触发自定义事件原创 2021-04-15 11:18:02 · 88 阅读 · 0 评论 -
字符串方法
1、substring提取字符两个索引之间部分的字符串var a='abcdefg' var b=a.substring(2,a.length-1)提取从索引2开始(包括),到索引6(不包括)的字符串,所以返回"cdef"2、concat,将字符串拼接起来,一般直接用+号对字符串进行拼接。3、...原创 2021-04-14 22:00:13 · 633 阅读 · 0 评论 -
nextTick的原理
原创 2021-04-10 14:58:02 · 28811 阅读 · 3 评论 -
数组展平
数组展平地意思就是将形如[1,2,3,[4,5,[6,7],8,[9,10],11,12]]地数组变成一维数组。也叫数组扁平化。1、使用递归function flat(arr){ var res=[]; arr.forEach(item=>{ if(Array.isArray(item)){ res.push(...flat(item)) }else{ res.push(item) }原创 2021-04-10 14:47:15 · 516 阅读 · 0 评论 -
数组去重
1、es5去重function unique(arr) { var res = arr.filter(function(item, index, array) { return array.indexOf(item) === index }) return res}2、es6去重function unique(arr){ return [...new Set(arr)] }原创 2021-04-10 14:25:59 · 45 阅读 · 0 评论 -
浅拷贝与深拷贝
浅拷贝浅拷贝只能拷贝一层对象,如果对象中对象嵌套则被嵌套的对象只会拷贝其引用,不会真正地复制它。1、手写浅拷贝function Clone(target){ if(typeof targer!=='object'||target===null){ return; } let newObject=target instanceof Array ? [] : {}; for(var prop in target){ if(ta原创 2021-04-10 14:10:13 · 99 阅读 · 0 评论 -
手写instanceof
在手写new关键字中,我们使用了instanceof,来判断得到的结果是不是引用类型。 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 function myInstanceof(left, right) { //基本数据类型直接返回false if (typeof left !== 'object' || left === null) return false; //getProtypeOf是Object对象自带的一原创 2021-04-10 13:23:56 · 94 阅读 · 0 评论 -
手写JS实现 new 关键字
在调用new的过程中发生了4件事:1、新生成了一个对象;2、为这个新生成的对象指定了原型;3、绑定this;4、返回新对象;function myNew() { let obj = {}; let Constructor = [].shift.call(arguments); obj.__proto__ = Constructor .prototype; let result = Constructor .apply(obj, arguments); return result inst原创 2021-04-10 12:59:59 · 126 阅读 · 0 评论 -
call、apply和bind函数的实现
1、call函数Function.prototype.myCall = function (context) { if (typeof this != "function") { throw new Error("error") } context = context || window; context.fn = this; var args = [...arguments].slice(1); var result = context.fn(...args)原创 2021-04-10 12:41:47 · 88 阅读 · 0 评论 -
记忆函数(缓存函数)
一些数据需要频繁地去调用,所以可以将他们放到缓存池中,需要用的时候直接取就可以了例如用于计算阶乘function memorize(fn) { // 闭包,缓存池 var cache = {}; return function () { // 将argums拼接作为key,这样可以确保每一个key都不一样 var k = [].join.call(arguments, ",") // 如果cache[k]有就直接取,如果没有就再算 return cache[k原创 2021-04-09 21:20:55 · 150 阅读 · 0 评论 -
惰性函数
第一次执行的时候不仅返回值,而且在函数内部改变了自身,下次执行的时候就执行这个被改变的新函数了例如现有一个函数,用来获取某时刻的时间,以后调用该函数,都返回第一次调用时的时间例 var getTimeStamp=function(){ var timeStamp=new Date().getTime(); getTimeStamp=function(){//函数内部改变了自己 return timeStamp;原创 2021-04-09 21:11:42 · 64 阅读 · 0 评论 -
使用JS找出数组中的最长递增子串
1、数组中的最长连续递增子串 function findL(arr){ let arr_act=[]; let arr_pre=[]; let arr_max=[]; for(var i=0;i<arr.length;i++){ let val=arr[i] if(arr_act.length==0){ arr_act.push(val) }else if(val<arr_act[arr_act.length原创 2021-04-08 15:13:12 · 1133 阅读 · 2 评论 -
函数柯里化
函数柯里化将使用多个参数的函数转换成一系列使用一个参数的函数的技术超简洁的函数柯里化写法function curry(fn){ let judge=(...args)=>{ if(args.length===fn.length){ return fn(...args) }else{ return (...arg)=>judge(...args,...arg); } } return judge;}...原创 2021-04-09 10:15:58 · 87 阅读 · 0 评论 -
函数的防抖与节流
防抖函数与节流函数1、防抖函数 无论触发多少次,只运行最后那一次。 闭包中有一个计时器,让函数在delay时间后被触发,如果在此之前再次触发了,那么就清除计时器,上一次的触发就不会被执行,重新设置计时器,到时间后去执行此次的触发。debounce(method, delay){ var timer = null; return function () { var context = this; var args = arguments;原创 2021-04-09 11:08:07 · 61 阅读 · 0 评论