- 博客(24)
- 收藏
- 关注
RSS订阅原创 js 数组去重的方法
是 JavaScript 内置的数据结构，它会自动去重。如果数组是有序的，可以先排序再去重。：适用于复杂数组（如对象数组）。：不能去除对象数组中的重复项。如果数组中包含对象，可使用。方法，建议使用 Set()仅保留第一次出现的元素。也是一种高效的去重方式。：可以去重完全相同的对象。：易懂，可用在 ES5。：适用于对象数组的去重。，无法去除所有重复对象。适用于简单数组，通过。或对象存储唯一键值。，建议使用 Map()：性能好，代码简洁。：适用于已排序数组。
2025-03-05 12:25:06
270
原创 js中 ES6 新特性详解
ES6（ECMAScript 2015）是 JavaScript 的一次重大更新，引入了许多新的特性，使 JavaScript 代码更加简洁、可读和高效。运算符将数组的每一项展开，可以合并数组、拷贝数组，甚至将数组插入到另一个数组中。，支持任意类型的键（不仅仅是字符串），并且有序（按插入顺序存储）。是用于处理异步操作的一种机制，可以简化回调函数的使用，避免。声明的，它的作用域扩展到整个函数或全局，而非。，直到执行到变量声明的位置，变量才可用。，其中每个值都是唯一的，不允许重复。定义对象方法时，不再需要。
2025-02-21 17:02:50
1281
原创 什么是BFC
BFC（块级格式化上下文，Block Formatting Context）是CSS中的一种布局概念，它定义了一个独立的渲染区域，使其内部的子元素不会影响外部元素，并且可以解决一些常见的布局问题，如。
2025-02-21 16:25:52
201
原创 JavaScript 中 V8 引擎的垃圾回收机制
V8 的垃圾回收机制主要基于分代回收新生代使用Scavenge（复制）算法，快速清理短生命周期对象。老生代使用标记-清除、标记-整理等算法，优化长期存活对象的回收。通过增量标记、并发 GC、增量压缩等优化策略，减少垃圾回收对性能的影响。了解 V8 的 GC 机制有助于编写更高效的 JavaScript 代码，避免性能瓶颈。
2025-02-21 15:58:36
605
原创 JavaScript 中的数据劫持和数据代理
它可以代理整个房子里所有的设备，而不需要逐个绑定（不像。假设你开了一家餐厅，你雇了一个。必须单独劫持每个设备的控制）。
2025-02-21 15:53:32
463
原创 Vue 中 nextTick 的原理详解
nextTick是 Vue 提供的一个异步任务调度方法，用于在 DOM 更新后执行回调。Vue 采用异步批量更新机制，nextTick可确保数据变更后获取到最新的 DOM。Vue 内部采用Promise（Microtask）优先，降级到作为备用方案。Vue 3 进一步优化了nextTick，减少了不必要的复杂度，提升了性能。Vue 在修改数据后，不会立即更新 DOM，而是批量合并修改，并在下一次事件循环（Event Loop）结束时更新 DOM。nextTick。
2025-02-21 15:40:39
780
原创 vue中的watch 和 computed 的区别
计算属性（computed）用于基于已有数据派生新值，有缓存，提高性能。侦听器（watch）用于监听数据变化并执行副作用（如 API 请求、DOM 操作等）。是更灵活的watch，适用于自动追踪依赖项的情况。选择哪一个取决于你的需求：如果是计算属性，优先computed；如果是数据变化触发操作，使用watch或。
2025-02-21 15:18:12
444
原创 vue2 和 vue3 中 computer 计算属性的用法
进行缓存，只有依赖的响应式数据发生变化时才会重新计算。变得更简洁、模块化，特别适用于组合逻辑复杂的应用场景。Vue 3 的 Composition API 让。在 Vue 2 中，计算属性是响应式的，并且基于。Vue 3 仍然支持 Vue 2 的。来创建计算属性，而不是定义在。在 Vue 3 中，除了。Vue 3 允许使用。
2025-02-21 15:14:42
507
原创 vue3 中 使用watch 和 watchEffect 监听 defineProps 的值
本身是一个不可变对象，如果想监听整个。，否则不会触发回调。
2025-02-17 15:17:32
589
原创 Vue 3 中，watch 和 watchEffect 用法和区别
对象，如果只监听对象本身，改变对象内部属性时不会触发回调。如果要监听对象内部的变化，需要设置。响应式数据，并在数据变更时触发回调。，当数据变化时执行回调函数。
2025-02-17 15:14:38
495
原创 js 中 Object 的用法
Object是 JavaScript 中用于处理键值对数据的基础数据结构。你可以用字面量、构造函数、或者创建对象。对象属性可以通过点符号或方括号符号访问和修改。JavaScript 提供了多个方法来操作对象，包括等。
2025-01-08 17:25:16
789
原创 js 中 数组的 reduce 的用法
reduce()是一个非常强大的工具，适用于许多需要根据数组计算单一结果的场景，比如求和、计数、扁平化、查找最大/最小值等。使用时，要注意初始值的设置，尤其是在处理空数组时，避免出现错误。
2025-01-08 17:15:59
224
原创 vue+Spring Boot 使用WebSocket
WebSocket 原理：WebSocket 是一种全双工协议，建立连接后，客户端和服务器之间可以实时、双向地交换数据。它基于 HTTP 协议的升级机制，通过一个握手过程，客户端与服务器建立 WebSocket 连接，并且后续通信无需重新建立连接。Java 服务端：Spring Boot 提供了对 WebSocket 的内建支持，我们通过注解来处理客户端发送的消息，使用来推送消息到订阅的客户端。Vue 客户端：Vue 客户端使用SockJS和Stomp.js。
2025-01-08 16:29:00
1087
原创 使用webworker 多线程，快速计算大文件的hash值
之前发布过一个关于大文件计算hash值的，对于二三百MB 的文件的计算速度还是可以的，但是如果是一个G以上的文件，那么性能就非常不可观了，因为这计算hash值是一个cpu密集型任务，文件过大可能直接导致页面卡死。实现大文件分片上传，多文件上传，进度管控-优快云博客这次我们通过使用 webworker分线程的去计算文件的hash值，这样可以使得计算hash值的时间大大缩短。
2024-12-23 17:52:25
939
原创 Pinia 持久化失效
在开发模式下，热重载可能会影响持久化的数据，导致重新加载时数据丢失。如果确认在生产环境中有效，开发环境下可能是 HMR 的问题，可以尝试禁用 HMR 或清除浏览器缓存测试。如果你使用的 Pinia 或插件版本之间存在不兼容问题，可能会导致持久化功能无法正常工作。如果你使用了版本控制或文件系统缓存，可能会导致某些缓存被意外清除。在 Pinia 的创建代码中，确保已经正确地引入和使用该插件。也可以进一步配置持久化的方式，比如指定要持久化哪些字段，或者使用。中存储的数据是否符合预期，确保没有被意外清除或格式化。
2024-12-23 17:49:56
626
原创 Web Worker 的使用及案例
Web Worker 是实现前端并发处理的有力工具，它通过在后台线程中运行 JavaScript 代码，使得浏览器主线程不被阻塞，提升用户体验。适用于需要处理大量数据或进行复杂计算的场景。通过消息传递机制，主线程和 Worker 可以高效地进行数据交互，但需要注意它们不能直接共享内存和操作 DOM。这个例子展示了如何使用 Web Worker 将一个耗时的计算任务（计算大量数值的平方）从主线程中分离出来，让其在后台线程中运行，从而避免了页面卡顿的现象。
2024-12-23 15:27:02
1262
原创 js 中 blob对象 和 file 对象的区别及相互转换
Blob是一个通用的二进制数据容器，不包含文件的元数据；而File是Blob的扩展，代表着带有元数据的文件，通常与文件操作相关。从Blob转换为File需要通过File构造函数，将Blob对象作为数据部分传入。从File转换为Blob可以直接使用File对象本身，因为File本质上是Blob的一个子类。如果需要创建新的Blob，可以使用方法。
2024-12-20 16:12:50
923
原创 vue项目打包后部署，报错 Uncaught SyntaxError: Unexpected token ‘＜‘ 无法访问项目
我这里面有一个model 的 项目，那么我们在打包时，需要将public 的 / 改成 /model。原因就是 如果这个publicPath 如果还是 / 那么访问静态资源访问的是 第一个 项目的静态资源。最后发现 在nginx 中配置了 很多的 子级的项目，而我这个正好是一个子级的项目。还有修改路由模式的问题 将 history 修改成 hash 模式。网上的解决方案 有修改 public 的地址的，改成 /修改完成以后，这样子级的项目就可正常访问了。这个是只有一个项目的配置。
2024-11-17 17:22:38
1104
原创 实现大文件分片上传，多文件上传，进度管控
使用spark-md5 根据文件的 ArrayBuffer 格式将文件的内容生成一个hash值，来表示文件的信息。直接附上代码具体内容代码中注释都有，这个只是上传的模板，具体请求和要传递的参数需要自己和后端去对接。
2024-07-03 20:43:59
232
原创 el-select 中给option 添加绑定事件不生效
这里我们给@click 添加 native 修饰符 @click.native。通过控制台打印可以发现这个点击事件并没有生效。然后在进行事件绑定，这个点击事件即可生效。
2024-07-02 20:23:36
510
原创 实现移动端图片上传，回显功能
可以获取到这个file对对象的本地base64 格式的内容，来实现图片的展示。背景：使用的vant 组件开发钉钉H5微应用，但是钉钉对vant 的图片是不兼容的，因此这个上传图片的组件，在手机上默认图片加载不出来，是一个灰色的框。给input 的type属性设置成file属性，通过label来绑定这个input ，来获取到这个图片的file 对象。通过 new FileReader() 这个对象中的方法，来本地的解析这个选择的file对象。功能：要实现上传，展示，回显的功能。
2024-05-13 14:56:20
360
原创 vant 中复选框 实现 多选，反选，全选后点击单个全选按钮取消
list为渲染列表，当这个选中的长度等于渲染长度时this.checked 为true，反之为false，但是当这个checked 发生变化时，就会触发全选的change事件，所以就会出现取消一个选中时，所有的都会取消。钉钉H5微应用中使用了vant 组件，但是在做全选功能是出现了一个问题，当单个点击复选框时，把当前列表全部点击后可以实现全选按钮的自动选中。将底部的change事件改为click事件，但是会发现这个全选失灵了 ，这是我们使用一个额外的变量来代替这个checked ，即可实现该功能。
2024-05-08 21:41:47
1350
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人