JavaScript
前端javascript相关知识点
绝世唐门三哥
改变世界的程序猿@三哥
展开
-
JavaScript---lazyload图片懒加载处理_IntersectionObserver
IntersectionObserver API原创 2024-03-12 17:13:39 · 236 阅读 · 0 评论 -
JavaScript---VConsole插件配置使用,一步到位简单实用!
个人喜欢BootCDN这个平台(直接在线引用或者下载本地引入均可~)3. 实例化该插件,直接默认浏览器打开即可看到。原创 2024-03-12 15:13:28 · 973 阅读 · 0 评论 -
JavaScript---如何完美的判断返回对象是否有值
判断一个对象是否为空时,使用方法最为完美。原创 2023-12-15 10:50:14 · 1730 阅读 · 0 评论 -
JavaScript---如何实现准时的setTimeout定时器
最近有同学在面试的时候被问到了这个问题。所以我们利用这篇文章对这个问题进行下解答。转载 2023-12-13 15:53:53 · 176 阅读 · 0 评论 -
textarea输入框输入,在ios输入空格后,此时后台正则如下,满足了???
您可以将这个编码与您的正则表达式中的空格字符比较,以确定是否有差异。可能是因为iOS输入空格时,它的Unicode编码与其他平台输入空格的Unicode编码不同。此外,您还可以尝试使用第三方库,例如jQuery Validation Plugin,它提供了丰富的验证规则和错误提示功能。问题:我前端使用textarea输入框输入,问题出现在ios输入空格后,此时后台正则如下,满足了,为什么?前端andriod输入空格是可以通过这个校验的,ios就会出现问题,不满足这个正则出现报错了?原创 2023-07-28 09:47:05 · 329 阅读 · 0 评论 -
兼容手机端iOS和Andriod中空格(space)匹配规则
ios手机中键盘的空格对应正则表达式中的空格符(\s)。可能是因为在iOS中,键盘输入的空格默认包含了全角空格(unicode编码为0x3000),而正则表达式中的空格符只匹配半角空格(unicode编码为0x20)。因此,在进行校验时需要注意将全角空格转换为半角空格,或者在正则表达式中使用特定的全角空格符(\u3000)进行匹配。是的,校验时需要注意将全角空格转换为半角空格,或者使用兼容全角或半角空格的正则表达式进行匹配。在进行校验时需要注意将全角空格转换为半角空格,或兼容全角或半角的正则检验。原创 2023-07-27 13:35:38 · 499 阅读 · 0 评论 -
处理多行文本框textarea内容为string,换行兼容ios和andriod
需要注意的是,由于不同平台的换行符可能不同,因此需要使用兼容多端的正则表达式来处理换行符。在上面的代码中,我们使用了。可以使用正则表达式来处理输入文本和换行符。1. 如果手动换行将换行符处理成 |, 每行的左右空格需要清除,中间空格要做兼容多端的操作并且保留下来。2. 每行输入不可超过35个字符,最多140个字符,不包括换行符。表示 Unix/Linux 平台的换行符。正则表达式来匹配并替换换行符。表示 Windows 平台的换行符,表示 Mac 平台的换行符,原创 2023-07-26 10:43:09 · 432 阅读 · 0 评论 -
输入空格保留或者去除的方式总结
对于每一个字符,通过判断它是否为制表符或空格字符来决定是否将其替换为空格,还是直接拼接到输出字符串中。除了使用正则表达式进行格式化,还可以使用代码处理逻辑来处理输入字符串中的空格和制表符。具体来说,可以遍历输入字符串的每一个字符,判断它是否为制表符或空格字符,将其替换为指定的字符。将这个正则表达式应用到输入字符串中,可以将所有的空格和制表符替换为指定的字符。这个示例中,使用正则表达式判断输入字符串中是否包含任意一个空格字符。使用正则表达式将它们替换为单个空格字符,输出的字符串中只包含一个空格。原创 2023-07-13 09:15:34 · 647 阅读 · 0 评论 -
Array---判断是否为对象或数组 (其中含有 假值 和 数据类型 的 概念)
数据类型。原创 2019-07-25 22:29:47 · 369 阅读 · 1 评论 -
JavaScript---数据的检测类型有哪几种?
这是因为toString是Object的原型方法,而Array、function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后,的toString方法(function类型返回内容为函数体的字符串,Array类型返回元素组成的字符串...),而不会去调用Object上原型toString方法(返回对象的具体类型),所以采用obj.toString()不能得到其对象类型,只能将obj转换为字符串类型;原创 2023-02-02 14:48:10 · 224 阅读 · 0 评论 -
String---字符串剪切-substring() | substr() | slice()
需要注意的是,Microsoft的JScript不支持起始索引的负值。如果indexStart大于indexEnd,那么效果substring()就好像这两个论点被交换了一样;如果任何一个参数都大于stringName.length,则被视为是stringName.length。方法的参数表示起始索引index和字符的长度length。四、substring()与substr()的主要区别。如果任一参数小于0或是NaN,它被视为为0。方法的参数表示起始和结束索引,原创 2019-07-08 14:00:53 · 1159 阅读 · 1 评论 -
JavaScript---移动端点击click穿透,fastclick解决方案
1. 引入fastclick插件监听全局click事件,移动端click点击事件穿透的问题。(一般不采用,这种比较绝对~)如何使用插件FastClick。原创 2023-01-16 17:10:18 · 1784 阅读 · 0 评论 -
JavaScript---常用的鼠标事件mouseover 和mouseenter的区别
当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件。2、mouseenter和mouseleave 事件不会冒泡,依旧是说鼠标移入、移出时,该元素的子元素或父元素不会触发该事件。1、mouseover和mouseout会有事件冒泡,也就是说鼠标移入、移出当前元素的子元素或父元素时都会触发该事件。:与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。false:冒泡阶段。原创 2023-01-04 10:47:45 · 2249 阅读 · 0 评论 -
JavaScript---函数arguments参数直接获取的方式
平时如果写函数不确定入参数量的话,可以采用获取arguments对象来计算参数。Arguments对象如下:类数组经过Array.from变成真正的数组。将arguments类数组转化为真正的数组。看个人喜好,选择方便适合自己的写法!函数的参数获取:arguments。原创 2022-11-24 17:50:44 · 1035 阅读 · 0 评论 -
JavaScript---常用JS方法(utils.js)额外篇
3. 通过css检测系统的主题色从而全局修改样式4. 数组随机打乱顺序5. 随机获取一个Boolean值6. 把数组的第一项放到最后一项 7. dom节点平滑滚动到可是区域,顶部,底部8. 获取随机颜色9. 检测是否为空对象10. 数组克隆方法总结(clone)11. 一步从时间中提取年月日时分秒(推荐使用)12. 检测两个dom节点是否覆盖重叠13. 判断是否是NodeJ原创 2022-10-26 17:24:16 · 2487 阅读 · 3 评论 -
JavaScript---classList属性增、删、查元素类名,方便快捷
classList类名操作。增删改查判断等方法去处理类名变化!原创 2022-10-13 17:06:20 · 1017 阅读 · 0 评论 -
JavaScript---原生获取元素(节点)与JQ获取元素(节点)方式总结
1. 获取子节点的方式。2. 获取父节点的方式。3. 获取兄弟节点的方式。原创 2022-10-13 16:39:31 · 549 阅读 · 0 评论 -
ES6---几个优雅的运算符使用技巧(?. ??= ||= &&=)
1. 使用可选链式调用2.逻辑空分配(?? =)3.逻辑或分配(|| =)4. 逻辑与分配(&& =)原创 2022-09-14 18:07:20 · 587 阅读 · 0 评论 -
JavaScript---图片轮播(loop)多个设备展示图片一致,而非重新开始,根据当前时间计算展示图片
简单说就是,根据当天的时间来动态切换图片src,不论设备多少,开机运行顺序。进去看到的保证都是在某个相同时间端内的图片是相同的,而非不同设备进去都是从0秒到duration秒采取切换图片!原创 2022-09-04 23:42:36 · 479 阅读 · 0 评论 -
JavaScript---说一说JS数据类型有哪些,区别是什么?
引用类型是储存在堆内存中,占据空间大。引用类型在栈中储存了指针,该指针向堆中该实体的起始地址,当解释器寻找引用值时,会检索其在栈中的地址,取得地址后从堆中获得实体。基本数据类型是直接储存在栈中的简单数据段,占据空间小,属于被频繁使用的数据。symbol、BigInt 是ES6之后的新类型。2. 所有类型分为两种:基本数据类型、引用类型。普通对象,数组,正则,日期,Math数学函数。...原创 2022-09-04 22:28:56 · 386 阅读 · 0 评论 -
Array---数组的交集、并集、差集、分组、平均数、扁平化、求和、位置交换、归档
1. 数组并集(ArrayUnion)2. 数组交集()3. 数组差集()4. 数组分组(ArrayGroup)5. 数组平均数(ArrayMean)6.数组生成(ArrayRange)7.数组求和(ArraySum)8.数组扁平化()9. 数组值位置交换()10.数组归档(归类)()11. Array.includes判断多个if条件12. Array.find 查找符合条件的数组元素13.数组中所有项都满足某条件:Array.every。...原创 2022-08-29 18:05:03 · 814 阅读 · 1 评论 -
JavaScript---Set对象函数的使用,去重储存等方式
JavaScript---Set对象函数的使用,去重储存等方式。原创 2022-08-09 17:32:43 · 566 阅读 · 0 评论 -
Vue---.env文件配置环境变量的相关问题
一般会建立两个文件:.env.development和.env.production在该文件中注释采用 # xxx。原创 2022-08-04 10:29:01 · 324 阅读 · 0 评论 -
jquery---xxx.css()方法的极限总结
代码】jquery---xxx.css()方法的极限总结。原创 2019-10-08 11:13:54 · 180 阅读 · 0 评论 -
JavaScript---防抖和节流的使用
2. 对于防抖和节流函数的详细的使用封装函数:对于防抖函数的详细封装以及简化版:对于节流函数的详细封装以及简化版:原创 2022-07-24 00:14:44 · 721 阅读 · 0 评论 -
Vue---vue快速安装elementui的几种方式总结
1. 常规安装2. 快速安装3. 按需引入组件3.1 main.js中, 之后按需导入组件原创 2022-07-14 17:35:50 · 884 阅读 · 0 评论 -
JavaScript---位运算符单竖杠(|)在JS的使用,与或(||)要作区分
一、单竖杠后面是0的话,可以当做取整的运算:二、根本作用是前后数字的二进制进行相加值原创 2022-07-13 17:29:48 · 1072 阅读 · 0 评论 -
知识点总结---vue/小程序/web基础知识片段总结
① 一个CSS相关新属性:flow-root说明:这个是display属性中的一个属性值:是解决子元素浮动所造成的内容塌陷的问题即父元素中添加display:flow-root,子元素float浮动兼容性:除了IE外的浏览器基本全都支持~实例:/*该浮动处理等价于下列样式代码*/.box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flo原创 2022-07-12 15:33:29 · 262 阅读 · 0 评论 -
JavaScript----upload/download-文件下载和上传的方法封装
采用原生写法下载,这里下载的支持多文件集合,即最后下载时为zip压缩包文件。 一、原生的xhr的方式去下载文件,具体写法如下,不懂的评论区直接问我! 二、采用ajax的方式去下载文件的写法AJAX直接调用上传:......原创 2022-07-07 17:16:47 · 1528 阅读 · 0 评论 -
JavaScript---setTimeOut的入参问题
setTimeOut例子 不建议使用字符串形式,传递字符串可能导致性能损失,因此建议使用函数形式原创 2022-06-13 11:32:08 · 235 阅读 · 0 评论 -
JavaScript------BigInt处理科学计数法问题
首先说明下该新方法的兼容性BigInt处理方式let b = 12000000000000000000000000000000// 打印: 1.2e+31// 采用BigInt方式处理后:BigInt(b).toString()// '11999999999999999112715591221248'整体看来可以展开展示,但是来说有一定的误差。...原创 2022-05-26 14:27:45 · 627 阅读 · 0 评论 -
RegExp------校验身份证姓名(包含少数名族·)
重点正则代码let rulesName = /[^\u4e00-\u9fa5\u4dae\uE863\u5f67·]/g; // 包含点(·)------------------------------// 常规的汉字校验: let rulesName111 = /^[\u4e00-\u9fa5]{2,6}$/; 只校验汉字校验重点-通过为失败let username = "白白·小菜鸡"let username = "白白的小菜鸡"if (rulesName.test(user原创 2022-05-24 19:25:05 · 496 阅读 · 0 评论 -
JavaScript---双叹号的使用
处理获取不到对象值时转为布尔值的情况var o={flag:true}; var test=!!o.flag;//等效于var test=o.flag||false 由于对null与undefined用!操作符时都会产生true的结果,所以用两个感叹号的作用就在于,如果明确设置了o中flag的值(非 null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是 null或undefined。 ....原创 2022-07-12 15:28:11 · 349 阅读 · 0 评论 -
JavaScript---Event Loop(事件循环机制)
JS执行机制1. 从前到后,一步一步执行2. 如果某行报错,则停止执行后面的所有js3. 先执行同步代码,再执行异步代码(包含宏任务和微任务两类)Event Loop(事件循环)指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。关键点在于:JS是单线程执行因为JavaScript是单线程执行的,所有任务都需要排队,前一个任务执行完成,才能继续执行下一个任务,但是,如果前一个任务的执行时间过长,比如文件的读取操作.原创 2022-05-18 00:47:57 · 279 阅读 · 0 评论 -
JavaScript---动态获取JS的路径,解决引入JS资源加载路径不对的麻烦
动态获取JS路径,处理引入静态路径,页面引入资源时,js中路径获取不到资源的问题原创 2022-05-17 10:34:10 · 2773 阅读 · 0 评论 -
Vue------跑马灯效果
跑马灯代码段:(可直接复制使用)<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me...原创 2019-03-29 15:04:11 · 1048 阅读 · 0 评论 -
Vue---封装axios为promise的方式,实现链式调用
1. 封装axios为promise的方式(utils/index.js)记得开发前提前封装好方便后期维护和添加新的接口调用哦!2. 实际调用使用(utils/api.js)3. vue文件中使用 (home.vue)原创 2022-05-01 16:30:34 · 3809 阅读 · 0 评论 -
ES6---异步操作promise操作
Promise 是异步编程的一种解决方案,, ES6 将其写进了语言标准,统一了用法 ,并原生提供了原生的Promise 对象Promise 对象有以下两个特点:对象的状态不受外界影响。 Promise 对象代表 个异步操作,有 种状态: Pending (进行中)、 Fulfilled (己成功)和 Rejected (己失败)。只有异步操作的结果可以决定当前是哪种状态,任何其他操作都无法改变这个状态。这也是“Promise ”这个名字的由来,它在英语中意思就是“承诺”,表示其他手段无法改变。原创 2022-04-28 21:22:40 · 333 阅读 · 1 评论 -
Javascript---宏任务与微任务,代码执行顺序你是否搞清了
利用alert弹窗会阻碍dom渲染代码执行,来验证微任务与宏任务的执行是在dom渲染前或后为什么了解执行的顺序和时机? 可以判定使用什么函数去处理代码;比如:你需要再dom渲染之前做好逻辑处理,等待dom渲染完毕后,展示于页面,此时必用微任务方式处理,必正确;反之需要获取dom的操作就需要采用宏任务的相关代码去包裹处理函数,才不至于获取不到元素而报错!!!首先说明下哪些是宏任务,哪些是微任务?(关键的分类)/****宏任务*****/// setTimeout、setInterva.原创 2022-04-28 21:16:28 · 5091 阅读 · 0 评论 -
Javascript------for...of...用于异步加载调用的循环事件中
对于原生的for循环以及后来较为方便的forEach循环:(这两者相比for循环速度快!!!)不管里面有回调还是异步接口,都是直接循环完了,一下子扔给下面的代码!!!所以对于异步循环,这样子其实就违背了初衷,虽然事件正常执行,但是几乎同时完成了!实际验证结果如下(附有gif动图,直观查看结果)通用异步函数,有时间间隔的返回结果(测试函数) const nums = [1, 2, 3, 4, 5] // for...of...循环 function powxy(原创 2022-04-28 20:15:32 · 1478 阅读 · 0 评论