- 博客(64)
- 收藏
- 关注
RSS订阅原创 JS对闭包的理解
调用上下文是调用这个本地的执行上下文，它可以是全局执行上下文，也可以是另外一个本地的执行上下文。在全局作用域时将函数声明并赋值给一个变量的时候也会产生闭包，但该闭包是在全局作用域当中产生的，所以它可以访问全局变量，所以在全局作用域中闭包的概念并不重要。当代码执行到函数时，会创建一个新的执行上下文，称之为本地上下文或函数上下文，这个本地执行上下文将有它自己的一组变量，这些变量将是这个执行上下文的本地变量。本质就是上级作用域内变量的生命周期，因为被下级作用域内引用，而没有被释放。这个本地执行上下文被销毁，...
2022-08-17 22:08:57
544
原创 伪类与伪元素的区别
伪类类似于CSS类选择器，其实还是选择了某个元素，用于改变该元素的样式，通常是元素处于某种状态时（滑动、点击等）为其添加对应的样式。插入的位置是 父元素内部的最前面或者最后面，插入的元素是行内元素，宽高不起作用，想设置宽高需要先display转一下。用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的。概念：在指定元素的前面或后面插入内容，新增的内容在原代码中的DOM结构中是不存在的。::before 和 ::after 必须有 content 属性。...
2022-08-14 18:32:16
310
原创 CSS BFC介绍
可以使俩个发生margin重叠的元素中的其中一个触发BFC，以解决俩个元素外边距塌陷的问题。是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。可以通过让父元素触发BFC使父元素依然可以自动计算高度。给元素设置浮动后，该元素拖标，会影响其后面的元素布局。可以使浮动的元素触发BFC，清除掉浮动对布局的影响。BFC名为 "块级格式化上下文"，简单来说就是，的两个相邻的标签外边距也会发生重叠。...
2022-08-14 18:08:10
367
原创 CSS标准盒模型和怪异盒模型区别
3.当怪异盒模型的宽高确认时，给怪异盒模型添加内边距和边框，怪异盒模型的宽高不会改变，而是通过向内压缩，挤压 content 内容的宽高实现。即外边距，边框，内边距，内容。2.怪异盒模型在计算宽高时包含 conntent 内容、padding内边距、border边框的宽高。2.标准盒模型在计算宽高的时候只计算 content 内容的宽高，不包含内外边距以及边框的宽高。3.当标准盒模型的宽高确认时，增加内外边距和边框会撑大原盒子。表示IE盒模型（怪异盒模型）表示标准盒模型（默认值）...
2022-08-14 16:29:36
1511
原创 Vue3中通过 input 标签 发送文件/图片给后端
获取 input 节点的 files 属性以及上传文件/图片的业务逻辑与请求发送都放在了 input 事件回调函数中进行。通过 FormData 实例对象处理 二进制 文件/图片（以下代码展示上传一张图片）。元素身上存在一个 files 属性，其中包含了所有已选择的文件，1.将 input 标签的 type 属性设置为 file。的方式上传到服务器上，或者通过 Javascript 的。2.绑定 ref 绑定并获取该标签的DOM节点。3.绑定事件，处理文件/图片上传的后续逻辑。设置 input 标签。...
2022-08-13 15:52:52
9204
原创 HTTPS内容详解（图解HTTP协议）
与SSL组合使用的HTTP被称为HTTPSHTTP+加密+认证（证书）+完整性保护=HTTPS通常，HTTP直接和TCP通信。当使用SSL时，则演变成先和SSL通信，再由SSL和TCP通信了。
2022-07-29 14:59:15
366
原创 HTTP缓存：强制缓存与协商缓存
强制缓存协商缓存。强制缓存由，Exipres（HTTP1.0）控制。浏览器直接读本地缓存，不会再跟服务器端交互，状态码200。协商缓存由/，Etag/实现，每次请求需要让服务器判断一下资源是否更新过，从而决定浏览器是否使用缓存，如果是，则返回304，否则重新完整响应。HTTP缓存-掘金(juejin.cn)......
2022-07-26 22:48:19
1566
原创 JS闭包详解
调用fn函数的打印值为a1打印的是函数定义时所在作用域中变量a的值，即自由变量a是在函数定义的地方进行变量查找，而不是函数执行的地方查找。通过函数作为返回值的形式，在全局变量中访问到了函数内部的变量，构成了闭包。创建私有变量，只能在当前作用域访问和改变，防止外部改变该变量。闭包体现定义函数fn时，与周围环境a=2进行绑定。闭包一个函数和它的周围状态的引用捆绑在一起的组合。通过调用test函数打印结果a2；...
2022-07-22 17:38:28
158
原创 JS作用域和自由变量
ES6中let和const关键字所声明的变量具有块级作用域，块级作用域为一个大括号所包裹的区域，在该大括号中声明的变量只能在该大括号（块级作用域）中访问。由多级作用域连续引用形成的链式结果，当访问某一个变量时，会在当前作用域中查找该变量，如果没有找到就向该变量的父级（上一层）作用域去寻找，以此形成了查找作用域链。总结子作用域可以访问父作用域中声明的变量，但是父作用域不能访问子作用域中声明的变量。变量在函数内声明，变量为局部变量，具有局部作用域。凡是跨了自己的作用域的变量都叫自由变量。...
2022-07-22 17:17:32
228
原创 JS 原型模式、原型、原型链
原型模式（PrototypePattern）是用于创建重复的对象，同时又能保证性能。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。这种模式是实现了一个原型接口，该接口用于创建当前对象的克隆。当直接创建对象的代价比较大时，则采用这种模式。传统的原型模式就是克隆，但这在JS中并不常用。但JS对象本身就是基于原型的，原型和原型链是非常重要的概念。所以在前端关于原型模式的学习中优先重点掌握JS原型链相关的知识。...
2022-07-16 21:49:05
147
原创 迭代器模式（TS）
提供一种方法顺序访问一个聚合对象中各个元素,而又无须暴露该对象的内部表示（被遍历对象的长度，内部数据结构，元素下标等）。不同的方式来遍历整个整合对象。遍历一个聚合对象。用于顺序访问集合对象的元素，不需要知道集合对象的底层表示。把在元素之间游走的责任交给迭代器，而不是聚合对象。定义接口。...
2022-07-15 19:04:50
1027
原创 前端-观察者模式和发布订阅模式
当对象间存在一对多关系时，则使用观察者模式（ObserverPattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。//定义一家猎人工会。.....
2022-07-15 10:02:35
664
原创 前端---单例模式 （TS）
这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。1、单例类只能有一个实例。2、单例类必须自己创建自己的唯一实例。3、单例类必须给所有其他对象提供这一实例。保证一个类仅有一个实例，并提供一个访问它的全局访问点。一个全局使用的类频繁地创建与销毁。当您想控制实例数目，节省系统资源的时候。判断系统是否已经有这个单例，如果有则返回，如果没有则创建。构造函数是私有的。前端使用单例模式的场景1.登录框和
2022-07-14 16:58:15
2966
原创 前端---工厂模式（TS）
在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。定义一个创建对象的接口，让其子类自己决定实例化哪一个工厂类，工厂模式使其创建过程延迟到子类进行。主要解决接口选择的问题。我们明确地计划不同条件下创建不同实例时。让其子类实现工厂接口，返回的也是一个抽象的产品。创建（实例化）过程在其子类执行。1、一个调用者想创建一个对象，只要知道其名称就可以了。 2、扩展性高，如果想增加一个产品，只要扩展一个工厂类就可以。 3、屏蔽产品的具体实现，调用者只关心产品的接口。
2022-07-14 16:50:18
1680
1
原创 JS 中序遍历+后序遍历构建二叉树
106. 从中序与后序遍历序列构造二叉树 - 力扣（LeetCode）递归的四大要素：确认递归函数的参数，递归函数单层循环的处理逻辑，递归函数的返回值，递归结束条件；后序遍历根结点最后被访问，所以后序遍历顺序的末尾结点为整棵树的根结点，在中序遍历中找到该结点的位置，根据该位置对中序数组和后续数组进行切割，重新切割为左数组和右数组。注意：中序数组切割的左右数组的大小 与 后续数组切割的数组大小是相同的，后续数组只需要跟着中序数组切割左右数组的长度进行切割就好。切割的时候要注意 后续遍历末尾元素是已经被使用了的
2022-07-13 10:31:26
317
原创 JS中break、continue、return跳出循环的用法和区别
作用： 立刻退出包含在最内层的循环或者退出一个 语句。使用特点：例：二、continue作用： 语句和 语句相似，不同的是， 不退出循环，只跳过当前循环。使用特点：例： 以下循环只跳过了 时的这一次迭代。三、return作用： 用于返回函数的返回值，因此 语句只能出现在函数体内，否则会报错： 。使用特点：例1： 在 中当执行到 ，会退出循环。例2： 在 循环中只跳过了 时的这一次迭代转载：JS中break、continue、return跳出循环的用法和区别
2022-07-12 11:21:34
560
原创 Session认证机制与JWT认证机制
身份认证（Authentication）又称“身份验证”、“鉴权”，是指通过一定的手段，完成对用户身份的确认。身份认证的目的，是为了确认当前所声称为某种身份的用户，确实是所声称的用户。例如，你去找快递员取快递，你要怎么证明这份快递是你的。HTTP 协议的无状态性，指的是客户端的每次 HTTP 请求都是独立的，连续多个请求之间没有直接的关系，服务器不会主动保留每次 HTTP 请求的状态。2.1 什么是 CookieCookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称（Name）、一
2022-07-11 22:18:58
392
原创 力扣235和236 二叉树的最近公共祖先问题
236. 二叉树的最近公共祖先 - 力扣（LeetCode） 235. 二叉搜索树的最近公共祖先 - 力扣（LeetCode）
2022-06-29 21:38:36
196
原创 力扣501 二叉搜索树中的众数
501. 二叉搜索树中的众数 - 力扣（LeetCode）中序遍历二叉搜索树是有序序列；根据中序遍历二叉搜索树是有序序列这一特点，设置频率变量 count ，最大频率变量 maxCount，存储上一个结点值变量 temp 来进行当前结点值出现的频率以及是否需要推入结果数组当中。如果上一个结点与当前结点值相同，则该结点的频率 + 1；遍历每一个结点都把当前结点出现的频率与最大频率进行比较，若某一个结点出现的频率大于最大频率了，最大频率就要被替换，由于最大频率被替换了，所以之前结果数组当中记录的值也都要清空并重
2022-06-28 14:17:44
344
原创 jsonp解决跨域请求---nodejs写后端
JSONP是前端动态创建 script 标签并添加到页面当中，利用 script 标签的 src 属性不受同源策略限制，向后端请求跨域资源。需要前后端的配合，前后端协商好一个函数名，发送JSONP跨域请求后，后端返回一个由该函数名命名的函数，函数返回值为后端传给前端的数据，前端在 script 标签中去调用这个函数，拿到函数返回值，即 后端传给前端的数据。也可以灵活的一些，仅有前端单方面决定函数名：前端在通过 script 的 src 属性发送跨域请求时，携带一个和后端商量好的参数，参数名为想要定义的函数名
2022-06-24 23:38:12
468
原创 力扣93-复原IP地址
这道题本质是在分隔字符串，需要把给定的字符串分割成四个部分，每个部分满足IP地址的条件就是正确的IP地址，分割的题用回溯解决。这道题难点在于判断情况比普通回溯题的情况要复杂一些，比如有很多种情况让程序回溯回去，而不只是一俩个确定的不满足条件。首先根据题目描述，一个正确的IP地址由四个IP分段组成，每个IP分段有数字大小和格式的限制，观察发现每个IP分段最多由三位数构成，最少由一位数构成，四个IP分段必须都是这个标准，由此可以得出判断IP地址是否正确的条件。如果满足正确IP地址条件，就推入准备好的 res 结
2022-06-23 21:13:18
185
原创 希尔排序---JS实现详解
将无序数组分割成若干子序列，子序列不是逐段分割的，而是相隔特定增量的子序列，对各个子序列进行插入排序，然后再选择一个更小的增量，再将之前排序后的数组按这个增量分割成多个子序列，...,不断选择更小增量，直到增量为1时，再对序列进行一次插入排序，使序列最终成为有序序列，排序完成。所以关键是确认一个有规律的逐渐递减的增量，这里的首选增量为n/2,每次增量为原先的1/2,直到增量为1 从增量开始，减去增量本身，得到的就是与该元素相差增量个的前一个元素增量依次递增，每次减去增量本身，就依次得到了与该元素相差增量个
2022-06-21 14:37:10
533
原创 折半插入排序算法---JS实现详解
折半插入排序是插入排序的一种，因为从被排序数组的第二个元素位置开始，每一次循环结束前部分数组都是保持有序的。而二分搜索算法的前提就是数组有序，所以可以利用二分搜索算法查找要将元素插入到前部分有序数组的哪个位置，进而提高效率。...
2022-06-20 23:46:46
256
原创 JS 创建并初始化数组的各种方法与坑
刷力扣买卖股票系列问题时在创建与初始化数组上遇到了很多自己不知道的知识点，写篇博客记录一下。// 含义：创建一个三个坑位的数组，每个坑位又初始化为一个二维数组// 注意：fill方法如果填充的是复杂数据类型的数据（对象和数组）那么所有被填充项引用的都是同一个对象而不是对象的拷贝,也就是说改变一个另外的都会跟着变// 解决方法：// 想要修改数组的时候要单独的替换整个数组需要用双重 for 循环进行初始化4.利用数组的map方法快速生成二维数组。注意：在这个方法中，不能将删除，因为
2022-06-19 22:06:48
5239
原创 回溯算法总结---子集组合类问题
DFS 是一个劲的往某一个方向搜索，而回溯算法建立在 DFS 基础之上的，但不同的是在搜索过程中，达到结束条件后，恢复状态，回溯上一层，再次搜索。因此回溯算法与 DFS 的区别就是有无状态重置当问题需要 "回头"，以此来查找出所有的解的时候，使用回溯算法。即满足结束条件或者发现不是正确路径的时候(走不通)，要撤销选择，回退到上一个状态，继续尝试，直到找出所有解为止78. 子集 - 力扣（LeetCode）子集类题目，答案从空集开始，集合中包含一个元素的，集合中包含俩个元素的.......集合中包含给定数组个
2022-06-13 12:21:41
323
原创 力扣198---打家劫舍
198. 打家劫舍 - 力扣（LeetCode） // dp数组对应下标元素存放的是 当前下标个房子中能打劫的最高金额 // 房子每增加一个，计算当前房子个数可以打劫的最高金额为： // 当前新增房子金额 与 上上一个（防止报警要隔一个房子）房子数目能打劫最高金额之和 与 除去当前新增房子以外 也就是目前房子数目减去1个房子时能打劫的最高金额的较大值 // 核心思路就是 房子不能挨着 每次房子新增一个后 当前能打劫的最高金额是已经计算完成并存入dp数组的 // 所以要么是 新增
2022-06-10 00:50:57
183
原创 JS-快速排序和归并排序
核心思路：不断的折半拆分，以 数组长度 / 2 为数组中间值拆分为左侧数组和右侧数组。不断递归继续拆分已经拆分出来的左侧数组和右侧数组直到满足递归结束条件：拆分出来的数组的长度为 1。让每次递归结束返回的数组是有序的：设置临时数组，比较左右侧数组首元素的大小，较小的首元素移除数组推入到临时数组当中。改变原数组。二：快速排序随便以数组的某一个元素为基准（方便起见所以以数组第一个元素为基准），比基准元素小的加入到新左侧数组当中，比基准元素大的加入到新右侧数组当中。不断让新左侧数组和右侧数组递归以上方法
2022-06-10 00:47:51
236
原创 二叉树先中后续非递归遍历算法--JS版
一：先序遍历的非递归写法思路：递归遍历本质是递归函数不断调用自身，在不断调用自身的过程会产生一个递归堆栈，所以非递归的核心思想就是用一个栈模拟递归时产生的递归堆栈。1.先序遍历的输出顺序为：根左右，想要第一次就输出根节点的值就需要在创建栈时先传入根节点，且每向下遍历一个新节点时都会先输出这个节点的值。2.循环条件为栈不为空3.因为每向下遍历一个新节点时都会先输出这个节点的值，所以每次循环都要先出栈一个元素并访问它的值，然后向栈中添加出栈节点的左右子树。4.因为栈是后进先出，所以为了实现根左右的遍历顺序，
2022-06-08 16:59:14
441
原创 力扣101 对称二叉树 递归解法
101. 对称二叉树 - 力扣（LeetCode）给你一个二叉树的根节点 ， 检查它是否轴对称。示例 1：输入：root = [1,2,2,3,4,4,3]输出：true递归思想：递归思想的核心可以分为：分，解，合；分：把题目拆分成更小且可以用同一种方法处理的小题目；解：把解决小题目的方法写成函数，此函数就是递归函数，要注意递归函数的截止条件是什么；合：把递归函数递归的结果结合到一起，得到最终整到题目的结果；// 分：获取俩个树的左子树1和右子树2// 解：判断树1的左子树和树2的右子树是否是
2022-06-07 19:13:46
264
原创 数据结构---堆
一；什么是堆？堆是一种特殊的完全二叉树，所有的节点都大于等于（最大堆）或小于等于（最小堆）它的子节点二；JS中的堆1.JS中通常用数组表示堆。2.左侧子节点的位置是 2 * index + 13.右侧子节点的位置是 2 * index + 24.父节点的位置是（index - 1）/ 2三；堆的应用堆能高效、快速的找出最大值和最小值，时间复杂度为O(1)；找出第 K 个最大（小）元素 四；JS实现堆的基本操作（入堆，删除堆顶，堆长度，取堆尾）...
2022-06-04 18:53:21
90
原创 力扣133 克隆图
133. 克隆图 - 力扣（LeetCode）// 图的核心就是 结点与它的邻接结点// 所以克隆图就是克隆图的各个结点与这些结点的邻接关系// 每次dfs算法传入的就是当前结点，dfs内继续递归的内容就是该结点的邻接结点详细步骤在代码注释当中......
2022-06-04 11:15:44
203
原创 力扣417 太平洋大西洋水流问题
417. 太平洋大西洋水流问题 - 力扣（LeetCode）核心：建立两个和给定矩阵宽高一致的矩阵，分别表示太平洋和大西洋从边界出发，深度优先遍历矩阵，继续递归前进行条件的限制：结点没有超出界限，下一个结点的值要比上一个结点的值大，结点没有被访问过。满足条件则向下一个结点递归，并将矩阵的该结点值变为 true。最后如果太平洋矩阵和大西洋矩阵的结点同时为 true 则表示这个结点是 既可流向太平洋也可流向大西洋。...
2022-06-02 22:06:57
249
原创 力扣65 有效数字 JS
65. 有效数字 - 力扣（LeetCode）利用图解决这种需要分很多情况讨论的题目。构建一个图，每个结点表示一种情况，相邻结点之间是到达各种情况的条件，每个结点能达到的下一个结点必须是符合题意要求的情况，否则直接判定为无效数字。分清哪个到达哪个结点时是满足题意的。如果最后遍历完给定字符串后结点数为满足题意的结点数，就是有效数字。如果最后遍历完给定字符串后结点数为不满足题意的结点数，就是无效数字。由题意构建出的图 使用图的 邻接表 表示法把上述图结构书写出来（JS使用对象表示图）遍历给定字符串，从结点0出发
2022-06-02 11:47:05
223
原创 图的深度与广度优先遍历
1.邻接矩阵表示法：使用二维数组进行表示，若存在俩结点之间的邻接关系，则对应二维数组下标记为 1 否则记为 02.邻接表表示法：邻接表就是依次存储记录每个结点与该结点存在邻接关系的所有结点的对应关系如上图，与V1结点存在邻接关系的结点为V2和V4 所以V1结点为头结点的单链表存储的是V2和V4对应的数组下标值在JS中可以使用对象模拟邻接表从某一个根结点开始，对根结点的没有被访问过的相邻结点挨个进行深度优先遍历。结合队列实现广度优先遍历先将根结点入队，依次出队，每次出队的时候将出队结点的没有被访问过的邻接结点
2022-06-01 23:42:20
99
原创 力扣112，113 路经总和（深度遍历解法）
112. 路径总和 - 力扣（LeetCode）113. 路径总和 II - 力扣（LeetCode）这俩道题都是使用DFS深度遍历算法求解的，一个是单纯求路径和，一个是求满足条件的路径。关键是怎么解决同一结点的左右叶子结点的路径和路径和计算问题。比如我到了 7 这个叶子结点，将 7 进行了累加路径和或者推入了路径数组，但是发现它不是满足条件的叶子结点路径，怎么消除该叶子结点的影响继续 2 这个右叶子结点呢？技巧：DFS深度遍历函数的参数不仅仅是下一个结点，再额外传入当前结点的路径累加值和路径数组。/
2022-05-31 21:36:33
230
原创 力扣102 二叉树层序遍历
102. 二叉树的层序遍历 - 力扣（LeetCode）注意要设置结点层级，所以推入队列和从队列拿出的都是包含结点和层级的数组。// 层次遍历：// 初始化一个队列// 将根结点推入队列，遍历队列，遍历条件为队列不为空// 出列队列队首元素// 访问该元素的左右孩子，有左右孩子则推入队列中// 递归以上var levelOrder = function (root) { if (!root) return []; let queue = []; let res
2022-05-21 10:58:45
250
原创 JS 防抖与节流
防抖：概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。即：如果连续触发 只会执行最后一次触发的回调。使用场景：百度搜索框中输入对应内容下方会有相关内容的提示，如果每输入一个文字都发送一次请求是非常浪费性能的，所以使用节流设置一个时间，只有当用户输入完内容之后不在输入，经过了预先设置好的时间才会发起请求。// 防抖 // 概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。 // 即 .
2022-05-20 21:26:58
134
原创 力扣76 最小覆盖子串 JS Map字典+滑动窗口
76. 最小覆盖子串 - 力扣（LeetCode）个人感觉：核心是利用 map 建立一个被包含字符串的字典，并记录好这个被包含字符串中每个元素（键名）出现的次数（键值）。移动指针遍历，利用 map 的 has 方法，如果遇到被包含字符串中的元素，字典中对应元素的键值做出相应的改变。当字典中所有键名对应的键值都为 0 时，意味着字符串都被包含了，进行窗口的缩小。坑：移动右指针时：只有字典元素对应键值为 0 的时候 ，记录被包含字符串总个数才进行 -1移动左指针时：只有字典元素对应键
2022-05-17 21:08:24
180
原创 力扣3 无重复字符串的最长字串 JS Map+滑动窗口
3. 无重复字符的最长子串 - 力扣（LeetCode）// 字典结合滑动窗口// 设置 左右双指针 用于确定滑动窗口的大小// 遍历字符串，不断的向字典中加入元素// 当右指针指向的元素值存在于字典当中，则让左指针指向重复元素的下一位（更新窗口）var lengthOfLongestSubstring = function (s) { let map = new Map(); let left = 0; let res = 0; for (let right
2022-05-17 16:47:59
196
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人