自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

qq_63299825的博客

分享前端知识

  • 博客(42)
  • 收藏
  • 关注

原创 面试手写第六期

【代码】面试手写第六期。

2024-02-04 10:44:05 396 7

原创 面试手写第五期

【代码】面试手写第五期。

2024-02-02 10:46:40 426 5

原创 面试手写第四期. lodash相关方法

【代码】面试手写第四期. lodash相关方法。

2024-02-01 11:12:12 430

原创 面试手写第三期

【代码】面试手写第三期。

2024-01-31 15:26:01 468

原创 面试手写第二期 Promsie相关

【代码】面试手写第二期 Promsie相关。

2024-01-31 15:03:09 699 21

原创 面试手写第一期

深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象,是“值”而不是“引用”(不是分支), 拷贝第一层级的对象属性或数组元素,如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存(分支)浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。

2024-01-29 15:03:07 953

原创 前端高频面试题 js中堆和栈的区别和浏览器的垃圾回收机制

是栈内存的简称,栈是自动分配相对固定大小的内存空间,并由系统自动释放,栈数据结构遵循FILO(first in last out)先进后出的原则,较为经典的就是乒乓球盒结构,先放进去的乒乓球只能最后取出来。:是堆内存的简称,堆是动态分配内存,内存大小不固定,也不会自动释放,堆数据结构是一种无序的树状结构,同时它还满足key-value键值对的存储方式;我们只用知道key名,就能通过key查找到对应的value。比较经典的就是书架存书的例子,我们知道书名,就可以找到对应的书籍。

2023-08-26 21:10:19 10516 146

原创 CSS 两栏布局和三栏布局的实现

块格式化上下文(Block Formatting Context, BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。●Formatting context: 块级上下文格式化,它是页面中的一块渲染区域,并且有一 套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。●BFC是独立的容器,容器内部元素不会影响外部元素●每个元素的左margin值和容器的左border相接触。●计算BFC的高度时,需要计算浮动元素的高度。

2023-08-15 22:24:54 2019 44

原创 JavaScript 手写代码 第七期(重写数组方法三) 用于遍历的方法

我们在日常开发过程中,往往都是取出来直接用,从来不思考代码的底层实现逻辑,但当我开始研究一些底层的东西的时候,才开始理解了JavaScript每个方法和函数的底层实现思路,我认为这可以很好的提高我们的代码水平和逻辑思维。方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。,新数组中的元素是通过检查指定数组中符合条件的所有元素。,数组中的元素为原始数组元素调用函数处理后的值。,且剩余的元素不会再进行检测。

2023-06-28 23:06:28 1491 81

原创 JavaScript 手写代码 第六期(重写数组方法二)不改变原数组的方法

该参数是数组片断结束处的数组下标。我们在日常开发过程中,往往都是取出来直接用,从来不思考代码的底层实现逻辑,但当我开始研究一些底层的东西的时候,才开始理解了JavaScript每个方法和函数的底层实现思路,我认为这可以很好的提高我们的代码水平和逻辑思维。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。includes()方法返回的是一个布尔值,如果指定的元素存在于数组中,则返回true,否则返回false。

2023-06-26 22:28:35 711 76

原创 JavaScript 手写代码 第五期(重写数组方法一)-可以改变原数组的方法

我们在日常开发过程中,往往都是取出来直接用,从来不思考代码的底层实现逻辑,但当我开始研究一些底层的东西的时候,才开始理解了JavaScript每个方法和函数的底层实现思路,我认为这可以很好的提高我们的代码水平和逻辑思维。传入三个参数 index howmany 其他参数,从索引0开始删除2个元素,并用后面的参数替换。删除数组的最后一位元素,返回被删除的那个元素。从数组中删除第一个元素,并返回该元素的值。将一个或多个元素添加到数组的开头,并返回该数组的新长度。sort() 方法用于对数组的元素进行排序。

2023-06-25 19:29:28 1728 68

原创 JavaScript 手写代码 第四期

我们在日常开发过程中,往往都是取出来直接用,从来不思考代码的底层实现逻辑,但当我开始研究一些底层的东西的时候,才开始理解了JavaScript每个方法和函数的底层实现思路,我认为这可以很好的提高我们的代码水平和逻辑思维。只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。具体思路就是遍历数组arr,只要没有完全拍平,就一直进行扁平化操作。将数组扁平化处理,返回一个新数组,对原数据没有影响。简单来说,就是将多维数组转换为一维数组。

2023-06-24 08:58:59 4674 115

原创 JavaScript 手写代码 第三期

我们在日常开发过程中,往往都是取出来直接用,从来不思考代码的底层实现逻辑,但当我开始研究一些底层的东西的时候,才开始理解了JavaScript每个方法和函数的底层实现思路,我认为这可以很好的提高我们的代码水平和逻辑思维。sources 里面的对象属性,依次添加到 目标对象上,遇到相同的属性,目标对象的属性值直接被覆盖,最后返回目标对象合并后的值,并且 目标对象的值 也会被改变。注意:如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。细心的大家可以发现,目标对象里面的值被源对象里面的值覆盖了。

2023-06-24 08:25:12 1701 59

原创 JavaScript 手写代码 第二期

每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString() 方法被每个 Object对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 “[object type]”,其中 type 是对象的类型。Object.prototype.toString()方法的简单使用。

2023-06-23 00:44:34 876 18

原创 JavaScript 手写代码 第一期

静态方法以一个现有对象作为原型,创建一个新对象。

2023-06-22 20:19:55 1888 51

原创 Vue 利用Canvas标签实现动态验证码校验(前端必备附源码)

当我们在平时进行登录或者注册账号的时候,往往都会遇到验证动态验证码的情况,当然现在更流行的是一些滑动拼图或者是文字点选,下面我将介绍以下我实现动态验证码的思路。HTML5新增的元素,通过使用脚本语言(JS)来在特定的区域绘制图形,可以制作照片集和简单的动画,也可以处理和渲染视频。

2023-06-13 17:40:44 2258 31

原创 JS reduce方法对后台数据的处理案例(秒解决)

在我们项目开发阶段,当后端传回来的数据不太理想或者不好直接使用的话,那么此时我们就必须对数据进行处理,这次我就遇到了一种情况,当后端返回如下格式的数据,我们要对其进行分组处理。如果我没没有很好的处理方法的话,我相信这是非常消耗时间的,如果我们有所谓的“巧方法”,那么这些问题就不会再难到我们。

2023-06-11 10:02:46 2166 8

原创 CSS3 如何实现飘动的云朵动画

过渡动画是两个状态间的变化,帧动画可以处理动画过程中不同时间的细节变化,不过对过渡动画理解后再不习帧动画会非常容易,也可以把帧动画理解为多个帧之间的过渡动画。

2023-06-10 14:12:10 3993 11

原创 JS 怎么理解ES6新增Set、Map两种数据结构?

Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构什么是集合?什么又是字典?集合是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合字典是一些元素的集合。每个元素有一个称作key 的域,不同元素的key 各不相同区别?共同点:集合、字典都可以存储不重复的值不同点:集合是以[值,值]的形式存储元素,字典是以[键,值]的形式存储下面对这两种数据结构进行详解用于存储任何类型的唯一值,无论是基本类型还是对象引用。

2023-06-09 20:33:44 2773 8

原创 JS 你一定不知道的 改变数组相邻次序的“巧方法”

今天在项目中遇到了一个需求就是通过点击 这两个上移和下移的 箭头实现内容的上移和下移,实际就是 调用函数改变了他们在数组中的次序。由需求可以知道,改变的 数组中紧邻的值在数组中的的次序。

2023-06-08 16:21:08 1905 7

原创 Vue 富文本编辑器tinymce的安装教程(前端必备小知识)

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,并且功能配置灵活简单。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是PHP,那还可以进一步优化。最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。

2023-06-07 20:07:28 12002 13

原创 面试官: JavaScript如何实现继承?

可以用一张图来总结开发人员认为寄生组合式继承是最理想的继承方式欢迎大家评论区讨论,一起学习。

2023-06-06 17:29:54 1883 6

原创 面试官: 谈谈你对BFC的理解以及外边距合并的问题

BFC(Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则,1.内部的盒子会在垂直方向上一个接一个的放置2.对于同一个BFC的俩个相邻的盒子的margin会发生重叠,与方向无关。3.每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此4.BFC的区域不会与float的元素区域重叠5.计算BFC的高度时,浮动子元素也参与计算。

2023-06-05 20:14:58 1544 4

原创 JS 清空数组的几种方法

当length属性的值小于数组本身的长度,数组中后面的元素将被截断;表示删除从i下标开始(包括i下标)后面的全部值,当i为负值时从后面开始计数,-1代表数组的最后一项,一次类推。,根据参数个数和形式的不同,可以在数组中删除指定元素或者插入元素、替换元素,原数组会发生改变。后面的参数value1,value2,value3的值。表示删除从下标 i 开始(包括i下标)后面的 num 个数,改变原数组。表示删除从下标 i 开始(包括i下标)后面的 num 个数。删除数组的全部值达到 数组清空的目的。

2023-06-05 16:55:03 3240 3

原创 JS 数组去重的几种方法

在我们项目开发,我们拿到从后端请求回来的数据时,往往需要对数组进行处理,有时候我们需要将前端的数据进行去重后再发送给后端,也有可能我们拿到后端传回来的数据,需要我们去重以后再使用以上便是我知道的数组去重的几种比较常见的方法,set去重方法还是比较简单方便。大家可以在评论区进行讨论,一起学习。

2023-06-05 09:47:03 1576 3

原创 CSS 盒子垂直居中的方法

在日常开发网站界面或者是App。小程序过程中,都会遇到将盒子水平垂直居中的需求。不同的需求需要我们采取不同的方法进行元素的水平垂直居中。

2023-06-04 12:13:30 2259

原创 CSS中有哪些隐藏页面元素的方法?

在我们进行项目开发阶段,肯定会遇到很多需要隐藏元素的需求,并且每次遇到的需求都限制了我们需要特定的方法去隐藏元素。如消消乐游戏中,当我们消除成功后,我们就不能使用display:none去隐藏元素。这样会导致后面的元素重新计算元素的位置,使位置发生错乱,这时我们就应该使用 visibility:hidden 来实现该效果。

2023-06-03 17:56:54 2459 9

原创 JS 浅拷贝和深拷贝详解(巨详细)

浅拷贝,指的是创建新的数据,这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型,拷贝的就是基本类型的值。如果属性是引用类型,拷贝的就是内存地址即浅拷贝是拷贝一层,深层次的引用类型则共享内存地址深拷贝开辟一个新的栈,两个对象属性完成相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

2023-06-02 16:06:52 4166 5

原创 JavaScript Date对象详解 以及 时间戳和时间的相互转换

创建 Date 对象: new Date() 以下四种方法同样可以创建 Date 对象: var d = new Date();(6)getMinutes() 返回Date对象的月份(0-11)因为月份返回0-11,因此一般获取月份都要 + 1。(5)getMillseconds() 返回Date对象的毫秒数(0-999)(7)getSeconds() 返回Date对象的秒数(0-59)(4)getHours() 返回Date对象的小时(0-23)(2)getDay() 返回一周中的某一天(0-6)

2023-06-02 10:53:15 3948

原创 经典面试题:如何使用CSS画一个三角形?

在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮。

2023-06-02 08:50:34 1487

原创 JS 原生手写轮播图

只是实现了原生JS实现轮播图的逻辑和具体实现代码,css样式并未进行美化。

2023-05-29 10:21:10 1340 2

原创 JS 谈谈你对闭包的理解

防抖函数 https://mp.csdn.net/mp_blog/creation/editor/130862307。定义行为,然后把它关联到某个用户事件上(点击或者按键)。代码通常会作为一个回调(事件触发时调用的函数)绑定到事件。把接受多个参数的函数转换成接受一个单一参数的函数, 当多个参数中 有参数相等时,就实现了闭包和重用的效果。中,每当创建一个函数,闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥梁。闭包就是在一个内层函数中访问到其外层函数的作用域。

2023-05-27 18:37:51 2154 5

原创 JS 原生实现Tab栏的切换

原生实现tab栏的简易切换

2023-05-26 15:57:06 1590 2

原创 JS 清除定时器timer的两种方法

只是将定时器关闭,这里的clearTimeout只是将定时器关闭,然后下面会重新开启定时器,但timer变量本身还存在,也就是当判断 if(timer) 时为真。timer会被系统的垃圾回收机制回收, 无法再重新启动定时器,就是当判断 if(timer) 为假。所以当我们清除定时器时,可以先判断是否需要通过判断 if(timer) 来决定用哪个方法清除定时器。代码示例,防抖函数的应用。代码示例:节流函数的应用。

2023-05-25 18:07:59 4781 3

原创 JS 节流函数的实现

限制一个函数在一定时间内只能执行一次我自己的理解: 节流函数就是 在规定时间内 不管触发几次该事件,都只执行第一次,第一次触发事件等待delay后,事件执行。timer置为null,再次循环。

2023-05-25 17:26:52 3228 4

原创 JS防抖函数的实现(巨详细,秒懂)

在一定的时间间隔内,如果没有再次触发该函数,那么才会去执行函数体内的代码(例如发送网络请求)。

2023-05-25 11:35:53 8025 8

原创 JS 手写实现call,apply方法

大概思路就是将 你要调用的方法 添加为对象里面的属性方法,这样就改变了方法里面的htis指向obj,然后调用该对象里面的方法,调用完成后,再将对象里面的此方法删除delete,将调用的结果返回。

2023-05-23 14:46:07 1572 1

原创 JS new操作符的具体干了什么?

4.根据构建函数返回类型作判断,如果是原始值则被忽略,如果是返回对象,需要正常处理。3.将构造函数中的this绑定到新建的对象obj上。2.将对象和构造函数通过原型链连接起来。1.创建了一个空的对象obj。

2023-05-23 11:01:58 1315 2

原创 JS严格模式详解

严格模式是在 ECMAScript5(ES5)中引入的,在严格模式下,JavaScript 对语法的要求会更加严格,一些在正常模式下能够运行的代码,在严格模式下将不能运行。

2023-05-23 09:22:37 1035 2

原创 axios的二次封装

相当于配置 /api 就是 下面接口的访问路径 http://ceshi13.dishait.cn。至此就实现了axios的二次封装,并且解决了跨域的问题,更详细的请参考axios官方文档。起步 | Axios 中文文档 | Axios 中文网。最终请求到的数据如下。

2023-04-24 21:36:20 3434 1

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除