![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
明月松江
年轻就是力量,有梦就有未来!
展开
-
求数组嵌套深度
有很多求数组嵌套深度的解法,我自己想出来的解法如下:function deepLevel(arr){ var num = 0; function recurse(arr){ var arr2 = arr.flat() if(arr2.some(item=>typeof item === 'object')){ num+=1 recurse(arr2) } } recurse(arr) return num}主要解题思路是:先原创 2021-07-06 10:47:34 · 1075 阅读 · 4 评论 -
axios自带的上传进度回调函数
在选用antd上传组件上传的时候,需要显示上传的进度。upload组件是自带上传特效的,但是这个效果不能代表实际的上传进度,所以还是得获取实时的上传进度。所幸的是axios自带这样的回调函数,即uploadProgress。import axios from 'axios'axios.post(url, { onUploadProgress(p){ console.log(100 * (p.loaded / p.total)) }})其中100 * (p.loaded / p原创 2020-12-15 01:13:34 · 1052 阅读 · 0 评论 -
vue项目使用postMessage和eventBus进行窗口和组件间数据通信
先来说说什么是postMessage:postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案。场景:今天在vue项目中本来想使用eventBus(中央事件总线)进行组件间通信的。但是发现$emit后,另外一个组件没有收到通知。我检查了一下,发现其中一个组件是被另外一个组件使用iframe嵌套进页面的,而 $emit无法突破ifr原创 2020-08-05 23:58:27 · 1459 阅读 · 0 评论 -
vue解决图片加载失败显示默认图片的方法
代码如下:defaultImg.js:function install(Vue, options = {}) { /** * 检测图片是否存在 * @param url */ let imageIsExist = function (url) { return new Promise((resolve) => { var img = new Image(); img.onload = function () { if (th原创 2020-06-19 12:56:50 · 10812 阅读 · 2 评论 -
向数组中插入几个值的方法
方法1: 使用splice()var arr = [1,2,3,4];arr.splice(3,0,'a','b');console.log(arr);方法2:先slice()后添加新元素var arr = [1,2,3,4];// 使用pushvar newArr = arr.slice(0,3)newArr.push('a','b',4)// 或者使用unshiftvar newArr2 = arr.slice(3)newArr2.unshift(1,2,3,'a','b')/原创 2020-05-11 15:52:50 · 1980 阅读 · 0 评论 -
如何求数组中的最大值
方法1:先排序再取数组最后一项var arr = [1,3,4,2];arr.sort(function(a,b){return (a - b)});console.log(arr[arr.length-1]);方法2:遍历判断var arr = [1,3,4,2];var max = arr[0]arr.forEach(ele=>{ if(max<ele){ max = ele }})console.log(max);方法3:使用内置函数Math.max原创 2020-05-11 15:14:30 · 7142 阅读 · 0 评论 -
js中in关键字的作用
in关键字可以用来检测某个对象里是否存在某个属性,既可以是这个对象自身的属性,也可以是这个对象继承的属性,对于对象的属性需要用字符串指定属性的名称。比如用in检测对象中是否存在"proto"属性:"__proto__" in {}返回一个布尔值,表示对象存在或者不存在这个属性。因为数组也是一种特殊的对象,所以in也可以用来检测数组的属性。对于数组的属性需要用数字来表示数组的属性名称:0...原创 2020-03-04 12:00:18 · 1772 阅读 · 0 评论 -
实现千分位加逗号
先用正则方式实现:var regExp = /\d{1,3}(?=(\d{3})+$)/gfunction change(num){ return (num+"").replace(regExp,function(match){ return match+"," })}var result = change(10000000)console.log(result);然后用非...原创 2020-02-29 00:55:59 · 1060 阅读 · 0 评论 -
2个同源tab页之间的数据交互
如果要实现2个同源tab页之间的数据交互,可以选择使用localStorage,因为它的存储遵循同源策略。通过约定localStorage某一个itemName,基于该key值的内容进行通信。H5提供了storage事件,通过window对象监听storage事件,会监听到localStorage的变化(包括item的增加、删除、修改),从而完成不同tab页之间的数据交互。示例:A页面wi...原创 2020-02-20 16:01:27 · 1642 阅读 · 1 评论 -
js对象数组的筛选和排序
今天在项目中需要mock数据,而且还要实现点击排序和筛选的功能。关于数据的筛选我立马想到用数组的filter方法实现,其中type是外面传入的类型参数:let arrayData = [....这里是mock的数据...];let type = params.type;let data = arrayData.filter(item=> item.type === type)数...原创 2019-04-29 18:48:37 · 3764 阅读 · 0 评论 -
javascript的sleep暂停功能
在PHP等语言中有sleep这个方法,可以让程序暂停执行一段时间。那么js中有没有类似sleep的方法呢?答案是有的。利用ES2017里的新特性async/await 可以实行类似的功能。代码如下:function sleep(ms){ return new Promise((resolve)=>{ setTimeout(resolve,ms); })}async fu...原创 2019-04-15 17:58:43 · 671 阅读 · 0 评论 -
关于js中replace的使用
项目使用了表情包,后台给我的数据只有字符串,在字符串里包含表情包对应的字符串。在前台解析的时候需要将这些字符串转换成图片输出到页面上。表情包相应的json数据如下:大致的思路就是根据结果返回的表情的字符串值去匹配json里对应的对象,把对象的icon拼接到图片的src里。首先我使用了正则和字符串的match方法,来获取这些特殊的表情字符串组成的数组emojiResult。...原创 2019-04-08 18:43:20 · 2176 阅读 · 0 评论 -
ES6箭头函数的缺点
ES6中箭头函数给我们带来了便利,写法很简洁,不用再定义this,因为箭头函数的this取决于上一级作用域。但是它的缺点也是这些,this定义好了,太简洁有时候难以阅读。在下面场景使用箭头函数会出现问题:1.在对象中定义方法时使用箭头函数:var obj = { age:20, getAge:()=>{ return this.age }}obj.getAge...原创 2019-12-21 17:45:28 · 3222 阅读 · 0 评论 -
js字符串转数字的方法
js字符串转数字的几种方法:1.默认方式 (不带基数):parseInt(num);2.传入基数 (十位数):parseInt(num, 10);3.浮点数: parseFloat(num);4.Number 构造器: Number(num);5.按位非: ~~num;6.一元运算符:num / 1;num * 1;num - 0;num;parseInt会将num转为整...原创 2019-11-18 10:57:51 · 2026 阅读 · 0 评论 -
JS限制输入框输入的字节数
之前写过获得输入框输入的字节数JS获得输入框输入的字节数那么如果想限制输入框输入的字节数该怎么做呢?原创 2019-10-22 10:28:02 · 887 阅读 · 0 评论 -
ios上传视频后获取视频的时长
代码如下:const video = document.createElement('video');video.onloadedmetadata = event => { const path = event.path || (event.composedPath && event.composedPath()); const duration = path[0...原创 2019-07-26 15:02:51 · 1484 阅读 · 0 评论 -
textarea输入框随着内容的增加使滚动条向下滚动
测试给我提了个bug:在textarea输入框下,表情输入多行后,滚动条没有向下滚动。于是我自己测试了下,如果连续输文字,当超过textarea限制的行数后,滚动条会自动向下滚动。但是连续输入表情(此时textarea是失去焦点的),我发现当超出textarea限制的行数后,滚动条是不会自动向下滚动的。我又去看了微博的textarea,发现也是这种情况。PS:不知道是不是微博的测试没有这么变...原创 2019-08-19 11:45:03 · 3783 阅读 · 0 评论 -
如何去掉html中的零宽字符 '&# 8203;'
在爬来的数据中有的时候会出现零宽字符​,一般情况对界面没有什么影响,但是当一行最后一个字后面出现零宽字符​就会出现换行,影响界面的排版。我的解决办法是把零宽字符​从字符串中全部去掉,以避免出现上述换行的情况。代码如下:str = str.replace(/\u200B/g,'');...原创 2019-08-22 16:43:12 · 3821 阅读 · 2 评论 -
vue.js防止按钮重复点击
情景:有时候点击按钮的代码执行比较耗时,在此期间用户如果重复点击,会造成重复执行的情况。思路:使用一个变量state来阻止后面的代码执行,变量值默认为false,执行代码之前变为true,代码执行完毕再变为false。代码:<div @click="handleClick"></div>data(){ return{ state:false }}...原创 2019-09-19 14:10:03 · 15125 阅读 · 2 评论 -
js获得输入框输入的字节数
需求:需要获取输入框输入的字节数。解决方法:方法一:通过charCodeAt()获得的unicode编码来判断代码如下:function getLen(str){ let len = 0; for(let i=0;i<str.length;i++){ if(str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255){...原创 2019-09-24 18:44:46 · 921 阅读 · 0 评论 -
使用scrollTo平滑滚动到顶部
项目有页面右下角有个返回按钮,点击则滚动到顶部。我一开始考虑使用动画,后来一想如果使用动画,滚动时间就固定了,就会造成滚动忽快忽慢的情况。所以有没有办法让页面平滑滚动到顶部呢?答案是使用window.scrollTo(options)方法,options是一个对象,有三个属性:top 等同于 y-coordleft 等同于 x-coordbehavior 类型String,表示滚...原创 2019-07-04 18:47:38 · 4370 阅读 · 0 评论