Codellllll-CSDN博客

原创 js篇-数组去重常见四种方法

本文介绍了四种JavaScript数组去重方法：1）利用Set数据结构简洁高效（O(n)）；2）使用filter+indexOf可读性好但性能较差(O(n²))；3）reduce方法体现函数式风格；4）对象属性法兼容性好但会类型转换。性能对比显示Set最优，filter/reduce适合小数据量，对象法兼容老浏览器。建议现代项目首选Set，注意不同方法对对象元素的处理差异，复杂对象可能需要自定义比较逻辑。

2025-07-06 10:08:09 418

原创 css篇-清除浮动常见的三种方法

CSS浮动布局易导致父元素塌陷，本文对比三种清除浮动方法。伪元素法（::after）语义好且现代推荐；overflow法最简洁但可能产生滚动条；空div法兼容性最佳但添加冗余元素。方法选择应考虑项目需求：现代项目优先伪元素法，简单布局可选overflow法，旧浏览器适用空div法。Flex/Grid布局可作为浮动替代方案。

2025-07-05 00:14:21 405

原创 js篇-简易节流、防抖函数

JavaScript中的节流(throttle)和防抖(debounce)是两种优化高频事件处理的技术。节流函数(jl)通过时间戳比较确保函数在固定间隔最多执行一次，适用于滚动等连续事件；防抖函数(fd)使用定时器延迟执行，只在事件停止触发后执行一次，适合搜索建议等场景。两者都通过闭包保存状态，使用apply保持this和参数。节流响应更快但可能遗漏末次触发，防抖延迟响应但确保末次执行。根据场景需求选择合适的技术能有效提升性能。

2025-07-03 15:36:42 414

原创 js篇-事件委托

事件委托是JavaScript中利用事件冒泡机制的高效事件处理模式，将子元素事件委托给父元素统一管理。其优势包括自动处理动态元素、减少监听器数量以优化性能，以及简化代码逻辑。实现原理是通过父元素监听事件，利用event.target识别实际触发元素。典型应用场景包括列表项点击、表格操作等动态内容。事件委托能有效提升应用性能，简化事件管理，是前端开发必备的高级技巧。

2025-07-02 00:36:51 425

原创 js篇-二叉树遍历算法解析

本文介绍了二叉树的三种基本遍历算法：前序遍历、中序遍历和后序遍历。通过JavaScript代码示例展示了每种遍历的递归实现方式，并提供了示例输出结果。分析指出所有遍历算法的时间复杂度均为O(n)，空间复杂度在最坏情况下也是O(n)。最后简要说明了不同遍历方式的应用场景，如前序遍历适合复制树结构，中序遍历适合二叉搜索树排序输出，后序遍历则适用于删除树结构等操作。

2025-07-01 15:15:48 134

原创手写-计算二叉树的最大宽度函数

本文介绍了如何计算二叉树的最大宽度。算法采用层级遍历(BFS)，给每个节点分配位置编号：根节点为0，左子节点为父节点位置2，右子节点为父节点位置2+1。在每层遍历时，记录该层首尾节点位置差+1作为当前层宽度，并与已记录的最大宽度比较更新。这种方法避免了存储空节点，通过位置编号的差值准确计算每层实际存在的节点数。时间复杂度为O(n)，空间复杂度为O(n)。示例展示了该算法在包含5个节点的二叉树上的应用，最终输出最大宽度为4。

2025-06-29 01:17:34 159

原创 js篇-二叉树的最大宽度计算算法解析

本文介绍了使用广度优先搜索(BFS)计算二叉树最大宽度的算法。通过为每个节点分配位置编号（根节点为0，左子节点为2父位置，右子节点为2父位置+1），每一层的宽度等于最右节点位置减去最左节点位置加1。文章提供了JavaScript实现代码，包括TreeNode定义和widthOfBinaryTree函数，并分析了算法的时间复杂度为O(n)，空间复杂度为O(w)。该方法高效解决了包含空节点的二叉树宽度计算问题。

2025-06-29 00:54:01 384

原创手写js时间转换函数

【代码】手写js时间转换函数。

2025-06-26 23:05:02 99

原创缓存验证：Last-Modified / If-Modified-Since 和 ETag / If-None-Match

特性ETag精度秒级字节级（更精确）唯一性基于时间戳，可能重复唯一标识符，每次变更都会变性能开销较低（只需比较时间）略高（需计算哈希等）兼容性所有 HTTP/1.0 及以上支持需要 HTTP/1.1 或以上适用场景简单静态资源缓存验证动态资源、CDN、负载均衡环境。

2025-06-26 16:58:46 305

原创 Vant-Rem 布局适配

本文介绍了如何使用 Vant-Rem 进行布局适配，主要推荐使用 postcss-pxtorem 和 lib-flexible 两个工具。postcss-pxtorem 用于将 px 单位转换为 rem 单位，而 lib-flexible 用于设置 rem 基准值。文章详细说明了如何安装和配置这些工具，并提供了针对不同设计稿（如375px和750px）的适配方案。通过调整 .postcssrc.js 文件中的 rootValue，可以实现对不同设计稿的适配。此外，文章还提到了一些常见问题和解决方案，如配置文

2025-05-15 18:48:11 384

原创 typeof和instanceof

typeof和instanceof是JavaScript中用来检测变量类型的两个不同的操作符。

2024-06-26 23:22:00 301

原创 vue响应式原理

Vue的响应式系统通过Observer、Dep和Watcher的协同工作，实现了数据的自动追踪和视图的自动更新。这种机制极大地简化了状态管理和界面更新，是Vue框架在构建复杂应用时的强大支持。

2024-06-26 22:03:54 500

原创 JS中BOM和DOM的区别

总之，DOM和BOM虽然都是JavaScript的组成部分，但它们关注和操作的内容不同，DOM更侧重于文档内部的结构和内容，而BOM更侧重于浏览器窗口和与浏览器交互的方法。在JavaScript中，BOM（浏览器对象模型）和DOM（文档对象模型）是两个核心的API，它们分别关注不同的浏览器功能。

2024-06-26 17:51:07 337

原创 vue中v-bind和v-model有什么区别

都是指令，用于实现数据和DOM元素之间的双向绑定，但它们的使用场景和功能有所区别。是Vue提供的一种简化表单元素数据绑定的方式，而。则提供了更通用的数据绑定功能。:属性名="表达式"

2024-06-25 21:29:22 1003

原创 v-model中.lazy、.number、.trim

这些修饰符可以单独使用，也可以组合使用，以实现更精细的数据处理和控制。使用这些修饰符可以帮助开发者减少对输入数据的额外处理，并提高应用的用户体验。如果转换失败（比如用户输入了非数字的字符），它会返回原始的字符串。这在处理用户输入时非常有用，因为用户经常会在输入时不小心添加空格。这意味着数据更新会在输入框失去焦点时发生，而不是在输入过程中立即发生。Vue.js 提供了一些修饰符（modifiers），这些修饰符可以用来指定不同的行为。是一个非常核心的指令，它主要用于在表单输入和应用状态之间建立双向绑定。

2024-06-25 21:26:57 786

原创 JS中bind、call、apply之间有什么区别

方法则返回一个新函数，可以延迟执行，并且可以预设一些参数。在实际开发中，可以根据需要选择最合适的方法来改变函数的调用上下文。方法都是预定义的函数原型方法，这三个方法都可以用来改变函数的调用上下文，也就是。都会立即执行函数，区别在于参数传递的方式不同，JavaScript 中的。

2024-06-25 21:01:41 450

原创 Vue3.0里为什么要用Proxy API替代的defineProperty API

在 Vue 2 中，对于数组的变化检测需要重写数组的原型方法，而在 Vue 3 中，利用 Proxy 可以直接对数组进行拦截，使得数组的响应式处理更加简洁和自然。：Proxy 是 ES6 引入的特性，虽然在旧版浏览器上可能不被支持，但在现代浏览器中，Proxy 的支持已经非常良好，而 Vue 3.0 作为一个现代化的框架，采用 Proxy 可以更好地与最新的 JavaScript 特性兼容。

2024-06-25 20:55:13 419

原创 HTTP缓存

HTTP缓存是一种重要的性能优化手段，主要用于减少网络延迟、节省带宽和减轻服务器的负载。通过合理配置和利用这些HTTP缓存类型，可以显著提高Web应用的性能和用户体验。

2024-06-25 19:24:10 226

原创 JS哪些操作会造成内存泄漏

在 JavaScript 中，如果两个对象互相引用，形成一个循环引用，垃圾回收器可能无法识别这些循环引用的对象，从而不能释放它们的内存。：闭包可以捕获外部函数的变量，如果闭包长时间存在，并且它捕获的变量也不再被外部环境所需要，那么这些变量就不会被垃圾回收，从而导致内存泄漏。：当页面上的 DOM 元素被移除或替换后，如果没有清除与这些元素相关联的事件监听器或数据，那么这些元素及相关数据可能会留在内存中。），但忘记清除，或者回调函数引用了不再需要的对象，这可能导致内存泄漏。：如果设置了定时器（如。

2024-06-25 18:58:52 493

原创 JS数据类型

JavaScript 中有多种数据类型，可以分为两大类：基本数据类型（Primitive Data Types）和引用数据类型（Reference Data Types）。

2024-06-25 12:00:18 358

原创 CSS中的BFC

BFC（Block Formatting Context）是 CSS 中的一个概念，它定义了块级盒子的布局规则。BFC是一个独立的渲染区域，它决定了块级盒子如何布局，以及与其他元素的关系和相互作用。

2024-06-25 11:51:00 446

原创 axios常用的请求方式

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它允许开发者以简单和直观的方式发送HTTP 请求。

2024-06-25 10:37:22 407

原创 webpack怎么配置？用到了哪些loader？

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（modulebundler），它在开发过程中将应用程序所需的各种资源（如 JavaScript, JSON, CSS, SCSS, LESS, 图片等）打包成一个或多个 bundle，这些 bundle 适用于浏览器。Webpack 的配置是通过一个名为的配置文件来完成的，该文件通常位于项目的根目录下。

2024-06-25 10:18:55 317

原创 Vue-router有哪几种路由守卫

Vue Router提供了多种路由守卫，用于控制路由的导航过程。这些守卫可以在不同的阶段对路由进行拦截和控制，以实现诸如权限验证、页面访问控制等功能。

2024-06-25 09:40:59 595

原创 promise和async的区别

Promise和都是 JavaScript 中用于处理异步操作的机制，但它们的使用方式和目的有所不同。下面是Promise和。

2024-06-25 09:21:59 507

原创 JS是单线程，为什么JS能有异步任务

JavaScript 是单线程的，这意味着它只有一个调用栈和一个内存堆。然而，JavaScript 的异步行为是通过事件循环和回调队列来实现的，这使得它能够在等待某些操作（如网络请求或定时器）完成时继续执行其他任务。

2024-06-25 08:52:09 609

原创 JS数组去重的方式有哪些

这些方法各有优缺点，选择哪种方法取决于具体的需求和场景。例如，使用 Set 是最简洁的方法，但如果需要考虑兼容性（如不支持 ES6 的环境），则可能需要选择其他方法。方法可以用来创建一个新数组，其中包含满足某个条件的元素。通过检查元素的索引是否为第一次出现，可以实现去重。通过检查结果数组中是否已存在当前元素，可以实现去重。通过创建一个对象或 Map，可以利用键的唯一性来去重数组。方法检查新数组中是否已包含当前元素，可以实现去重。方法，可以创建一个去重的新数组。利用对象的键唯一性，结合。方法，可以实现去重。

2024-06-25 08:50:46 246

原创 Vuex怎么实现数据持久化

在 Vuex 中，当你刷新页面时，所有 Vuex 存储的数据都会丢失，因为 Vuex存储在内存中，而页面刷新会清除内存中的数据。为了在页面刷新后仍然保留数据，你可以将数据持久化到浏览器的本地存储（如 localStorage或 sessionStorage）中。

2024-06-25 08:46:09 390

原创 CSS中实现元素水平垂直居中的方式有哪些

每种方法都有其适用的场景，选择哪种方法取决于具体的需求和兼容性要求。通过将元素的display属性设置为table-cell，并使用vertical-align和text-align来实现居中。通过在父元素上使用伪元素来创建一个占位符，然后通过设置margin来实现居中。CSS Grid是另一种强大的布局系统，也可以用来实现元素的水平垂直居中。通过将元素的定位设置为绝对定位，并使用transform属性来调整位置。Flexbox是一个现代的布局模型，可以轻松实现元素的水平垂直居中。

2024-06-24 23:58:01 382

原创 TCP和UDP的区别

TCP（传输控制协议）和 UDP（用户数据报协议）是互联网协议族（TCP/IP）中的两种核心传输层协议，它们在数据传输的方式和特性上有显著的区别。

2024-06-24 23:04:36 563

原创 TS中interface和type的区别

更灵活，可以用于定义各种类型，包括联合类型和元组。在实际开发中，选择使用。都可以用来定义对象的类型，但它们之间存在一些差异。更适合用于定义对象的形状，并且支持声明合并和。往往取决于个人或团队的偏好和项目的具体需求。在 TypeScript 中，

2024-06-24 21:17:54 656

原创 Vuex中的重要核心属性

这些核心属性共同构成了 Vuex 的状态管理机制，使得在大型单页应用中管理状态变得更加容易和可维护。通过使用这些属性，开发者可以确保状态的变化是可预测的，并且可以轻松地追踪状态的变化。应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 是一个专为 Vue.js。

2024-06-24 21:03:21 1412

原创 JS延迟加载的方式有哪些

JavaScript延迟加载（也称为懒加载）是一种优化网页性能的技术，它允许脚本在页面加载完成后再执行，从而加快页面初始加载速度。选择哪种延迟加载方式取决于你的具体需求和使用场景。例如，对于简单的脚本加载，可以使用。对于复杂的应用程序，可能需要使用模块加载器或打包工具的代码分割功能。

2024-06-24 20:51:09 461

原创 export和export default的区别

都用于导出模块中的内容，但它们在使用方式和行为上有一些区别。如果模块中有多个功能需要导出，可以使用。如果模块主要提供一个功能或类，可以使用。在实际使用中，可以根据需要选择使用。同时，一个模块中可以同时使用。在ES6模块系统中，

2024-06-24 19:02:56 459

原创 ES6中Module和CommonJS模块有什么区别

ES6中的模块（通常称为ES模块或ESM）与CommonJS模块在语法、加载机制和行为上有显著的区别。

2024-06-24 18:22:11 324

原创 JS中的三种事件模型

传统事件模型是最早的事件处理方式，它通过将事件处理函数直接赋值给 HTML 元素的属性或 DOM 对象的属性来实现。这种方式简单直观，但功能有限，不支持事件捕获和事件流的概念。IE 事件模型是旧版本 Internet Explorer 浏览器使用的事件处理方式，它与标准事件模型类似，但使用的是。方法来绑定和解绑事件处理函数。这种方式更加灵活和强大，支持多个事件处理函数绑定到同一个事件上。标准事件模型是由 W3C 定义的，它引入了事件捕获和事件冒泡的概念，并提供了。方法，并且只支持事件冒泡，不支持事件捕获。

2024-06-24 18:03:21 397

空空如也

空空如也