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，这个系列能越来越长(づ｡◕‿‿◕｡)づ