![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 67
JavaScript
铁锤妹妹@
日日行,不怕千万里;常常做,不怕千万事。
展开
-
ES6操作符使用总结
最近做新项目时候用到了ES6 添加的一些运算符,使用起来很方便,简化了代码,增强了代码容错性。使用感不错,下面做了总结,本文也会持续维护。原创 2024-07-10 17:01:49 · 973 阅读 · 0 评论 -
ES6中的展开运算符(...)使用总结
展开运算符(用三个连续的点…表示)是 ES6 中的新概念,使你能够将字面量对象展开为多个元素。注意,解构赋值中展开运算符只能用在最后const [arg, ...arg1, arg2] = ["a", "b", "c", "d"]; //报错1. 合并数组和对象在项目中,你肯定遇到过将多个数组进行结合的情况,一般的用法可以使用 Array 的concat()方法: // concat合并数组 const a = [1, 2, 3]; const b = [4, 5, 6];原创 2021-04-21 11:53:02 · 825 阅读 · 0 评论 -
js中使用padStart()和padEnd() 补齐指定位数
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。使用指定字符串填充到目标字符串前面,使其达到目标长度;str.padStart(targetLength,string):使用指定字符串填充到目标字符串后面,使其达到目标长度;str.padEnd(targetLength,string):参数:targetLength当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,转载 2021-06-18 11:59:04 · 423 阅读 · 0 评论 -
JS获取阿里云oss私有图片需要通过SDK加签名访问问题
对于不允许匿名访问的私有图片文件,不支持通过文件URL直接添加参数的方式处理图片,您需要通过`SDK`的方式将图片处理操作加入签名URL中原创 2023-10-30 10:08:36 · 2697 阅读 · 4 评论 -
前端需要了解的浏览器缓存知识
作为一个前端开发者,每天都在和浏览器打交道,对于浏览器缓存,相信都不会陌生,同时它也是我们日常开发中存在的一个非常重要的优化手段,无论在节省带宽、提高加载和渲染速度、减少网络阻塞,以及提高用户体验上,都有重要的作用。原创 2023-10-16 23:09:25 · 1797 阅读 · 0 评论 -
vue路由传参当刷新页面时,参数变成“[object Object]”
如果传参是一个`对象`,点击进入页面路由可以获取对象的值;但是刷新页面会导致获取不到对象值,被强制转换为字符串 `"[object Object]"`,导致数据不能使用。转载 2022-11-25 16:32:03 · 5347 阅读 · 3 评论 -
Vue源码学习 - 异步更新队列 和 nextTick原理
在我们使用Vue的过程中,基本大部分的 `watcher` 更新都需要经过 `异步更新` 的处理。而 `nextTick` 则是异步更新的核心。原创 2023-07-27 17:40:29 · 1042 阅读 · 0 评论 -
从Vue层面 - 解析发布订阅模式和观察者模式区别
观察者模式和发布订阅模式作为日常开发中经常使用到的模式,我一直不能做到很好的区分。最近在看Vue的源码,里面设计到了观察者模式,比较感兴趣,就去学习了下,这里做个总结吧。原创 2023-07-26 17:31:29 · 2705 阅读 · 2 评论 -
vue中使用v-for实现两次嵌套循环,判断某子元素是否显示,进行复杂表单校验
有以下一个使用场景,名称111、名称222、名称333,是放在一个大数组里的,然后通过第一层for循环显示出来的。名称333数组里又包含自己的子数组,子数组再通过第二次for循环展示出来。当我们选择发放方式的时候,符合选择条件的只显示自己对应那一行的首发比例。最后对子数组里的每一项进行表单校验。原创 2023-07-12 14:42:35 · 5859 阅读 · 3 评论 -
js处理多种类型的数据进行合并,相同类型的数据相加
根据类型,合并接口返回的数据,相同类型的数据相加即可。原创 2021-07-05 22:56:46 · 3654 阅读 · 2 评论 -
JS中常用字符串API - 使用汇总
JavaScript 中有很多字符串(String)API 可以用来操作和处理字符串,下面列举一些常用的:原创 2023-05-16 17:33:44 · 675 阅读 · 0 评论 -
理解JS的事件循环机制(Event Loop)
JS是单线程语言,但是又可以做到异步处理高并发请求,这时就用到了JavaScript的事件循环机制。原创 2023-05-15 16:55:01 · 3432 阅读 · 4 评论 -
关于JS中this对象指向问题总结
关于JS中this对象指向问题,相信做过项目的小伙伴多多少少都会遇到过,明明感觉代码写的没问题,可是运行的时候,就会报错,比如报错 xxx is not a function。我最近也遇到了,百度学习了不少前辈对于this对象指向问题的解析,于是总结了这篇文章。原创 2023-03-08 16:50:32 · 3496 阅读 · 2 评论 -
浅析js中的原型和原型链及其使用场景
最近浏览网站学习的时候,看到了这个话题,感觉面试里也经常会被问到;所以查阅了不少文章,想总结一下,方便以后翻看。理解的会比较浅显,希望能多多交流,以后理解更深层的也会持续在这里更新。原创 2023-02-27 16:37:10 · 3245 阅读 · 0 评论 -
js将后端返回的文件流导出为excel,并自定义下载文件名
后台管理系统,常会出现导出excel表格功能;点击导出按钮,请求后端接口,需要将接口返回的`文件流`导出为excel,实现前端下载excel文件。原创 2022-12-13 10:11:58 · 11273 阅读 · 1 评论 -
前端js实现canvas压缩图片并上传
可以减少用户的等待时间,提升使用体验,目前手机拍摄的图片文件大小一般在几 M 左右,文件直接上传时会有卡顿现象原创 2022-12-12 08:45:00 · 4673 阅读 · 2 评论 -
理解浅拷贝和深拷贝以及实现方法
浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会修改到原对象。原创 2022-11-29 08:30:00 · 3748 阅读 · 2 评论 -
js中判断数据类型的几种实用方法
最近项目中有不少地方需要判断数据类型,但是判断数据类型也有好几种方法,并且每种方法判断的数据类型也有局限性,所以想总结一下,方便以后查阅。原创 2022-10-31 09:00:00 · 16942 阅读 · 0 评论 -
nginx部署前端项目的详细步骤
在前端开发过程中经常是需要把前端静态资源放到服务器中看效果,这时经常用到nginx来配置。原创 2022-10-24 08:15:00 · 22252 阅读 · 2 评论 -
js实现整数和小数分开并添加不同的样式
我需要将整数部分 166 用一个样式显示字体大小为30rpx。将小数部分 88 用一个样式显示字体大小为24rpx。//如果小数点后有值就用该值,没有默认'00'有其他更好的方式,欢迎互相交流~//使用分隔符分割字符串成数组。//小数点后只有一位的话,补0。比如数值是166.88,原创 2022-09-29 17:50:12 · 974 阅读 · 0 评论 -
js判断对象是否为空对象的几种常用方法
将值先转换为 JSON 字符串,再判断该字符串是否为"{}",这种我认为时最简单的一种方法。转载 2022-09-23 15:28:47 · 654 阅读 · 0 评论 -
关于Object.keys()和Object.values()的使用
Object.keys()取对象属性名转成数组Object.values()取对象属性值转成数组原创 2022-09-23 15:14:48 · 968 阅读 · 2 评论 -
js数组去重,id相同对某值相加合并
有相同id存在的话,获取index索引位置。取相同id的value累加原创 2022-07-25 22:35:39 · 2856 阅读 · 0 评论 -
js优化双层for循环的方法
最近在项目中遇到一个需求,需要将两个数据表的数据进行比对,这涉及到了两层for循环的嵌套。数据少的时候还好,一旦数据多就是成倍的循环次数,性能不好,尝试优化一下。假如两次循环都是1000个元素,那么循环次数是:1000*1000之前的双层for循环写法:优化后写法相当于一个for循环就能搞定优化之后的循环次数:1000...原创 2022-07-11 22:01:06 · 4770 阅读 · 2 评论 -
if条件判断同时出现或者(||)和并且(&&)防出错的写法
如果表达式中含有多种运算符,那么相同运算符可以用括号,防止语意不明原创 2022-07-10 20:19:08 · 5231 阅读 · 0 评论 -
关于NaN的一些总结
NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number。是not a number的缩写,表示非数字原创 2022-06-23 14:53:44 · 807 阅读 · 0 评论 -
h5适配ios顶部和底部安全区域的问题
一. 前言:苹果手机从iphoneX之后,屏幕顶部都有一个齐刘海,iPhoneX 取消了物理按键,改成底部小黑条,如果不做适配,这些地方就会被遮挡,所以本文记录一下齐刘海与底部小黑条的适配方法。二. 知识点学习1)viewport-fitiOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:contain: 可视窗口完全包含网页内容cover:网页内容完全覆盖可视窗口auto:默认值,跟 c原创 2022-05-25 13:50:57 · 18873 阅读 · 6 评论 -
前端处理订单倒计时显示问题
项目中有下图这样一个显示倒计时的需求,需要实现;一开始想法是需要接口返回 到期时间戳 减去 客户端当前时间 ,然后计算出要显示 倒计时剩余时间 ;最后感觉用客户端时间会不准确,可能会出现服务器时间已经显示到期,但是客户端还差几分钟的情况,所以和后端商量他那边计算 到期时间戳 - 服务器时间戳 = 服务器待付款时间差,最后把服务器待付款时间差的时间戳返给我,我再对这个时间戳进行处理,生成下面设计图这种时间样式处理方法:和后端商量他那边计算 到期时间戳 - 服务器时间戳 = 服务器待付款时间差,最后原创 2022-05-23 09:41:26 · 1536 阅读 · 0 评论 -
解决position:fixed 固定定位失效问题
最近在项目开发过程中遇到了一个固定定位失效的问题,当给底部定位元素设置了position: fixed并设置了距离top和left,bottom的距离之后发现位置居然一直不正确,fix固定定位失效了。百度看了些文章说是父元素如果存在 transform 属性或者移动端设置-webkit-overflow-scrolling属性时会出现同样的问题我的页面父元素未设置 transform ,就全局搜索了-webkit-overflow-scrolling,发现全局样式里设置了,百度了-webkit-over原创 2022-05-22 21:27:22 · 11179 阅读 · 4 评论 -
js操作在当前日期加减(天、周、月、年数)
1. 项目案例首先,我们创建个获取当前日期的变量nowDate,项目中需求是设置在当前时间的15天后做xxx事情,写一个方法 getNextDay () { let nowDate = new Date() nowDate.setDate(nowDate.getDate() + 15) return nowDate }Date本来就有setDate()的方法 ,用getDate()出来的数值+15就是加15天 如果大于本月最大天数会自动往下加一个月的2. 相关延伸//创建d原创 2022-05-03 16:58:30 · 11004 阅读 · 0 评论 -
理解js中的同步和异步
首先要先了解下js单线程一、为什么js是单线程?其实,JavaScript的单线程,与它的用途是有很大关系,我们都知道,JavaScript作为浏览器的脚本语言,主要用来实现与用户的交互,利用JavaScript,我们可以实现对DOM的各种各样的操作,如果JavaScript是多线程的话,一个线程在一个DOM节点中增加内容,另一个线程要删除这个DOM节点,那么这个DOM节点究竟是要增加内容还是删除呢?这会带来很复杂的同步问题,因此,JavaScript是单线程的二、同步任务和异步任务(1)为什么原创 2022-03-28 10:34:52 · 13409 阅读 · 7 评论 -
理解异步函数async和await的用法
async作为一个关键字放在函数前面,表示该函数是一个异步函数,异步函数意味着该函数的执行不会阻塞后面代码的执行;而 await 用于等待一个异步方法执行完成原创 2022-03-23 14:19:02 · 80025 阅读 · 61 评论 -
使用对象代替复杂的if else,switch case
使用对象替代复杂的if else,switch case原创 2022-03-03 17:05:31 · 344 阅读 · 0 评论 -
使用vant+video.js实现轮播图图片和视频轮播播放
先上效果图1. 安装npm install video.js2. 在需要用到的页面引入 import Video from "video.js"; import "video.js/dist/video-js.css";3. 具体页面使用假设传给子组件的数组结构<template> <div class="tabPicture"> <van-swipe style="height: 490px;"> <van-swip原创 2022-02-23 17:46:17 · 5606 阅读 · 2 评论 -
v-html引入的img图片等比例显示不变形
通过 CSS 设置样式行不通,只能修改返回的数据了~ <view v-html="introducehtml" v-if="introducehtml != ''"></view>js getGoodsDetail(id) { ceshiApi['GoodsDetail']({ id: id }) .then((res) => { if (res.data.flag === '200') { .原创 2022-01-17 21:51:11 · 704 阅读 · 0 评论 -
如何减少if...else... 条件判断的实用小技巧
项目中如果if-else 条件判断多了,并不是错,也不会导致bug,但是这样的代码不利于扩展及后续维护,容易出错,降低开发效率等问题;过后再看自己的项目眼花缭乱,更别提同事看你的代码了;所以请保持程序猿的代码洁癖,优化它。1. 利用indexOf做判断// badif ( name === '111' || name === '222' || name === '333' || name === '444') { test();}// goodconst nameList = ['111原创 2021-11-20 23:37:42 · 1259 阅读 · 0 评论 -
js中使用replace() 方法的正确姿势
1. replace() 定义replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。2. 语法stringObject.replace(regexp/substr,replacement) //replacement一个新字符串值返回值一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。3. 结合例子讲解 let reg = /\/Public/g //加上转义符的意思是防止程序把 /p原创 2021-11-05 10:13:14 · 1033 阅读 · 0 评论 -
关于图片防盗链 - 图片加载报错403,但可以单独打开图片链接
问题场景:项目引用远程图片固定链接时(多为第三方链接),图片会发生在页面无法显示,报错403,应该是加了防盗链,会检测访问图片的referer;但是单独打开该远程链接,又可以打开;不过我们的项目暂时不需要处理这一块,先记录下关于图片防盗链吧为什么会出现这种情况?主要是该站点的图片采用了防盗链的规则,该站点在得知有请求时,会先判断请求头中的信息,如果请求头中有Referer信息,然后根据自己的规则来判断Referer头信息是否符合要求,Referer 信息是请求该图片的来源地址。http请求中原创 2021-10-26 22:28:57 · 1932 阅读 · 0 评论 -
遍历筛选数组把符合条件的数据放入新的数组
需求:把数组中大于0的元素存放到一个新数组中一开始用的下面这种方法,因为索引不连续,所以数组中会出现empty let arr = [1, -6, 4, -5, 10, -1, 0, 6]; let filterArr = []; for (let i = 0; i < arr.length; i++) { if (arr[i] > 0) { filterArr[i] = arr[i]; } } console.log(原创 2021-08-24 17:19:07 · 4794 阅读 · 0 评论 -
处理js相加减,小数后多出好多位数的解决方案
起因计算机的二进制实现和位数限制有些数无法有限表示。就像一些无理数不能有限表示,如 圆周率 3.1415926…,1.3333… 等。JS 遵循 IEEE 754 规范,采用双精度存储(double precision),占用 64 bit。console.log(0.1 + 0.2) //0.30000000000000004解决方案1)方案1toFixed先保留两位小数,再用parseFloat去掉小数点后面的0 console.log(parseFloat((0.1 + 0.2).t原创 2021-07-27 11:38:33 · 4729 阅读 · 0 评论