JS萌新遇见的bug

前言:

记录在项目里使用JS遇见的问题和处理思路,留下自己的成长经历,希望自己现在一个个bug记录,脚印一个个留下,期待未来回首,发现自己进步很大的自豪感。 好了,前言完成,进入正题( ̄▽ ̄)~*。

正文:

那些感觉会对的,但是就是错了的bug。Hbuild它变量名错误也不报错,这debug很难受啊

bug1:

想要完成的逻辑:在一个对象数组里找和传参对象具有相同ID的对象,然后修改这个对象的某个属性值。

实际运行的问题:两个打印出来一样数值的字符串,无法执行通过比较相等的if语句。

最后采用的办法:JS语法里面对于相等的判断有'=='和'==='两个,前者比较值,后者比较值和类型,对比log输出是一样的数值一样的类型,无法解释为什么不相等。后面就放弃了foreach方法,改成find方法。

javascript 复制代码
//根据参数的id修改对应的对象里面的值
listChange(equniment) {
    console.log('equniment', equniment);
    console.log('this.devices', this.devices);

    //修改前
    // this.devices.forEach(function(e) {
        // 	console.log('e',e);
        // 	console.log('deviceId',e.deviceId,equniment.deviceId);
        // 	if (e.deviceId == equniment.deviceId) {///但是这步怎么都无法执行
        // 		e.check = equniment.check;
        // 	}
    // })

    //修改后
    const data = this.devices.find(item => item.deviceId === equniment.deviceId)
    if(!data){
        data.check = equniment.check;
  }
bug2:

想要完成的逻辑: 在获取到新的变量数值之后,传值给封装的页面View,之后用新变量值去刷新页面。

实际运行的问题: 获取新变量值和传值给封装的View是对的,但是页面View刷新用的变量值始终是上一次传值给页面View的变量值,差一步。

最后采用的办法: 在调用页面View刷新的时候先调用一次下一次点击。

kotlin 复制代码
changeSearch(val) {
    console.log('val', val);
    this.areaId = val//赋值
    console.log('this.areaId', this.areaId);
    this.$nextTick(() => {//之前就是少这一步
        this.$refs.listPage.update();//刷新页面View
    })
},
bug3:

想要完成的逻辑: 上个页面传入一个Boolean值,在这个页面根据这个判断对错。

实际运行的问题: 这个页面获取的是"false"或者"true",是字符串,在判断的时候都返回正确,无法判断对错。

最后采用的办法: 在获取上一个页面传值的时候用JSON.parse()方法对这个数据进行处理。

再说一个在这里遇见的坑:跳转页面的url后面类似单引号的不是常见的 ' ,而是 ` ,它是波浪号~上面的那个。

javascript 复制代码
//上一个页面传Boolean值
uni.navigateTo({
    url: `/pages/disagree/index?isFromInfo=${true}`,
})


//第二个页面获取的时候
onLoad(option) {
    console.log('上个页面传递的参数。',option); //打印出上个页面传递的参数
    this.isFromInfo=JSON.parse(option.isFromInfo);
},
bug4:

想要完成的逻辑: 引用页面数据进行后续操作。

实际运行的问题: 代码无法运行,且不报错。

最后采用的办法: 发现是自己写OC自带的习惯,用了self引用变量,而不是JS的this去引用,导致出错。修改self为this代码成功运行。 ̄ω ̄=

ini 复制代码
//JS无法执行,OC可以
self.aa='';

//修改后,JS可以执行
this.aa='';
bug5:

想要完成的逻辑: 要显示后台给的图片信息,给的图片类型是base64的。

实际运行的问题: 页面图片无法显示,空白图片。

最后采用的办法: 发现后台给的base64和图片显示的差了个前缀,在后台数据前面加上'data:image/png;base64,'就可以了。

javascript 复制代码
//图片代码
<image class="" referrerpolicy="no-referrer" :src="qrcode" />

//变量申明
data() {
    return {
        qrcode: '',
    }
},


//赋值代码
visitorQrcode({data:{}}).then(res=>{
    console.log('rqcode',res)
    this.qrcode ='data:image/png;base64,'+ res; //image是图片的路径
}).catch(e=>{
        console.log(e)
})

结束语:

目前代码就更新到这里,希望随着继续学习JS,这个系列能越来越长(づ。◕‿‿◕。)づ

相关推荐
姚*鸿的博客3 分钟前
pinia在vue3中的使用
前端·javascript·vue.js
宇文仲竹22 分钟前
edge 插件 iframe 读取
前端·edge
Kika写代码26 分钟前
【基于轻量型架构的WEB开发】【章节作业】
前端·oracle·架构
天下无贼!2 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr2 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
赵啸林2 小时前
npm发布插件超级简单版
前端·npm·node.js
罔闻_spider2 小时前
爬虫----webpack
前端·爬虫·webpack
吱吱鼠叔2 小时前
MATLAB数据文件读写:1.格式化读写文件
前端·数据库·matlab
爱喝水的小鼠3 小时前
Vue3(一) Vite创建Vue3工程,选项式API与组合式API;setup的使用;Vue中的响应式ref,reactive
前端·javascript·vue.js
盏灯3 小时前
前端开发,场景题:讲一下如何实现 ✍电子签名、🎨你画我猜?
前端