![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
姜无忧
莫问前程凶吉,但求落幕无悔
展开
-
Object.hasOwn 低版本浏览器兼容性问题解决
使用Object.hasOwnProperty()代替。hasOwn是es2022新语法,旧浏览器不支持。原创 2023-07-25 14:43:00 · 1497 阅读 · 0 评论 -
手写一个eventBus自定义事件
在我们的JavaScript中,可以给元素添加一个点击监听事件,当用户点击的时候,点击事件怎会被执行,这也是一种事件总线的思想在里面,就好比元素订阅了点击事件,用户发布或出触发点击事件。所谓事件总线模式,其实就和发布订阅模式非常类似,比如我们订阅了一个公众号,公众号发布文章之后我们就能收到信息,这就是一种订阅发布的关系。再比如在Vue2项目中,我们可以使用$on、$emit来实现事件的监听和触发,这其实就是一种事件总线的思想在里面,只不过Vue帮我们实现好了。使用$emit发布事件。实现$off取消订阅。原创 2023-03-21 15:00:27 · 297 阅读 · 1 评论 -
项目中常见的代码优化方案
一个为 null 和 undefined 的判断,减少 || 类型的处理,用?使用数组或者字符串的 includes 方法,代替 indexOf 方法。校验多个表单项不能为空,使用策略模式代替 if-else。使用switch,object或者Map代替。利用filter,some,every优化代码。减少没必要的if...else判断。原创 2023-03-10 17:35:19 · 244 阅读 · 0 评论 -
Lodash基本使用
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。里面有很多针对数组、对象、函数等一些方法。数组去重 union和uniqBy。深拷贝 cloneDeep。防抖 debounce。节流 throttle。原创 2023-03-10 15:06:55 · 1169 阅读 · 0 评论 -
export {default as xxx} from xxxxx写法
export {default as xxx} from xxxxx写法原创 2023-02-16 10:48:25 · 478 阅读 · 0 评论 -
js常用正则表达式
js正则原创 2022-08-29 15:41:46 · 922 阅读 · 0 评论 -
求幂运算符**和Math.pow
求幂运算符(**)返回将第一个操作数加到第二个操作数的幂的结果。它等效于Math.pow,你可以理解它就和+、-运算符一样。在ES5的时候,我们通过求一个数的次幂通常是通过Math.pow方法操作的。const result = Math.pow(3, 4);//81 3的4次方现在,我们可以直接使用**运算符直接求幂。且写法简洁很多。const result2 = 3 ** 4;//81 3的4次方...原创 2022-02-08 18:32:08 · 668 阅读 · 0 评论 -
js 中 includes和indexOf的区别
区别1:includes用来判断一个数组是否包含指定的值,包含返回ture,否则为false;indexOf返回在数组中存在指定值的第一个索引,不存在返回-1const arr = ['a','b']console.log(arr.includes('a'))// trueconsole.log(arr.indexOf('a'))// 0区别2:includes可以判断有NaN的元素,indexOf不能const arr = ['a','b',NaN]console.log(原创 2022-02-08 18:17:12 · 4856 阅读 · 0 评论 -
vue添加实例 property与import
添加实例 property你可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = 'My App'这样$appName就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行:new Vue({ beforeCreate: function () { console.log(this.$appName) }})则控制..原创 2022-01-12 16:18:00 · 390 阅读 · 0 评论 -
es2020新增语法 ?. 与? ?
ES2020引入了“链判断运算符” ?. var obj={ zhangsan:{ name :"张三" } }//如果这样写 obj.lisi.name //会报错obj.lisi?.name //不会报错ES2020引入了一个新的 Null 判断运算符??。它的行为类似||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值//?? 左侧是null,undefined时...原创 2021-12-30 18:27:51 · 996 阅读 · 0 评论 -
字符串截取substr,substring,slice的区别
相同点这三个方法都可以对字符串进行截取,并且返回一个新的字符串,也就是不会对原字符串进行修改不同点这三个方法的不同之处在于参数不同。substringsubstring() 方法用于提取字符串中介于两个指定下标之间的字符。语法string.substring(start,stop)参数参数 描述 start 必需。一个非负的整数,规定要提取的子串的第一个字符在string中的位置。 stop 可选。一个非负的整数,比要提取的子串的最后一个字..原创 2021-04-09 15:46:35 · 865 阅读 · 0 评论 -
前端跨域的解决方式
什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1、资源跳转:A链接、重定向、表单提交2、资源嵌入:<link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链3、脚本请求: js发起的aj...原创 2019-03-11 16:07:06 · 123 阅读 · 0 评论 -
上传图片尺寸大小限制(iviewUI组件库为例)
上传图片尺寸大小限制,UI组件库为例iview中<Upload ref="upload" :max-size="10240" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" :on-success="successUpload" :on-error="failureUpload" :show-uplo原创 2020-08-14 11:34:30 · 1280 阅读 · 0 评论 -
js中CMYK格式的图片上传失败,解释
CMYK和RGB的区别:两者在性质上不同:RGB是显示器显示的颜色,而且CMYK是印刷用的颜色js中我们在做图片上传时候,会出现CMYC的上传回显失败问题。所以要注意一下。要上传rgb格式图片。...原创 2020-04-17 11:45:09 · 804 阅读 · 0 评论 -
JavaScript 错误 - throw、try 和 catch
try语句测试代码块的错误。catch语句处理错误。throw语句创建自定义错误。finally语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。JavaScript try 和 catchtry语句允许我们定义在执行时进行错误测试的代码块。catch语句允许我们定义当 try 代码块发生错误时,所执行的代码块。JavaScript 语句tr...原创 2020-04-15 15:56:08 · 203 阅读 · 0 评论 -
哀悼日网站全站变灰
全网站变灰,我们可以使用css的filter属性。<style type="text/css"> html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter...原创 2020-04-07 14:54:02 · 449 阅读 · 0 评论 -
js中火星坐标、百度坐标、WGS84坐标转换
//定义一些常量var x_PI = 3.14159265358979324 * 3000.0 / 180.0;var PI = 3.1415926535897932384626;var a = 6378245.0;var ee = 0.00669342162296594323;/** * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换 * 即 百度 转 ...原创 2020-02-21 13:44:50 · 2595 阅读 · 0 评论 -
js获取当前时间的前一天/后一天
let curDate = new Date();var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天var nextDate = new Date(curDate.getTime() + 24*60*60*1000); //后一天原创 2019-12-26 14:08:52 · 1156 阅读 · 0 评论 -
addEventListener()与removeEventListener()
所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法,用于追加事件和删除追加。接受参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。 (3个)最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。默认为false;事件传递有两种方式:冒泡与捕获。事件传递定...原创 2018-10-15 19:37:51 · 25633 阅读 · 0 评论 -
js二叉树翻转
思路:如果根节点不为空,那么将左右子结点交换,然后将左右子结点进行递归调用。function invertTree(root) { debugger if (root !== null) { var temp = root.left; root.left = root.right; root.right = temp; invertTree(root...原创 2019-01-03 20:48:07 · 2986 阅读 · 1 评论 -
JavaScript 让复杂if..else判断的更优雅写法
https://blog.csdn.net/xiasohuai/article/details/85003225https://blog.csdn.net/xiasohuai/article/details/85691741原创 2018-12-24 11:38:34 · 2799 阅读 · 0 评论 -
数组
此文章包含:1. 构造函数 var arr=new Array()2. 静态方法Array.isArray()3. 实例方法 valueOf(),toString(),push(),pop(),shift(),unshift(),join(),concat(),reverse(),slice(),splice(),sort() map(),forEach(),filter(),...原创 2018-12-22 13:29:39 · 426 阅读 · 1 评论 -
使用 Array.includes 来处理多重条件,使代码更优雅
includes [ɪnk'lu:dz] 包含,包括includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。举个例子:// 条件语句function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); }}...原创 2018-12-14 14:34:50 · 3991 阅读 · 0 评论 -
JavaScript HTML DOM 元素 (节点)新增,编辑,删除
createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChildcreateElement以下代码是用于创建 <p> 元素:var para = document.createElement("p");createTextNode为 <p> 元素添加文本节点:...原创 2018-12-04 18:30:52 · 990 阅读 · 0 评论 -
delete和splice和Vue.delete删除数组的区别(注:数组)
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。splice直接删除了数组 改变了数组的键值。Vue.delete直接删除了数组 改变了数组的键值。<script type="text/javascript"> var a=[1,2,3,4] var b=[1,2,3,4] delete a[1] console.lo...原创 2018-12-04 15:12:39 · 11758 阅读 · 1 评论 -
async/await基本理解及项目案例(结合Promise)
ES2017 标准引入了 async 函数,使得异步操作变得更加方便。1.async/await场景这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。2.名词解释asyncasync的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,asy...原创 2018-10-15 16:40:53 · 12497 阅读 · 4 评论 -
indexOf与search的区别
1.indexOf方法indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,如果没有找到返回-1。语法:stringObject.indexOf(searchvalue,fromindex)该方法将从头到尾地检索字符串stringObject,看它是否含有子串searchvalue。开始检索的位置在字符串的fromindex处。如果没有fromindex参数则...原创 2018-12-04 10:20:24 · 871 阅读 · 0 评论 -
普通js使用ajax,微信公众号授权(微信网页授权)
微信授权的整个流程:引导用户进入授权页面同意授权,获取code 通过code换取网页授权access_token(与基础支持中的access_token不同) 如果需要,开发者可以刷新网页授权access_token,避免过期 通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)其实说白了,前端只需要干一件事儿,引导用户发起微信授权页面,然后得到...原创 2018-11-19 17:12:19 · 7127 阅读 · 3 评论 -
关于js中return false、event.preventDefault()和event.stopPropagation()区别,以及阻止事件冒泡和阻止默认事件
在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是模糊,这里顺便带上event.stopPropagation()一起区分下。事件处理程序的返回值只对通过属性注册的处理程序才有意义,如果我们未通过addEventListener()函数来绑定事件的话,若要禁止默认事件,用的就是return ...原创 2018-11-20 16:08:30 · 1072 阅读 · 1 评论 -
文件导出的get和post方式
get方式(3种写法):1、window.open("**")是用新窗口打开URL页面2、location.href="**"是用当前页面显示URLwindow.open(this.GLOBAL.API_Spm_result+ "completionday/batchId/postId/export?batchId="+this.batchId+"&postId="+this....原创 2018-11-08 11:20:06 · 5449 阅读 · 0 评论 -
Promise用法及使用案例
想了解更多方法请参考阮一峰老师的教程:http://es6.ruanyifeng.com/#docs/promise1.Promise的含义Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操...原创 2018-10-10 11:17:11 · 11746 阅读 · 7 评论 -
DOM自定义属性 getAttribute、setAttribute、removeAttribute
elementNode.attributes:属性返回包含被选节点属性的 NamedNodeMap。elementNode.getAttribute(name):方法通过名称获取属性的值。elementNode.setAttribute(name, value):方法创建或改变某个新属性。elementNode.removeAttribute(name):方法通过名称删除属性的值。 ...原创 2018-10-15 19:53:45 · 2281 阅读 · 0 评论 -
面向对象编程——基础篇(一) 对象和构造函数
面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式。它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。对象可以复用,通过继承机制还可以定制。因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比...原创 2019-01-05 16:22:17 · 901 阅读 · 0 评论 -
面向对象编程——基础篇(二) 封装
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?封装一、 生成实例对象的原始模式假定我们把猫看成一个对...原创 2019-01-05 16:38:47 · 166 阅读 · 0 评论 -
js数组去重
方式一:普通的数组var arr1=[1,2,3,4,1,5,3,4]var arr2 = [];for (var i = 0; i < arr1.length; i++) { if (arr2.indexOf(arr1[ i ])==-1) { arr2.push(arr1[ i ]) }} 方式二:i...原创 2018-07-12 15:01:15 · 1832 阅读 · 3 评论 -
微信浏览器input关闭键盘后导致页面底部空缺问题
移动端页面中有一个input框,点击时弹出软键盘,关闭时页面底部空白出一部分,然后滑动一下又恢复原状了。解决方案: 绑定一个blur事件,当其触发时,使scrollTo为0<input type="text" v-model="teamCodeValue" @blur="inputBlur"> //对应的methods中添加js inputBlur () ...原创 2019-03-13 17:21:55 · 982 阅读 · 0 评论 -
jsonp原理详解
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。所谓同源是指,域名,协议,端口相同。所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西。但<img>的src(获取图片),<l...原创 2019-03-11 11:35:04 · 1006 阅读 · 0 评论 -
Restful API是什么?
Restful API 从字面就可以知道,他是rest式的接口,所以就要先了解什么是restrest 不是一个技术,也不是一个协议rest 指的是一组架构约束条件和原则,提供了一个新的架构设计思路,满足这些约束条件和原则的应用程序或设计就是 RESTful。RESTful 是目前最流行的 API 设计规范,用于 Web 数据接口的设计。为什么用Restful API例如常用的M...原创 2019-02-08 13:16:30 · 269 阅读 · 0 评论 -
帮你写好简洁JS代码的6条建议
1.使用 Array.includes 来处理多重条件,使代码更优雅https://blog.csdn.net/xiasohuai/article/details/850032252.JavaScript 复杂if...else,switch判断的更优雅写法https://blog.csdn.net/xiasohuai/article/details/856917413. asyn...原创 2019-02-03 17:47:34 · 464 阅读 · 0 评论 -
JS阻止事件冒泡和默认事件
本文转载自掘金中我的小伙伴的一篇文章:https://juejin.im/post/5bf7ad096fb9a049ed308353什么是事件冒泡?当事件发生后,这个事件就要开始传播(从里到外,或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,或处理事件的函数并未绑定在该事件源上。如下图: 我们经常利用事件冒泡机制去减少给DOM添加过多的绑定事件...转载 2019-01-15 17:54:26 · 8869 阅读 · 1 评论