![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript高级
JavaScript高级
前端酱紫
这个作者很懒,什么都没留下…
展开
-
谷歌扩展开发v3版本,自动请求接口
pc端项目要是1个小时不动不请求,token会过期,写个插件每隔一段时间自动取请求一个接口,让token不过期。原创 2023-05-19 13:55:33 · 1759 阅读 · 0 评论 -
由手机号正则引发的思考,正则属性 lastIndex
这个正则我们平时用来验证手机号的,好像也看不出什么毛病,把正则放到浏览器控制台,简单代入,可以对手机号正确验证。,regs.lastIndex 为 4 ,因为匹配到了1,所以从2开始,这里的2索引为4。,regs.lastIndex 为 1 ,因为匹配到了1,所以从2开始,2的索引为1。,regs.lastIndex为0,因为没有匹配到1,索引从0开始。1.把提前打印的去处即可,但这种方法发生bug 的概率还是挺高的。才对,为什么我输入了11位手机号却提示。根据文档我们在写个类似的demo看。原创 2022-12-26 11:39:21 · 1579 阅读 · 0 评论 -
vue自定义指令 v-debounce 防抖
使用场景:点击查询按钮 或者 点击提交保存按钮 的时候点击次数过多,会多次提交,为了避免这种情况发生,我们可以做个防抖,点击一次后 第二次需要间隔一定的时间才能再次点击。新建一个vue2项目,以下代码cv即可使用< template > < div > < button v - debounce = "debounceClick(1000)" > 防抖 < / button > < / div > < / template > < script > export default {原创 2022-11-30 23:58:11 · 2695 阅读 · 0 评论 -
点击某个dom元素,让dom元素全屏显示
产品的需求里有个全屏的功能,我在网上找了一下这种全屏的方法,还真有,不过下载新版本的。尽量下载这个版本,最新版本可能会报错或者不成功。好像用的有些问题,版本降低到。原创 2022-07-26 20:54:48 · 1524 阅读 · 0 评论 -
vue项目 element表格数据行转列数据互转
后台返回的格式一个人名里面带有这个人的所有信息,我们需要数据转化(俗称行转列 ) 这个平时可以用在时间日期上比较多,这个案例只是把这个写法记录下来原创 2022-07-01 01:11:16 · 3169 阅读 · 0 评论 -
Promise 存在的意义:
Promise 存在的意义:异步问题同步化解决方案 只是顺便解决了回调地狱问题 <script> let p = new Promise((resolve, reject) => { setTimeout(() => { console.log('晚上好2'); }) }) p.then((res) => { console.log(res); }) console.原创 2021-12-17 00:31:08 · 267 阅读 · 0 评论 -
宏任务 微任务 同步任务 setTimeout,setInterval,promise.then和process.nextTick()的执行顺序。
1.关于javaScript的单线程:应用场景决定了javascript的单线程的特性,假如javascript是多线程,同时进行:一个线程对某一个dom进行添加属性操作,另一个线程对该线程进行删除操作,那么浏览器该听哪一个。这就决定javascript必须是单线程。web worker:是一个多线程。它出现的目的是当浏览器有大量密集的计算时候或者响应时间很长的运算时候,页面出现卡顿,可以起一个worker子线程,主线程和worker线程互不干预,这样页面就可以进行点击之类的操作,但这个子线程不能操作D原创 2021-10-20 17:37:27 · 1334 阅读 · 0 评论 -
js 手写call
js 手写call // call的实现原理 Function.prototype.mycall = function (ctx) { ctx = ctx || window // 有就用ctx 没有就用window ctx._F = this; // a._F = this (添加属性) ,this===b (this指向b) let arg = [...arguments].slice(1) // 截取参数 let res原创 2021-09-26 00:46:39 · 88 阅读 · 0 评论 -
vue 项目 下载图片地址 和图片名称
vue 项目 下载图片地址 和图片名称引入:import { downloadImage } from '@/utils/downloadImg'使用:downloadImage(imgurl, imgname)export const downloadImage = (imgsrc, name) => { // 下载图片地址和图片名 var image = new Image() image.setAttribute('crossOrigin', 'anonymous') ima原创 2021-09-16 10:16:59 · 781 阅读 · 0 评论 -
js 防抖 原理
一、在前端中有一些事件会频繁的触发容易造成页面卡顿,例如:window 的 resize、scrollmousedown、mousemovekeyup、keydowninput 的 input 事件二、防抖的原理答:不管触发多少次事件,都会等到事件触发 **n 秒后 **才会执行,如果在事件触发的 n 秒内 又触发了这个事件,那么就以新的事件的时间为准重新计算,总之,就是要等你触发事件 n 秒内 不再触发事件,我才会执行,一般用在用户表单输入实时搜索上// 第一版// 缺点:函数的 th原创 2021-09-14 17:52:13 · 5748 阅读 · 1 评论 -
call apply bind 用法 简单介绍
call apply bind 用法 简单介绍<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2021-09-10 23:13:34 · 72 阅读 · 0 评论 -
zepto源码注释
zepto源码注释 /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ; (function (undefined) { if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.trim = function () {原创 2021-09-09 01:37:10 · 122 阅读 · 0 评论 -
input输入框输入数值检测 只能输入数字 ,非数字离开输入框后会清除
input输入框输入数值检测 只能输入数字 ,非数字blur后会清除 // blur 事件 Blur(nums) { this.ruleForm.count = this.blurEvent(nums); }, // 修改事件 Input(val) { let num = this.changeEvent(val); this.ruleForm.count = num; }, // blurEvent(num原创 2021-09-07 09:50:16 · 682 阅读 · 0 评论 -
01. 你真的了解JS中的数据类型检测吗?
谈谈对js数据类型转化的看法转化类型的方法有typeof 底层是二进制直接在计算机底层基于数据类型的值(二进制)进行检测typeof null == ‘object’null的在计算机存储的二进制 000 ,对象储存在计算机中都是以000开头的二进制存储,null也是,所以检测出来结果是’object’typeof 普通对象/数组对象/正则对象/日期对象 都是 ‘object’instanceof 检测当前实例是否属于这个类的instanceof 为了解原创 2021-09-07 00:06:27 · 92 阅读 · 0 评论 -
只允许输入正常数字,过滤多个小数点和字符,去除第二个小数点
输入框输入数字过滤多个小数点,去除第二个小数点,获取正常数字使用场景:在input输入数字的时候,可以使用这个方法限制用户只能输入正常数字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-08-26 03:33:54 · 611 阅读 · 0 评论 -
【一听就懂】 堆栈是个啥?
【一听就懂】 堆栈是个啥?入栈: 没有数据的时候,栈顶和栈底是重合的,当需要存数据的时候,栈顶向上挪,把数据放在栈顶栈底之间-叫入栈(压栈)出栈: 当需要取数据的时候,把数据复制一份到cpu寄存器,把栈顶的数据向下挪 (出栈后数据已经被当作垃圾了)堆栈里面的数据能不能上下调换位置?不行,堆栈的数据,类比 弹夹,子弹相当于数据,一颗一颗子弹子弹压入弹夹,子弹先入后出,堆栈的数据不能上下调换位置。cpu执行过程cpu执行的过程就是把机器码拿过来分析出这句机器码是干嘛的,该计算的计算,该取数据的取数据原创 2021-07-05 23:53:29 · 373 阅读 · 0 评论 -
diff算法知多少
diff算法1.只比较同一层级,不跨级比较2.key相同:就认为是相同节点,继续深度比较,3.key不同:不继续深度比较4.比较签名:如果不同直接删除标签名,不会深度比较3.标签名相同:继续深度比较...原创 2021-04-27 20:38:13 · 518 阅读 · 0 评论 -
ES5 ES6 深拷贝
ES5 深拷贝<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-04-11 20:40:30 · 173 阅读 · 0 评论 -
经典面试题 函数柯里化
function adds(...args) { let nums = args.reduce((pre, cur) => pre + cur, 0) return function fn(...ar) { nums = nums + ar.reduce((pre, cur) => pre + cur, 0) adds = nums return fn } }; ad...原创 2021-04-06 20:01:52 · 215 阅读 · 0 评论 -
js reduce 将多维数组转化为一维
js reduce 将多维数组转化为一维 console.log('将多维数组转化为一维'); let moreArr = [[0, 1], [2, 3], [4, [5, 6, 7]]]; const newArr = function (val) { return val.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur), []); } console.log(newAr原创 2021-04-01 20:28:20 · 765 阅读 · 0 评论 -
js reduce 数组去重
js reduce 数组去重const quchong = [1, 2, 3, 4, 3, 1];const quchongnew = quchong.reduce((pre, cur) => { if (pre.includes(cur)) { return pre; } else { return pre.concat(cur) }}, [])console.log('quchongnew', quchongnew); // q原创 2021-04-01 20:25:55 · 279 阅读 · 0 评论 -
js reduce 计算数组中每个元素出现的次数
js reduce 计算数组中每个元素出现的次数console.log('计算数组中每个元素出现的次数');let names = ['小名', '小刘', '小赵', '小刘', '小名'];let nameTool = names.reduce((pre, cur) => { if (cur in pre) { pre[cur]++; } else { pre[cur] = 1 } return pre;}, {})co原创 2021-04-01 20:24:26 · 968 阅读 · 0 评论 -
js reduce 求数组对象属性求和
js reduce 求数组对象属性求和 console.log('求数组对象属性求和'); const arr6 = [{ x: 10 }, { x: 14 }, { x: 15 }, { x: 17 }, { x: 12 }, { x: 19 }]; const arr7 = arr6.reduce((c, R) => c + R.x, 0) console.log(arr7); console.log('求数组对象属性求和');// 87...原创 2021-04-01 20:22:43 · 7939 阅读 · 0 评论 -
JavaScript开发者应懂的33个概念
JavaScript开发者应懂的33个概念 简介这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。本篇文章是参照 @leonardomso 创立,英文版项目地址在这里。由于原版资源都要翻墙,所以本人创立一个中文版,附上关于这些概念在国内的一些文章和视频。若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除。更新若有觉得更好的文章或者视频,可以贡献出来,觉得有误...原创 2021-01-13 23:48:27 · 228 阅读 · 0 评论 -
2021 春季 前端最新面试题,js基础到js高阶 从容回答
2020回顾-个人web分享JavaScript面试题附加回答1. JavaScript垃圾回收机制的了解对于在JavaScript中的字符串,对象,数组是没有固定大小的,只有当对他们进行动态分配存储时,解释器就会分配内存来存储这些数据,当JavaScript的解释器消耗完系统中所有可用的内存时,就会造成系统崩溃。内存泄漏,在某些情况下,不再使用到的变量所占用内存没有及时释放,导致程序运行中,内存越占越大,极端情况下可以导致系统崩溃,服务器宕机。so,JavaScript有自己的一套垃圾回收机制原创 2021-01-06 18:21:31 · 3790 阅读 · 3 评论 -
js底层运行机制 代码演示 VO/GO
1.代码: <script> // -------111--------- var a = 12; var b = a; b = 13; console.log(a); // -------222--------- var a = { n: 12 }; var b = a; b['n'] = 13; console.log(a.n);原创 2020-07-01 01:06:16 · 934 阅读 · 0 评论 -
你知道 typeof null为什么是 object 吗?
typeof 运算符对基本数据类型的运算:typeof 'str' // 'string'typeof NaN // 'number'typeof 1 // 'number'typeof true // 'boolean'typeof undefined // 'undefined'typeof Symbol() // 'symbol'typeof null // 'object'null作为一个基本数据类型为什么会被typeof运算符识别为object类型呢?这是因为javascrip原创 2020-06-30 15:16:43 · 2157 阅读 · 0 评论 -
JS高级第一天:数据类型、继承、闭包、原型
JS高级第一天JS基本介绍JS的用途:Javascript可以实现浏览器端、服务器端(nodejs)。。。浏览器端JS由以下三个部分组成:ECMAScript:基础语法(数据类型、运算符、函数。。。)BOM(浏览器对象模型):window、location、history、navigator。。。DOM(文档对象模型):div、p、span。。。ECMAScript又名es,...原创 2020-06-11 17:50:35 · 169 阅读 · 0 评论