JS解决方案
文章平均质量分 53
博客zhu虎康
把最实用的经验,分享给最需要的读者,希望每一位来访的朋友都能有所收获!
展开
-
JS 实现栈和队列
【代码】JS 实现栈和队列。原创 2024-08-28 08:46:17 · 230 阅读 · 0 评论 -
用原生js写一个贪吃蛇
在上面的代码中,我们定义了一些变量和常量,包括格子大小、行列数、蛇的初始位置和长度、食物的初始位置、蛇的移动方向和速度等。然后,我们实现了一些函数,包括绘制格子、绘制食物、绘制蛇、移动蛇、处理键盘事件等。最后,我们启动了游戏循环,并监听键盘事件,以便让玩家控制蛇的移动方向。在 HTML 文件中,我们创建了一个带有 ID 为 canvas 的 canvas 元素,用于绘制游戏界面,并引入了一个名为 snake.js 的 JavaScript 文件,用于实现游戏逻辑。原创 2024-08-16 14:54:44 · 232 阅读 · 0 评论 -
浅拷贝与深拷贝
在项目中,经常会用到浅拷贝与深拷贝,比如,我们在弹框中填写表单信息进行编辑时, 需要用到浅拷贝与深拷贝,当对内容进行修改之后关闭弹框或取消弹框操作,那这个时候是不需要我们对表单信息做出修改的,因此在此处就用到了深拷贝,因为浅拷贝无法将我们修改表单信息,接着关闭或取消操作后的表单信息再原封不动的还回去的。原创 2024-08-16 14:52:54 · 793 阅读 · 0 评论 -
【报错】Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>)
在使用 JS 中,不严谨的写法,会导致项目中出现未知的问题,转换出错,也就是说本是 JSON 字符串,但是其实是一个空对象。所以我们只要在使用 JSON.parse () 前,需要排查一下是否有某个变量在JSON.parse()转化的时候是没有值的,是undefined。判断需要转发的对象是不是null,如果是null,我们可以给他赋值为一个空的 JSON 字符串。原创 2024-08-16 14:51:10 · 293 阅读 · 0 评论 -
forEach 发起的异步请求改写为同步
这段代码中的问题在于,在map.forEach循环中发起了异步请求,而在异步请求完成之前就执行了result.push(value),这样就导致了结果中可能不包含"yzhou"数据。为了解决这个问题,你可以将异步请求改为同步执行,或者使用async/await来保证异步请求完成后再将数据加入结果数组。这里展示一种使用async/await的解决方案。我们重构数据结构时,出现控制台打印的信息中有我们对数据的重新整合结果,但是传到子组件中并未出现正确的数据结构,也就是部分处理结果并未处理就直接传递给了子组件。原创 2024-04-28 10:06:26 · 476 阅读 · 0 评论 -
多级嵌套对象数组:根据最里层id找出它所属的每层父级,适用于树形数据格式
上面的代码定义了一个 findHierarchy 函数,该函数接收一个多级嵌套的对象数组 data 和一个目标 ID targetId。函数首先定义了两个辅助函数 findParent 和 generateHierarchy,分别用于递归查找父级对象和递归生成父级对象。然后,调用 generateHierarchy 函数生成层级结构,并返回结果。接下来,我们需要继续处理,将生成的该格式数据转换成我们所需要的格式,逻辑如下。原创 2024-04-24 17:28:18 · 574 阅读 · 0 评论 -
问题:父层div和子层div点击事件冲突,子层点击事件被父层点击事件所遮挡
另一种方法是在父层的点击事件处理程序中调用 event.preventDefault() 方法来阻止默认行为,这样父层点击事件就不会触发,而子层的点击事件会正常执行。你可以在子层的点击事件处理程序中调用 event.stopPropagation() 方法来阻止事件冒泡,这样点击子层时就不会触发父层的点击事件了。你可以根据具体情况选择使用其中的一种方法来解决父层和子层点击事件的冲突问题。父层div和子层div点击事件冲突,子层点击事件被父层点击事件所遮挡。原创 2024-04-10 17:32:27 · 792 阅读 · 0 评论 -
让请求自动请求所属IP的路径地址
不同电脑访问不同电脑下的指定地址的文件,当你通过外网IP去访问该页面时,该页面所需的请求也是该IP下的资源。原创 2024-04-07 10:13:04 · 269 阅读 · 0 评论 -
location.href通过添加token验证跳转连接(多用于导出下载文件)
用后端下载文件的接口时,接口是一个get请求并且需要以查询字符串参数的格式进行传参,想使用 window.location.href = url 进行跳转,但是出现了需要待token的情况。原创 2024-03-29 13:11:13 · 835 阅读 · 0 评论 -
Object.prototype.hasOwnProperty.call 为什么要在for in 场景中使用
上述代码中,for…in 循环将会输出所有的键,包括继承自原型链的键 c。在 JavaScript 中,使用 Object.prototype.hasOwnProperty.call 主要是为了确保在使用 for…in 循环遍历对象属性时,我们在使用 for…in使用场景的时候,经常会发现一般的写法是这样的。为什么要在for in 场景中使用。原创 2024-03-22 08:41:25 · 476 阅读 · 0 评论 -
为什么不用 index 做 key 引出的 Diff 算法
举一个例子,现在有一个列表list,我们已经将它渲染在了我们页面上,现在呢,要修改list,比如将某个值给他换了个数据,这个时候我们知道DOM要被重新渲染的,也就是我们常说的列表发生变化,DOM树重新被渲染,那我们频繁改变呢,而这个列表生成的虚拟DOM树又很大的情况下怎么办,浪费资源,浪费性能,怎么办!时,Diff 算法就会进行遍历比较,发现其他节点并未变化,只是某个节点发生了变化,就不用去重新渲染其他DOM结构了,这也有点像 “有则改之无则加勉” 这句话。那么,新问题来了,为什么?,但好像都是这么写的。原创 2024-03-18 17:18:52 · 899 阅读 · 0 评论 -
富文本编辑器
Vue-Quill-Editor富文本编辑器使用。index.vue 是这样的。实现 富文本 编辑器。原创 2024-03-14 08:50:05 · 472 阅读 · 0 评论 -
Iframe 通信:一个vue项目中通过iframe嵌套另外一个vue项目,如何让这两个项目进行通信
当接收到来自父窗口的消息时,就会将消息打印输出到控制台中,并使用postMessage方法向父窗口发送了一条消息。需要注意的是,当使用postMessage方法发送消息时,第二个参数指定的是消息的目标窗口的origin,这里我们使用通配符*表示允许发送消息到任何域名,但在实际应用中建议设置具体的域名。然后,在父窗口中监听了message事件,当接收到来自iframe的消息时,就会将消息打印输出到控制台中。需要注意的是,由于涉及到跨域通信,需要确保两个项目的域名不同,否则会受到浏览器的同源策略限制。原创 2024-02-01 10:20:47 · 2698 阅读 · 4 评论 -
JS 将字符串‘10.3%‘ 经过运算加2转换为 ‘12.3%‘
已知 字符串 a = ‘10.3%’,现需将转换为 字符串’12.3%’原创 2024-01-23 11:08:23 · 349 阅读 · 0 评论 -
vue3项目中关闭 eslint 检验
请注意,关闭 ESLint 检验可能会使你的代码存在潜在的问题,因此建议仅在调试时使用。在生产环境中,应该保持 ESLint 检验开启以确保代码质量和可维护性。在 Vue 3 项目中,可以通过修改 package.json 文件或者配置 .eslintrc.js 文件来关闭 ESLint 检验。在上述代码中,我们将 rules 配置项中的所有规则的值设置为 0,或者将其删除,表示禁用所有规则。关闭 eslint 检验。原创 2024-01-18 11:32:22 · 2382 阅读 · 0 评论 -
js 中的预解析
话不多说,我们先看一下代码。原创 2024-01-17 16:33:21 · 344 阅读 · 0 评论 -
JS类型转换规则 与运算规则
JS 类型转换大致分为以下四种,如果想要对象转数字,那就让对象先转为 原始,然后再转为数字即可解决。在开发中我们会遇到输入的内容是字符串,而遇到商品数量等需要数字的就需要我们进行处理,处理如下。大家觉得这个逻辑能懂吗,我是没有懂,因此,我想到了下面的方法,深拷贝和浅拷贝,原创 2024-01-17 16:32:10 · 593 阅读 · 0 评论 -
选中框中显示不了选中的值,试试用强制刷新 forceUpdate
element select 选择器 选中框中显示不了选中的值。原创 2023-12-18 17:25:38 · 215 阅读 · 0 评论 -
用 js 实现 判断两个数组是否相同
在这个示例中,arraysAreEqual 函数会接收两个数组作为参数。它首先检查两个数组的长度是否相等,如果不相等,则可以确定两个数组不同。如果长度相等,那么它会逐个比较两个数组的元素,如果任何一个元素不相等,就可以确定两个数组不同。判断两个数组是否相同,你可以检查它们的长度和每个元素是否相等。有数组 array1 和 array2 ,如何判断这两个数组是否相同。原创 2023-11-23 10:29:56 · 507 阅读 · 0 评论 -
用 js 实现判断是否是小数
请注意,由于 JavaScript 的浮点数精度问题,使用浮点数进行精确计算可能会导致意外结果。因此,在处理小数时建议使用适当的工具库(如 Decimal.js)来处理精确计算。此正则表达式匹配包含一个小数点和可选的小数部分的数字,允许负号出现在开头。如何用 js 实现判断是否是小数。原创 2023-11-21 11:28:23 · 1598 阅读 · 0 评论 -
js 数组中使用 push 报错
unshift 方法返回的是修改后的数组的长度,而不是修改后的数组本身。因此,将 arr.unshift([1,1]) 的返回值赋值给 temp 是错误的。push 方法返回的是修改后的数组的长度,而不是修改后的数组本身。因此,将 temp.push([0,0]) 的返回值赋值给 tt 是错误的。在 console.log(tt) 中,你试图输出变量 tt,但是 tt 并没有被定义,因为之前的赋值操作是错误的。原创 2023-11-20 18:49:43 · 925 阅读 · 0 评论 -
用 js 实现数组中指定元素的替换
在上述代码中,首先定义了原始数组arr和要替换的目标数组replaceArr,以及用于替换的新数组replacement。然后使用findIndex方法查找要替换的元素的索引,条件是该元素等于replaceArr的第一个元素,并且下一个元素等于replaceArr的第二个元素。已知 数组 arr = [160, 20, 179, 10, -170, -20];请将数组 arr 中的 [179, 10] 替换为 [-178.16883, 13.27614]原创 2023-11-16 14:59:50 · 2450 阅读 · 1 评论 -
用 js 实现一维数组转化为二维数组
在上述代码中,我们使用 flatMap 方法来遍历原始数组 arr。如果索引为奇数,则返回一个空数组。用 flatMap 方法来简化将数组 [160, 20, 179, 10, -170, -20] 转换为 [[160, 20], [179, 10], [-170, -20]] 的过程。使用 JavaScript 的循环和 slice 方法来将数组 [160, 20, 179, 10, -170, -20] 转化为 [[160, 20], [179, 10], [-170, -20]]。原创 2023-11-16 14:59:26 · 1998 阅读 · 0 评论 -
js 中的 map
在这个示例中,我们先创建了一个空的Map对象 myMap,然后使用 set 方法向其中添加了三个键值对。我们可以使用 get 方法来获取指定的键对应的值,使用 has 方法来检查Map中是否包含指定的键。接着,我们使用for循环遍历整个Map中的所有键值对,并输出到控制台。最后,我们演示了如何使用 delete 和 clear 方法来删除和清空整个Map。注意:Map是ES6新增的数据类型,不支持低版本的浏览器,你需要使用Polyfill等方法来兼容旧版浏览器。熟悉了解 map 使用。原创 2023-11-07 11:49:57 · 233 阅读 · 0 评论 -
如何使用 promise 和async、await 结合处理异步中的同步请求
常见的例子可以是发送网络请求。而使用异步方式发送网络请求时,程序会立即发起请求,并不会等待请求的返回结果,可以继续执行后续的代码。总结起来,同步操作是按照顺序逐个执行,会阻塞程序的执行,需要等待上一个操作完成再进行下一个操作。而异步操作则是允许程序在执行某个操作时继续执行其他操作,不需要等待当前操作完成。异步操作则不同,它允许程序在执行某个操作时继续执行其他操作,而不需要等待该操作完成。在异步操作中,当某个操作被触发后,程序会立即注册这个操作,并继续执行后面的代码,而不会阻塞程序的执行。原创 2023-11-03 15:56:10 · 750 阅读 · 0 评论 -
写一个方法实现数组元素每两个元素加一个换行,并进行文件导出
然后再写一个数据导出方法。原创 2023-11-02 15:02:28 · 173 阅读 · 0 评论 -
js 实现删除数组指定元素
在上述代码中,我们使用 filter() 方法来创建一个新的数组,该数组只包含满足指定条件的元素。在上述代码中,我们使用 slice 方法获取要删除的元素之前和之后的部分,并使用展开运算符将它们合并成一个新的数组。注意,filter()方法也不会改变原始数组,而是返回一个新的数组,因此我们将新的数组重新赋值给变量 arr。方法是 JavaScript 中用于修改数组的原生方法之一,它可以用来删除数组中的元素。方法是 JavaScript 中用于筛选数组的原生方法之一,它可以用来删除数组中的元素。原创 2023-09-30 21:35:42 · 703 阅读 · 0 评论 -
js 新学一招,点击出现弹框,点击其他地方关闭弹框
鼠标点击菜单,出现二级菜单,当点击其他地方时,二级菜单自动关闭。原创 2023-09-27 15:03:57 · 903 阅读 · 0 评论 -
JS 判断数组维度,一维数组还是多维数组
将所要判断的数组传到 function 中,输出即是当前数组的维度。想要判断数组的维度,是一维数组还是多维数组。原创 2023-09-08 10:16:58 · 527 阅读 · 0 评论 -
Vue 项目开发将数据下载导出到本地的方法
需要使用浏览器的File API,本地存储多次接口返回的数据,在这里我使用的Vuex状态管理去存储调用,实现vue组件之间的通信,然后使用如下代码作为下载的方法。Vue 项目开发时,要求不调用接口下载,而是主动将接口多次调用产生的接口返回值讲过保存保存到本地。原创 2023-09-06 19:19:33 · 682 阅读 · 0 评论 -
原生 Ajax 发送请求
为 200 时,表明请求成功,可以在回调函数中处理返回的数据。readyState请求准备状态,共有四个值1-4,1表示xhr创建 2表示数据处理完成 3表示请求已发送。原生的ajax,get没有params,所以,直接拼接到url上。查询字符串 queryString。如果是post请求,原生ajax,需要设置一个请求头,告诉后端,我发送的数据是什么格式的。后端接口文档中写了需要什么样格式的数据!,我们照着设置就好了。表示请求返回的状态码。原创 2023-09-06 18:57:23 · 518 阅读 · 0 评论 -
报错:数组明明有内容但打印的length是0,学会使用 async 和 await 解决问题
因为我们拼接的数据是从接口请求的,而接口请求发送的ajax请求是异步的,因此遇到这种情况,基本上都是一点,你的数组数据来源是异步请求产生的(例如 ajax/axios ),就比如你在ajax的success回调中没有直接使用这个数据,而是赋予了一个全局变量,你此时在ajax的下方打印这个全局变量,便会出现上面的数组有值而长度为0的状况。那个时候的数组长度确实还是0。但这个数组包含修改后的数据。原创 2023-09-06 13:24:18 · 2094 阅读 · 0 评论 -
JS 将数组中相邻兄弟切成一个数组
用 for 循环结合数组的 push。将数组中相邻兄弟切成一个数组。原创 2023-09-05 18:45:09 · 57 阅读 · 0 评论 -
JS 将指定位置添加换行
将指定位置的字符逗号转换为换行,可以使用JavaScript的字符串方法 slice() 和 replace() 来将指定位置的字符(逗号)转换为换行。请注意,在这个方法中,我们仅仅转换了第三个逗号,如果您需要将其他逗号转换为换行,请更改 index 变量的值为另一个指定位置的逗号的位置。在上面的代码中,我们首先定义了要转换逗号的位置,这里是第三个逗号(index=3)。方法将字符串分为两个部分:从开头到指定位置和从指定位置到字符串末尾。最后将两个部分合并起来,以创建一个新的字符串。原创 2023-09-05 18:01:36 · 538 阅读 · 0 评论 -
JS 删除数组中的第一项和最后一项
需求分析。原创 2023-09-05 16:11:22 · 1183 阅读 · 0 评论 -
Vue 如何监听 localstorage的变化
const that = this 其实就是在this改变之前先复制一份给that,那么在程序后面的运行中就可以用that来赋值该函数以外的对象了,比如that.order。我刚开始做的时候,考虑不周,没有写const that=this 这一句,我用的如下代码,一直报错,赋值不了,如下代码是错误的,我们想着用 计算属性 computed 和 watch 监听实现,但根本没有监听到。利用 const that=this,可以将值存进store中,第二种方法:用 vuex。原创 2023-09-05 13:17:47 · 1163 阅读 · 0 评论 -
JS 一维数组 和 二维数组之间的相互转换
在日常开发中,我们可能会遇到返回的数据不能直接使用,而数据提供者只给你传递二维数据格式的数据,这个时候就需要我们做转换,下面是总结的一些方法,可供参考。原创 2023-09-04 11:31:23 · 2175 阅读 · 0 评论 -
js中 0==‘0‘、0==[] 为 true ,‘0‘==[] 为false
前两者等式成立都是因为发生了一次类型转换,而后者如果要成立,就要发生两次类型转换,这应该是非法的。真正成立的等式是’’==[],只发生一次类型转换其实你拿str=“0”,然后取str[0]就知道这个其实是有值的,这显然不符合空数组的定义。js中 0==‘0’、0==[] 为 true ,为什么 ‘0’==[] 为false。原创 2023-08-22 13:30:04 · 860 阅读 · 0 评论 -
【报错】VM296:1 Another version of Vue Devtools seems to be installed. Please enable...
因为之前在学习时引入了 Vue2和Vue3 的可视化插件,因此现在控制台报错的意思是 : 装了多个vue的开发插件(Vue.js devtools)。只保留一个版本就行了,其他的删除或者禁用就可以了。只保留一个版本就行了,其他的删除或者禁用就可以了。在运行项目后,控制台报错如下。原创 2023-08-22 11:25:30 · 253 阅读 · 0 评论 -
如何优雅的跳出 for 循环
forEach无法通过正常流程(如break)终止循环,但可通过抛出异常的方式实现终止循环。虽然数组的length不变,但用for…in遍历数组会遍历到那些新定义的属性。且这个对象必须是iterable可被迭代的。如Array, Map, Set。of循环修复了for…in存在的问题,他只遍历属于对象本身的属性值。属历史遗留,用于遍历对象的属性(数组的索引值也算属性)。将输出 1 2 4 5 6,3不会输出。如何做到优雅的跳出 for 循环。循环遍历一般有以下几种。break 跳出循环。原创 2023-07-06 19:24:44 · 1300 阅读 · 0 评论