【JS-Bug】JS萌新遇见的bug

前言：

介绍这些bug发生的背景，本人是IOS开发。对JS知之不深，读书的时候前端技术选修课本人没学，为什么会写呢？因为大概是相对清闲了？被领导安排给一个小程序项目去收个尾，完成和后台的数据对接，今天遇见了太多奇奇怪怪的bug，觉得很需要记录一下。

好了，前言完成，进入正题(￣▽￣)~*。

正文：

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

​​​​​​​

bug1： 

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

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

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

//根据参数的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){
        //没有就加入
        this.devices.push(equniment);
        data=equniment;
    }
    console.log(data, 'data', data);
    //确认修改选择状态
    data.check = equniment.check;
    
}

bug2：

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

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

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

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后面类似单引号的不是常见的 ' ,而是 ` ，它是波浪号~上面的那个。

//上一个页面传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代码成功运行。￣ω￣=

//JS无法执行，OC可以
self.aa='';

//修改后，JS可以执行
this.aa='';

bug5：

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

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

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

//图片代码
<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)
})