- 博客(89)
- 收藏
- 关注
原创 JS新功能之:全新 Set 方法
目前,这些新方法已被主流浏览器普遍支持。:判断第一个集合是否是第二个集合的子集。:判断第一个集合是否是第二个集合的超集。:返回第一个集合与第二个集合的差集。JavaScript 的内置。:判断两个集合是否不相交。:返回两个集合的对称差。:返回两个集合的交集。:返回两个集合的并集。
2024-10-28 16:26:49 236
原创 JS新功能:Promise.try
如果f是同步函数并返回一个值,则Promise.try会返回一个解析为该值的Promise。如果f是异步函数并返回一个Promise,则Promise.try会返回该Promise并保持其状态。::在实际编程中,经常遇到需要处理一个函数f,这个函数可能是同步的,也可能是异步的(即返回Promise)。在这个示例中,函数asyncF是异步的,并返回一个在1秒后解析的Promise。不同的是,使用Promise.try时,如果f是同步函数,它会在当前事件循环中立即执行,而不是在下一个事件循环中。
2024-10-28 16:24:22 372
原创 判断数组arr1中是否包含和数组arr2的FieldName名称一样的,包含返回true,不包含返回false
判断数组arr1中是否包含和数组arr2的FieldName名称一样的,包含返回true,不包含返回false为了判断数组arr1中是否至少有一个元素的与数组arr2中的任意一个FieldName相同,你可以使用方法结合方法来实现。
2024-10-11 16:27:15 643
原创 vue3中,拦截双击事件的第一次点击,写一些逻辑
开发案例中,到目前为止,可以成功拦截第一次点击,但是需要注意的是,需要双击的频率在合适(双击频率要在300ms内点击第二次)的情况下才会拦截第一次点击,在里面写你要的TODO逻辑即可。如果需要每次双击都拦截到第一次点击,可以调一下定时器的时间即可,可以调到500ms,一般人双击的频率都可以在500ms点击第二次。在 Vue 3 中,如果想要拦截双击事件的第一次点击并执行一些逻辑,你可以使用一个状态变量来跟踪第一次点击事件,并在第二次点击时阻止第一次点击逻辑的执行。
2024-10-11 10:19:58 452
原创 Object.values() 、 Object.keys()
只能获取对象自身的可枚举属性值,不会获取继承的属性值。如果你的对象中包含了嵌套对象,那么返回的数组将只包含嵌套对象的引用,而不是嵌套对象的值。如果你需要递归地获取所有嵌套对象的值,你可能需要编写一个递归函数来实现这一点。这样,如果对象中有多个相同的值,你就能获取到所有对应的键。在 Vue 3 的组合式 API 中,如果你有一个响应式对象,例如。如果你需要在 Vue 组件中获取响应式对象的值,你可以使用同样的。的所有键,并检查每个键对应的值是否等于我们想要找的值。一旦找到匹配的值,我们就得到了对应的键。
2024-09-30 17:05:29 612
原创 自定义验证器函数
组件,来确保用户输入的数据符合特定的要求。例如,你可能不希望用户在某些输入字段中使用特定的关键字,因为这些关键字可能是保留字或有特殊意义。这个验证规则对象通常用在表单组件中,例如 Element Plus 的。
2024-09-30 16:58:30 665
原创 已知有一个对象,通过对象的值拿到对象的键
函数返回一个数组,包含所有与目标值相匹配的键。这样,如果对象中有多个相同的值,你就能获取到所有对应的键。函数遍历对象的键,并检查每个键对应的值是否等于目标值。如果找到匹配的值,函数返回对应的键。函数接受两个参数:一个对象。
2024-09-30 16:52:00 169
原创 vue3代码优化
这段代码可以通过减少重复代码和简化条件逻辑来优化。首先,可以观察到,无论。:通过提前返回或继续到下一个条件,减少嵌套的深度,使代码更易于阅读和维护。这种优化不仅减少了代码量,还提高了代码的可读性和可维护性。如何,这个值只在不是主表的情况下设置一次。都被设置为取消主表的文本。的逻辑移动到条件之外,因为无论。的检查,直接在一行中设置。:使用三元运算符来简化。
2024-09-20 10:07:44 249
原创 vue3兄弟组件间的通信 mitt
这样兄弟组件child2触发事件时,就会通过$bus.emit发出通知,兄弟组件child1通过$bus.on监听到,就可以做下一步的逻辑。注意,当子组件child1调用完$bus.on后,在组件销毁前,销毁监听事件。两个子组件都引入mitt.js文件。
2024-09-12 10:58:43 321
原创 vue3项目监听浏览器的返回按键事件
有这样一个需求,当在用户在浏览器点击返回按钮的时候,需要弹出当前组件的退出确认框。并且如果当前页面有个已经打开了的弹窗时,弹窗还没关闭就点击浏览器的返回按钮,要求点击返回时,弹窗要关闭。在组件被卸载时,确保移除事件监听器,避免内存泄漏。当用户点击浏览器返回按钮时,会触发。当组件被挂载时,添加了一个。
2024-09-12 09:28:55 674
原创 问题:vite首次加载慢
不是说vite项目的启动很快很快吗?vite项目的启动确实是快(注意这里的启动是指命令行启动完毕,不是指启动完之后首页加载完毕)如果某个界面是首次进入,且依赖比较多/比较复杂的话,那就会比较慢了。vite之所以启动快,是因为vite启动时并不会像webpack一样对所有代码进行编译/打包/压缩, 他只会对一小部分代码进行一些简单的处理,剩余的工作都交给浏览器,以及运行时进行依赖分析,动态打包,动态引入。引入element-plus组件后。
2024-09-11 11:43:44 674
原创 判断展示栏是否包含某字段,已有的话不能再添加该表格的字段
(x) =>currentDisplay.value.arr是当前展示栏展示的数组元素;params是当前这张表格正在添加的元素字段的信息,包含当前的表格名和字段名;
2024-09-03 16:43:59 186
原创 vue3实现拖拽移动位置,拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动
拖拽元素移动的时候,偶尔会出现拖拽过程中鼠标松开后元素还吸附在鼠标上并随着鼠标移动,要再按一下元素才会被放置下来。出现该问题的原因是:这个过程会触发H5原生的拖拽事件,并且不会监听到onmouseup,从而导致鼠标松开也能够拖拽。在相应的位置添加这2个函数即可。
2024-09-03 09:07:02 912
原创 vue3代码解读:=> let BASEURL;// 注册实例export const initAxiosInstance = ({ baseUrl = ‘/‘, beforeReques
这段代码是一个用于初始化和配置 HTTP 请求实例的模块,可能是用于一个基于 Axios 的自定义 HTTP 客户端。代码使用了 ES6 语法,并且似乎是为 Vue.js 或类似的前端框架设计的。:声明了一个名为BASEURL的变量,这个变量将用于存储 HTTP 请求的基础 URL。:这是一个名为的导出常量,它是一个函数,用于初始化 HTTP 请求实例。函数接收一个对象参数,该对象包含用于配置 HTTP 请求的属性。:在对象解构时提供了baseUrl的默认值,如果调用时没有提供baseUrl,则默认使用。
2024-08-22 17:20:04 402
原创 vue3模拟生成并渲染10万条数据,并实现本地数据el-table表格分页
【代码】vue3模拟生成并渲染1万条数据,并实现本地数据el-table表格分页。
2024-08-22 17:09:23 712 1
原创 vue3实际开发过程中 控制台警告:=> DerivativeIndicators.vue:288 value cannot be made reactive: null
原本代码 let rowData = reactive(null);,null是基本数据类型,应该用ref定义,reactive定义的话是定义对象那些;改为 let rowData = reactive({});
2024-08-21 10:16:12 198
原创 vue3实际开发中的问题 => main.js:36 ElementPlusError: [el-dialog] [Attribute] custom-class is about to be dep
如果你正在从 Vue 2 迁移到 Vue 3 或从 Element UI 迁移到 Element Plus,你需要将。组件中: custom-class="dialog-root" => class="dialog-root"在 Vue 3 和 Element Plus(Element UI 的 Vue 3 版本)中,在 Vue 3 和 Element Plus 中,你可以直接使用。属性用于给组件自定义类名已经被弃用。属性,允许你为组件的根元素添加一个自定义类名。属性来为组件添加自定义类名。
2024-08-21 09:44:33 1048
原创 js reduce()方法的基本使用
/ })第一个参数 prev(必需):上一次调用回调返回的值,第一次初始值是数组的第一项。如上述例子,prev就是1,第二次就是 prev + cur 的结果;第二个参数 cur(必需):当前数组中被处理的元素,第一次是数组的第二项。如上述例子,cur是 2,第二次就是 3;第三个参数 index(可选):当前被处理元素在数组中的索引。如上述例子,index第一次是 1,第二次是 2;第四个参数 arr(可选):调用 reduce()方法的数组。
2024-08-19 14:37:55 476
原创 vue3代码解读:let keys = Object.keys(arr[i]); str += JSON.stringify(keys[j]); str += JSON.stringify
这段代码是一个 JavaScript 函数,名为(可能是的拼写错误,意图是删除对象数组中的重复项)。函数接收一个数组arr作为参数,并返回一个去除重复对象的新数组uniques。
2024-08-12 16:21:01 495
原创 不知道索引,如何删除数组中的多项数据
saveTableListChange.value.include(item)就是tableList中包含saveTableListChange里面的对象值,而!方法可以对数组中的每个元素执行一个由你提供的“reducer”函数,将其结果汇总为单个返回值。方法测试数组中是不是至少有一个元素通过了由你提供的函数测试,它返回的是一个布尔值。是处理这类问题的最简单方法,因为它们创建了新数组而不会修改原始数组,并且代码更简洁。方法会创建一个新数组,包含通过测试(提供函数)的所有元素。后将结果赋值回原数组。
2024-08-02 08:55:05 349
原创 删除数组arr中,checked为true的项
请注意,这种方法不会修改原始数组,而是返回一个新数组。删除数组arr中,checked为true的项。如果你想要修改原始数组,你可以给。方法来创建一个新数组,该数组只包含。
2024-07-29 14:14:00 215
原创 vue3 POST请求中,文件流下载添加responseType: ‘arraybuffer‘的问题
如果responseType的值改为'blob',responseType: 'blob' // 确保将响应类型设置为blob,会发现可以下载,但是打开不了。是一个方法,用于发送 POST 请求。你需要将原始的 Axios 请求改写为使用这个代理对象的方法。用于存储请求返回的数据,你可以在模板或其他计算属性中使用它。最后,你可以在组件的适当位置调用。函数,例如在组件的生命周期钩子中,或者在用户触发的事件处理函数中。是假设的,你需要根据你的项目实际情况来调整。方法接受正确的参数,并且能够处理响应类型。
2024-07-22 16:26:33 518
原创 arr.findIndex(item => item.name === ‘小白‘) =>请找出数组arr中,name=小白那一项,并替换为 {name: ‘大大‘, age: 9, sex: ‘女‘}
的第一个参数是开始替换的索引位置,第二个参数是要删除的元素数量(在这个例子中是1,因为我们只替换一个元素),第三个参数是替换进去的新对象。请找出name=小白那一项,并替换为 {name: '大大', age: 9, sex: '女'}{name: '小明', age: 11, sex: '男'},{name: '小红', age: 12, sex: '女'},属性为"小白"的对象,并将其替换为新的数据,你可以使用数组的。属性为"小白"的对象,并返回其索引。中的"小白"将被替换为"大大"。
2024-07-22 16:16:37 151
原创 array.some() ==> 查找数组list中,是否有包含与当前currKey的值不一样的misId
查找数组list中,是否有包含与当前currKey的值不一样的misId。方法会测试数组中的元素是否至少有一个满足提供的函数实现的测试。{misId: 'e', name: '小白白'},{misId: 'e', name: '小白'},{misId: 'r', name: '小王'},{misId: 'r', name: '小小王'},并为每个元素调用提供的函数。如果遍历完所有元素都没有找到,
2024-07-22 16:09:59 601
原创 如何获取到数组里每一项的type,整理到一个数组里面
方法会创建一个新数组,其包含你提供的函数在每个元素上调用的结果。数组的每个元素,并且对于每个元素,它调用了一个箭头函数。如何获取到每一项的type,整理到一个数组里面。属性,并将其整理到一个新的数组中,你可以使用。,这个函数返回当前元素的。,其中包含了所有元素的。
2024-07-09 09:16:22 214
原创 let arr = [1, 2, 0, 1];判断数组arr,如果数组arr 元素中缺少数字1, 2, 3其中一个就返回false,否则返回true
判断数组arr,如果数组arr 元素中缺少数字1, 2, 3其中一个就返回false,否则返回true。是一个集合数据结构,它可以存储唯一的值,这使得检查数组中是否包含特定的一组值变得简单。是否包含数字1, 2, 3中的所有数字,可以使用。包含了1, 2, 3;在这段代码中,我们首先将数组。数组中的每个数字是否都在。来帮助我们快速检查。
2024-07-09 09:10:09 334
原创 git 撤销上一次提交
当在你的开发分支开发中,如果当前页面的修改还不确定但是提交了,且上一个提交的修改要合并到主干分支,此时需要撤销当前提交。这样刚刚提交的版本就撤销回暂存区了,可以备份然后撤销修改,等合并完代码再到开发分支改回去。先撤销当前的提交,撤销回暂存区,然后保存备份一下....
2024-07-04 17:54:01 1015
原创 No matching version found for xe-utils@^3.5.28
npm i 下载依赖时报错:No matching version found for xe-utils@^3.5.28。排查发现,xe-utils并没有用到xe-utils@^3.5.28版本。然后重新npm i 下载即可。
2024-07-04 09:06:47 321
原创 在远程仓库重命名了分支名,本地git pull 报错:Your configuration specifies to merge with the ref ‘XXXXX‘ from the remot
1、如远程修改分支名为 feature-XXX-1234,在本地vscode对应的分支上(对应远程未改名前关联的分支名),也重命名和远程对应的分支名 feature-XXX-1234。关联后,通过命令 git branch -vv 可查看所有本地分支关联的远程分支以及最新的操作情况;通过git log 可查看最新日志是否为最近一次的操作情况;如果都对应上了,即可 git pull 成功。2、修改后的本地分支与远程分支关联。在输入框更改分支名即可。
2024-06-27 09:22:16 361
原创 vue3代码解读:const reportItem = ref([{ icons: ‘‘, label: `问题查询: 0` }])
的值和它内部对象的属性将会是响应式的,即当它们被修改时,视图会自动更新以反映这些更改。函数接收一个参数,这里是传递了一个数组。这段代码是在使用Vue 3的Composition API,具体来说是使用。声明的变量不能被重新赋值,但是它内部的属性是可以被修改的。可以在Vue组件的模板中被使用,绑定到相应的元素上。是响应式的,任何对这些属性的更新都会自动反映在DOM中。函数来创建一个响应式的引用。包中导入的一个函数,用于创建响应式引用。在JavaScript中,使用。在这个组件的模板中,
2024-06-06 17:08:42 334 1
原创 如何同时判断变量等于null和undefined的情况下,赋值0
data === undefined时,如何修改判断条件让它值为undefined时 显示0。的情况下会返回第一个真值,否则返回其右侧的表达式。因此,如果您在Vue 3的。)来简化三元运算符。就是一个响应式的变量,它将根据。在Vue组件中,通常您会希望。,您可以使用逻辑或操作符(要修改条件判断,使得当。
2024-06-06 16:31:44 349
原创 vue3代码解读:if(res && res?.data?.data < 0) { return [] }
,它允许你安全地访问嵌套的对象属性而不用担心因为访问了未定义的属性而导致的错误。这代码片段是一个条件语句,它检查一个名为。:如果上述条件为真,函数将返回一个空数组。这就是为什么我们首先检查。将抛出错误,因为你不能访问。是否存在且为真值(即不是。),函数将返回一个空数组。这里使用了可选链操作符(
2024-06-06 16:12:53 265
原创 在 JavaScript 中,除了使用可选链操作符,还有哪些方法可以安全地访问对象的深层属性?
`),还有几种方法可以安全地访问对象的深层属性,避免因访问不存在的属性而抛出错误。使用如Lodash这样的工具库提供的函数,例如`get`函数,可以安全地访问深层属性。使用这些方法可以有效地避免在访问对象深层属性时出现的错误,同时保持代码的清晰和可维护性。使用try-catch来捕获在访问深层属性时可能发生的任何类型错误。通过代理对象,可以在访问属性时设置自定义的行为。使用条件运算符来检查属性是否存在于对象中。使用循环遍历对象的键,直到达到所需的深度。检查对象是否具有特定的属性。
2024-06-06 16:04:34 261
原创 实际开发中遇到的问题:Error while fetching extensions. XHR failed
尝试了网友的方法,打算通过管理员身份运行cmd输入相关命令去解决,但是没有管理员权限,原因是连了vpn,内网不允许安装任务插件,不安装即可。听说下面的方法有网友评论说有用,大家可以去看看。但是我觉得根本原因就是连了内网,内网明文说不允许安装插件,怎么挣扎都没用。
2024-06-05 16:26:22 607
原创 vue3 实现自定义指令封装 --- 通俗易懂
1.1 在<script setup>定义组件内的指令,任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令。
2024-06-04 15:27:50 1321 1
原创 vue3代码解读:alias: { ‘@‘: fileURLToPath(new URL(‘./src‘, import.meta.url)) }解释这段代码
这段代码是配置别名(alias)的一个例子,通常用于JavaScript模块打包工具或构建工具中,比如Webpack。别名允许你在模块路径中使用简短的别名而不是完整的路径。使用别名后,你可以在项目中的任何地方通过。来代替冗长的相对路径或绝对路径,使得路径更简洁,也方便维护。目录的完整文件系统路径。这样,开发者在引用模块时可以使用。综合来看,这段代码的作用是设置一个别名。时,它会被替换为当前模块目录下的。例如,如果当前模块的路径是。,而不需要写完整的路径。,当在模块路径中使用。
2024-06-04 08:45:15 1641
原创 vue3代码解读:else if (errorCode == ‘1000‘) { let params = { authT
这段代码整体上是在处理登录过程中可能遇到的不同情况,并根据API响应进行相应的操作,如设置或移除cookies和会话存储项,显示提示信息,或者调用原生方法。这段代码是一个条件分支,通常出现在JavaScript的异步处理流程中,特别是在处理登录逻辑时。,并对特定错误码执行一系列操作。语句来检查一个错误码。
2024-06-04 08:43:00 983
原创 vue3代码解读:const inApp = !(navigator.userAgent.indexOf(“ChannelId/2“) === -1)解释这段代码
表示用户可能不在应用内。这可以用于确定是否需要调整网站或应用的某些行为,以适应用户是通过应用访问还是直接在浏览器中访问。这段JavaScript代码用于检测用户的浏览器用户代理(User Agent)字符串中是否包含特定的字符串。简而言之,这段代码检查用户的浏览器User Agent中是否包含特定的标识符。,表示用户可能在某个应用内浏览;根据这个检测结果,它设置了一个布尔值。,代表用户是否在某个应用内操作。
2024-06-04 08:38:33 155
原创 vue3代码解读:router.afterEach(to => { let title = to.meta?.title || ‘\u200E‘ document.title = title
这段代码是用于Vue.js框架中的路由守卫(router guard)的JavaScript代码片段。它的作用是在每次路由切换后更新页面的标题。综上所述,这段代码的作用是在每次路由切换后,根据目标路由的元数据设置页面的标题。是Vue Router提供的全局导航守卫之一,它在每次路由跳转完成后调用。是Web API中的一个属性,用于获取或设置当前文档的标题。属性通常用来定义路由的标题,这个标题会在页面的。是一个对象,通常用于存储与路由相关的元数据。: 这行代码尝试从目标路由对象的。值设置为当前文档的标题。
2024-06-04 08:30:43 276
Cookie-Editor 1.12.2
2024-07-04
Vue.js devtools 6.0.0 beta 21
2024-07-04
2024前端面试八股文
2024-04-23
2024年前端工程师面试题
2024-04-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人