weixin_43502666的博客

原创 今天菜单菜谱

【代码】今天菜单菜谱。

原创 将扁平的菜单树型化

【代码】将扁平的菜单树型化。

原创 一共有n阶台阶,一次上1或者2有多少种可能

原创 TS中的Record和泛型和元组

1、泛型: 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。2、元组: 数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。3、Record: Record是一个用于创建具有特定类型的键和值的对象类型的工具类型。它的语法是Record<K, V>，其中K是键的类型，V是值的类型

原创 TS在interface和type的区别

在TypeScript中，interface和type都是用来定义类型的方式(1)语法：interface 关键字用于定义接口,一般定义对象类型,可以描述对象的形状，即一个对象应该具有哪些属性和方法。interface可以声明对象应该具有的结构和属性。type 关键字用于定义类型别名。它为现有的类型起一个新的名称。type不仅可以用于对象类型，还可以用于基本类型、联合类型、元组类型和交叉类型。(2)继承和扩展性interface: 可以使用extends关键字来继承其他接口或实现多个接口，这使得

原创 蓝湖面试题---Promise简单使用---间隔n秒后输出

原创 蓝湖面试题---手写filter函数

原创 蓝湖面试题---函数被调用无数次,只执行n次

原创 js编程题

原创 Vue3中基本数据类型为什么需要.value,,,引用类型不需要.value

1、在v3中使用基本数据类型（如数字、字符串、布尔值）时，如果你希望响应式地更新数据并触发视图更新,需要使用ref包裹基本数据类型,然后将基本数据类型转化为响应式对象;- - - 因此当你使用ref包裹基本数据类型时,实际上得到的是一个包含.value属性的对象;所以我们需要通过.value属性访问和修改此基本数据类型的值;2、对于引用类型(数组和对象)不需要使用.value,因为reactive已经自动将此对象或者数组转化为响应式,可以直接对引用类型的属性进行修改，Vue会自动追踪这些修改并触发相应的

原创 html2canvas实现原理

html2canvas 是一个 JavaScript 库，可以将 HTML 元素转换为 Canvas 元素，进而实现对网页内容的截图功能。它的实现原理主要包括以下几个步骤：1、解析和构建 DOM 树：html2canvas 首先会解析网页上指定的 HTML 元素，包括文本、样式和布局等信息，并构建成一个 DOM 树的内部表示。2、计算样式和布局: 针对每个 DOM 元素，html2canvas 会计算其最终的样式和布局信息，包括位置、大小、颜色、字体等属性。3、绘制到 Canvas：html2canv

原创 vue项目实现---用户在页面没有操作5分钟时退出登录

【代码】vue项目实现---用户在页面没有操作5分钟时退出登录。

原创 测试11111

【代码】测试11111。

原创 前端开发模式

1、代理模式: 代理模式控制对对象的访问，可以起到保护对象和增强对象的作用。2、工厂模式: 工厂模式是一种创建型设计模式，用于封装对象的创建过程，通过工厂方法来实例化对象;;;一般情况下我们通过构造函数创建实例对象,我们可创建一个工厂函数专门用来创建实例对象;3、观察者模式: 观察者模式定义了一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会得到通知并自动更新;可以理解响应式原理当属性值改变时,观察者模式起作用,从weakMap集合中拿出依赖执行;4、单例模式: 确保一个类或者构造

原创 js将数组n等分

【代码】js将数组n等分。

原创 js标签中defer和async的区别

async和defer是用来控制脚本和执行的两个关键字1、async(1) 当浏览器遇到带有async属性的(2)当下载完成时,脚本会立即执行,不需要等待整个HTML文档解析完毕;;;所以意味着脚本的执行顺序不同于页面的出现顺序;(3)适用于独立的不依赖于页面其他内容的脚本;2、defer(1)带有defer属性的脚本会等整个文档解析完成后再执行;(2)带有多个defer属性的脚本会按照页面的文档的顺序依次执行;(3)适用于等待页面解析完成才需要执行的脚本,并且各个脚本之间的依赖关系得到满足;

原创 函数柯里化

原创 js中字符串排序

1、第一种方法2、第二种方法–使用js自带的方法localeCompare方法

原创 vue项目中监听页面滚动事件

【代码】vue项目中监听页面滚动事件。

原创 CSP（Content Security Policy）策略---内容安全策略

【代码】CSP（Content Security Policy）策略---内容安全策略。

原创 前端跨页面通信的几种方式---同源

参考链接1、LocalStorage:当 LocalStorage 变化时，会触发storage事件。利用这个特性，我们可以在发送消息时，把消息写入到某个 LocalStorage 中；然后在各个页面内，通过监听storage事件即可收到通知。2、BroadCast Channel: BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时，其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。3、Service Work

原创 数据大屏---＞前端实时更新数据的几种方式

参考文章:实时数据更新一、轮询:简单来说轮询就是客户端不停地调用服务端接口以获得最新的数据1、短轮询:每隔3s向服务器发送一次请求- - -请求数据优点:最大的优点就是实现简单缺点:(1)无用的请求多,客户端不知道服务端什么时候数据更新,只能不停的向服务端发送请求,(2)数据实时性差:客户端还是需要一段时间(3s)才能拿到最新的数据2、长轮询:长轮询，客户端发起请求后，服务端发现当前没有新的数据，这个时候服务端没有立即返回请求，而是将请求挂起，在等待一段时间后(一般为30s或者是60s)，发现还

原创 session和cookie的区别

session和cookie一般都是用于保持用户会话状态的技术, 主要目的是进行会话跟踪;主要区别如下:1、存储位置:(1) Cookie :存储在客户端(浏览器中),一般是字符串的形式,大小限制只有4kb;(2) Session:一般将数据存储在服务端,可以存储任意类型的数据,理论上只受内存限制;2、内容:(1) cookie一般包含在HTTP请求中,用于在客户端和服务端之间传递数据;可以存储少量的文本信息,例如登录信息–用户名、密码和用户偏好;(2)session:通常是保存在服务端的一个数

原创 webpack和vite的区别

Webpack:优点：灵活、强大、适用于复杂场景、庞大的插件生态。缺点：构建速度较慢、配置复杂、开发体验不如Vite流畅。

原创 vue组件封装注意事项

1、组件设计:(1)合理的组件结构: 将组件拆分为小的可复用部分,使每个组件只关注于自己的职责;(2)单一职责原则: 确保每个组件只负责一项功能,避免功能过于复杂;(3)可配置性: 一般通过props传参将数据传递给子组件,提供灵活的配置选项,以适应不同的应用场景;2、样式的处理(1)肯定要考虑到样式隔离,避免样式污染;(2)有时候需要制定一些主题样式(3)css变量,在裁剪组件中,我们的预览框大小需要根据我们裁剪框的大小来决定,裁剪框的大小是通过props传递的,所以需要设置CSS变量(4

原创 vue3中hooks的作用

1、将相关逻辑统一化: 通过使用Hooks,我们可以将相关的逻辑组织在一起,而并非散落在不同的生命周期钩子函数中,提高了代码的可读性和可维护性;2、促进逻辑的复用: Hooks可以被多个组件共享和复用,避免了传统的混入和继承带来的问题;3、简化了组件选项,可以使父组件选项更加简洁明了;4、提高了代码的可测试性:可以很容易的对各个Hooks进行测试;5、可以在Hooks中使用生命周期函数,更加简洁明了;

原创 前端常见的安全问题以及处理措施

1、XSS跨站脚本攻击—是一种常见的Web安全漏洞,攻击者在目标网站中通过注入恶意脚本,，当用户浏览该网页时，嵌入其中的script代码会被执行，从而达到恶意攻击用户的目的。防御措施：(1) 对所用用户提交的内容进行输入验证，包括对URL、查询关键字、HTTP请求头等验证长度、格式(2) 使用https协议(3) 后台输入的校验2. CSRF：跨站点伪造请求:攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到

原创 双指针---解决实际问题

原创 js求数组元素连续的子集

原创 Kadane 算法是用于解决最大子序和问题的一种动态规划算法。

【代码】最大子数组和。

原创 js滑动窗口算法

滑动窗口算法的优势在于可以将时间复杂度控制在 O(n) 级别，避免了暴力搜索的高时间复杂度。总的来说，滑动窗口算法是一个非常实用且高效的算法，特别适用于处理连续子串的情况。不断移动右指针，直到找到满足条件的子串，然后尝试移动左指针缩小窗口大小；初始化左右指针，通常开始时均指向数组或字符串的起始位置；重复步骤 2 和 3，直到右指针到达数组或字符串的末尾。找到子数组或子串满足特定条件的最大/最小值；在移动左指针的过程中，更新记录的结果；找到子数组或子串满足特定条件的数量；找到不含重复字符的最长子串等。

原创 js---回溯算法

在 JavaScript 中实现回溯算法通常需要使用递归来进行搜索。回溯算法通常用于解决组合优化问题、排列组合问题、棋盘类游戏等。回溯算法一般是一个for加递归,for循环横向遍历,递归纵向遍历—以上是回溯算法的基本框架1、回溯算法求数组所有子集2、回溯算法求全排列

原创 js原地打乱一个数组---洗牌算法

原创 贪心算法---前端问题

1、贪心算法—只关注于当前阶段的局部最优解,希望通过一系列的局部最优解来推出全局最优----但是有的时候每个阶段的局部最优之和并不是全局最优例如假设你需要找给客户 n 元钱的零钱，而你手上只有若干种面额的硬币，如 1 元、5 元、10 元、50 元和 100 元。请问你最少需要找多少硬币？

原创 http和https的区别

一、区别1、安全性:http是明文进行传输的,数据在传输过程中不加密,容易被窃取或者篡改;https则通过使用SSL/TLS的加密机制进行加密,保证了传输过程中的安全性2、传输方式:http使用TCP作为传输协议,数据传输速度较快http在TCP传输的基础上增加了SSL/TLS加密层,所以会有一定的性能损耗;3、端口号:http默认使用端口号80进行通信https默认使用443端口号进行通信4、是否需要证书HTTPS需要申请SSL证书二、https加密算法—HTTPS在加密过程中使用

原创 手写防抖和节流

原创 js事件循环EventLoop

js事件循环机制是指:js运行时, 环境中用来处理异步任务和回调函数的机制,主要目的是确保在js单线程的特性下能够处理异步操作,不然异步耗时任务会阻塞同步任务执行,影响用户体验;事件循环主要包含以下三个部分:(1)调用栈:用来存储要执行的上下文代码,例如执行函数时会将函数调用压入栈中,等函数执行完毕然后从栈中弹出(2)任务队列: 宏队列存储宏任务,微队列存储微任务(3)EventLoop机制—不断地从任务队列中取出任务,放入调用栈中执行,保证了js事件驱动特性;事件循环的过程大致如下:(1)执行

原创 箭头函数和普通函数的区别

1、箭头函数写法更简洁,可以用一行代码直接表示一个函数2、箭头函数中的this指向是固定的,始终指向上下文的this; 普通函数中的this指向的是调用者,也就是说普通函数可以通过call、apply、bind来改变this指向;像构造函数中的this指向了实例对象;3、箭头函数不能作为构造函数,因为箭头函数没有自己的this,也没有原型对象,所以不能通过new关键字创建实例;4、构造函数没有原型,不能通过prototype为其添加属性和方法总体来说:箭头函数更适用于简单的函数表达式或者回调函数,因

原创 js实现数组去重的5种方法

原创 原型链和原型

如下图: