![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 58
贱贱Chan
这个作者很懒,什么都没留下…
展开
-
react/typescript小结
react/typescript小结原创 2023-07-03 23:26:52 · 1210 阅读 · 0 评论 -
React hooks之useCallback的使用与性能分析
React hooks之useCallback的使用与性能分析原创 2023-07-03 23:23:49 · 7072 阅读 · 0 评论 -
React hooks之useEffect、useMemo优化技巧
React hooks之useEffect、useMemo优化技巧原创 2023-07-03 23:06:44 · 1014 阅读 · 0 评论 -
TS可选链原理分析
typescript可选链原创 2023-07-03 22:58:30 · 217 阅读 · 0 评论 -
前端算法-数组篇(四)-序数组的平方
那么数组平方的最大值就在数组的两端,不是最左边就是最右边,不可能是中间。定义一个新数组result,和A数组一样的大小,让k指向result数组终止位置。如果A[i] * A[i] >= A[j] * A[j] 那么result[k–] = A[i] * A[i];给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求也按 非递减顺序 排序。如果A[i] * A[i] < A[j] * A[j] 那么result[k–] = A[j] * A[j];原创 2023-03-29 22:30:18 · 88 阅读 · 0 评论 -
前端算法-数组篇(三)-移除元素
给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度。不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原地 修改输入数组。元素的顺序可以改变。你不需要考虑数组中超出新长度后面的元素。两层for循环,一个for循环遍历数组元素 ,第二个for循环更新数组。时间复杂度是O(n^2)。时间复杂度:O(n),空间复杂度:O(1)原创 2023-03-28 21:48:08 · 180 阅读 · 0 评论 -
前端算法-数组篇(二)-二分查找
给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1。二分法,区间的定义一般为两种,左闭右闭即[left, right],或者左闭右开即[left, right)。原创 2023-02-25 17:27:57 · 120 阅读 · 0 评论 -
前端算法-数组篇(一)
数组是存放在连续内存空间上的相同类型数据的集合。数组下标都是从0开始的。数组内存空间的地址是连续的因为数组的在内存空间的地址是连续的,所以我们在删除或者增添元素的时候,就难免要移动其他元素的地址。数组的元素是不能删的,只能覆盖。注:因为JS数组可以存储类型完全不一样的数据,这就意味着,JS 数组中内存地址不是连续的。不过,现在的 JS 引擎为了优化 JS 的性能,它会分配一个连续的内存空间给存储了相同数据类型的数组,以达到更好的遍历效果。原创 2023-02-25 16:56:10 · 64 阅读 · 0 评论 -
leetcode-快排找第K大元素(JS)
快速排序,找到第 K 个最大元素每进行一次快速排序的 partFun操作,就能找到这次我们选中的基准值排序之后的正确位置。如果它的位置刚好是排序之后第 K 个最大元素的位置,即 length - k,我们直接得到了答案;因为进行 partition 操作之后,位于基准值之前的元素都要小于基准值,位于基准值之后的元素都要大于等于基准值。如果它的位置小于排序之后第 K 个最大元素的位置,我们就去它之后寻找第 K 个最大元素;如果它的位置大于排序之后第 K 个最大元素的位置,我们就去它之前寻找第 K原创 2022-03-31 21:42:20 · 295 阅读 · 0 评论 -
JS中Map的遍历
1.forEach遍历const map = new Map([['key1','v1'],['key2','v2'],['key3','v3']]);console.log(map);map.forEach((val,key) => { console.log(val,key);})/**v1 key1v2 key2v3 key3 */先输出value,再输出keyfor…of…for(let i of map) { console.log(i);}/**[原创 2022-03-28 14:44:36 · 18604 阅读 · 1 评论 -
双飞燕布局、圣杯布局、flex布局实现三列布局(两边固定中间自适应)
1.圣杯布局主要:浮动 + margin-left + 相对定位写一个大容器container,里面包含了middle,left和right,middle放在前面container下面的三个容器浮动,且写上高度200px给middle宽度写上100%,此时left和right被挤到第二行,给left,right设置宽度200px给left的margin-left设置为-100%,此时left回到第一行左边,right回到第二行左边给right的margin-right设置-200px,此时ri原创 2022-02-28 18:10:51 · 3290 阅读 · 0 评论 -
JS常见类型和判断
JS常见类型和判断1.常见的7种类型1.null2.undefined3.boolean4.number5.string6.引用类型7.symbol2.判断相等1.typeof(两个特殊)console.log(typeof null); //objectconsole.log(typeof []); //object2.instanceof(只适合判断object类型)const a1 = [];const a2 = function() {}c原创 2022-02-20 22:14:28 · 301 阅读 · 0 评论 -
JS事件循环
概括javaScript是单线程的,在执行代码时只能按顺序执行,为了解决代码执行时的阻塞,所以js是异步的,比如在遇到setTimeout时,不会定时器内容执行过后,再去执行之后的代码,而是先执行代码,等时间到后再去执行定时器。基于这种异步的机制,javaScript有着一套自己执行代码的规则,来保证代码能够高效无阻塞的运行,这种规则就是事件循环。node和浏览器都给js提供了运行的环境,但是二者的运行机制是稍有差异的。浏览器:执行代码时,会产生执行上下文,包括作用域、当前作用域中的变量、上层作用原创 2022-02-20 22:12:00 · 148 阅读 · 0 评论 -
JSthis指向问题大全(普通函数,箭头函数,匿名函数)
结论普通函数中this指向函数的对象箭头函数中的this指向该函数所在作用域指向的对象关于作用域是什么,可以自行Google一下,后面会用例子说明1.普通函数代码:function test(){ var a = 1; console.log(this.a);}test(); //undefined由于test函数是直接在外层函数运行的,所以test是被window对象调用的,所以这里的 this.a 对应的应该是全局变量而不是test函数里的局部变量,故输出unde原创 2022-02-11 20:05:09 · 1073 阅读 · 0 评论 -
前端截取视频第一帧作为封面
概述1.做项目的时候突然想截取视频第一帧,作为视频的封面,然后搜了很多博客都发现得到空白的图片,最后得到了解决。2.方法:通过创建canvas标签,利用其drawImage() 方法在画布上绘制该视频,然后运用toDataURL方法转换canvas上的图片为base64格式,并将base64格式的图片作为video标签的poster属性。3.浏览器:chrome代码关键video.currentTime = 1 currentTime 属性设置或返回视频播放的当前位置(以秒计)。当设置该属性时原创 2022-01-30 13:15:37 · 6914 阅读 · 0 评论 -
JS位运算与加减法
JS位运算与加减法原创 2021-12-14 21:31:57 · 1260 阅读 · 0 评论 -
[已解决]webpack 5以上版本使用webpack-dev-server时报错
在webpack5以上版本使用webpack-dev-server时报错1.报错运行npm run dev时报错Error: Cannot find module 'webpack-cli/bin/config-yargs'2.原因分析webpack-cli的新版本对webpack-dev-server版本的不兼容查看版本这里webpack和webpack-cli的版本都过高了3.解决办法3.1后退webpack-cli版本(较麻烦没验证过)后退到3.3.12,即先uninstall原创 2021-08-13 21:29:33 · 817 阅读 · 0 评论 -
JS数组常用的方法shift,unshift,splice,split,slice
JS数组常用的方法1.pushpush() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。2.poppop() 方法用于删除并返回数组的最后一个元素。3.shiftshift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。4.unshiftunshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。5.sortsort() 方法用于对数组的元素进行排序。6.reverereverse() 方法用于颠倒数组中元素的顺序。1到6代码演示原创 2021-08-11 21:47:42 · 8286 阅读 · 0 评论 -
细谈text-align: center
text-align: center的几个用处1.概括CSS参考手册上关于text-align:center的说明是text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。...原创 2020-11-26 21:57:57 · 16721 阅读 · 6 评论 -
[Vue]分别原生JS和Vue实现计数器功能
题目用vue实现计数器功能,其中vue实现的代码黑马程序员vue教程给出,这里对其CSS代码进行了注释,并且用原生JS重新实现了一次。效果不能大于10不能小于0vue实现实现步骤确定el挂载点(id = "app"的div)data中定义数据(num,min,max)methods添加两个方法sub(-)和add(+)使用v-text将num设置给span标签使用v-on分别将sub和add绑定给-和+设置num的范围,即min = 0,max=10<!DOCTYPE原创 2020-11-06 20:09:13 · 379 阅读 · 0 评论 -
CSS让元素置于容器底部
CSS让元素置于容器底部回顾之前回顾已经描述了如何让 CSS在不影响总体布局情况下让元素自由缩小效果如图所示此时代码如下<body> <div class="box1">box1box1</div> <div class="box_0"> <!--class = "box_0的外层盒子"--> <div class="box2">box2box2</div>原创 2020-10-06 21:07:44 · 7744 阅读 · 2 评论 -
CSS在不影响总体布局情况下让元素自由缩小
CSS在不影响总体布局情况下让元素自由缩小开始状态<body> <div class="box1">box1box1</div> <div class="box2">box2box2</div> <div class="box3">box3box3</div> <div class="box4">box4box4</div> <div class="b原创 2020-10-06 20:38:41 · 1067 阅读 · 1 评论