碎片记录

345 阅读4分钟

一些很小的前端知识点

记录一些自己在开发中遇到的冷门的前端知识点,有的可能是很多人已经遇到过了,就不能算是冷门知识点了,有的可能没有吧,自己的备忘录吧,对他人没有参考价值,可看可不看。

0==''

最近一次在判断传入的值不能是null,"",undefined的时候,就写了这样一段代码,

if(val==''||val==null||val==undefined){
    return false;
}

传入的值有一个是0,就不断的进入了这个函数里面,一开始我认为的是,我想很多的人都是这么想的,应该就是0的布尔类型是false,''的布尔类型也是false,所以两者相等,如果是这样,那是不是就意味着,

0==''//成立
0==null//成立
0==unfined//成立
但是实际情况是
0==''//成立
0==null//不成立
0==unfined//不成立

Snipaste_2021-10-28_10-22-33.png 所以0==''的原因应该不是布尔类型判断的原因。 在js中,除了NaNundefinednull,这些特殊处理外。 如果两边都是字符串,从左到右,将每个字符使用charCodeAt()转换为unicode编码依次比较。 其他情况都是转为数字然后进行比较。 题目这种情况会使用Number('')先转为数字,得到结果0,再进行比较。 所以 0 == ''。所以相等的原因是一边为数字的时候,一边是字符串的时候,会把字符串先转为数字,再比较。

当微信小程序的request域名没有配置的时候会发生什么?

小程序的官方文档要求当请求数据的时候,需要在小程序中配置业务域名,但是有的时候为了调试方便我们都会先勾选不校验业务域名这个选项。但是你知道这样会发生什么?这次我就遇到了,在开发工具上是好好的,但是到了真机的时候,登录接口就会出现一会儿可以调用,一会儿不行,并且会报一些奇奇怪怪的错误,但是打开调试工具就没这个问题了,我的理解应该打开调试工具的时候,系统会检测到你处于调试中,就不再校验是否配置了域名。所以如果你感觉自己的所有方面做的都没有问题,不妨想一下是不是域名没配置,这个没配置真的会出现一些很奇怪的报错。

如何修改小程序的数据?

data:{
  num:0,
  obj:{
   name:'123'
  },
  list:[
  {
    id:''
  }
  ]
}
this.setData({
  num:2,
  ['obj.name']:'324',
  [`list[${this.data.num}].id`]: 3,
});

elementui的输入框限制只能输入纯数字

找了好多好多,终于发现一个能用的了,

<el-input   
-   v-model="form.userMobile"
    oninput="value=value.replace(/[^\d]/g,'')"
    maxlength="11"
    onkeyup="value=value.replace(/[^\d]/g,'')"
    style="width:230px;"
    @blur="form.userMobile = $event.target.value"
/>

vant的calendar如果起始时间设置的比较早,会非常的卡,切记不要在一开始设置的太早就算要设置也要在,页面加载完成之后

亲测有效

拉取微信用户信息失败

33333333333333333333333444.png

微信小程序的设置参数的函数的回调

在小程序中setData并不是同步的而是异步的,这也就是说setData的操作是不会影响后面的操作进程,
这样也就会造成一个问题就是你的参数设置没有生效但是后面代码已经生效了,所以小程序的参数设置是有回调的,
this.setData({},()=>{
})
这样可以保证参数设置生效以后再执行后面的进程

vue的组件渲染的bug

也算不上是bug吧,只是发现了这样的一个现象,页面根据查询返回一个列表,
比如说这个列表里面的返回值有{id,name,age,count,score},
但是每一组数据里面的count和score是由id向另一个接口发送请求得到的,
为了保证渲染的时候所有的数据完整,
我们会使用Promise.all()来保证所有的接口请求完成,这个时候如果我们疯狂点击列表查询接口,
就会发现页面开始出现上一个还没消失,下一个又出现的画面。

浏览器记住密码回调与禁止回填

autocomplete='on' 开启自动填充 off 关闭自动填充
auto-complete="new-password" 禁止浏览器回填
//去掉自动填充的时候输入框的背景色
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    transition: background-color 5000s ease-in-out 0s !important;
} 

elementui的table的点击展开收起

可以通过expand函数的第二个参数判断当前的状态是收起还是展开

7ae4204621a108f9a33647399d12e00c0c167dac90ffe01ce79e6ce613e02fc6QzpcVXNlcnNcRURZXEFwcERhdGFcUm9hbWluZ1xEaW5nVGFsa1w3MzYyMzk0OThfdjJcSW1hZ2VGaWxlc1wxNjQxMjY1OTQ2ODAwX0U2N0I2QzlFLUVDNDItNDdiYi05QkIzLTQ1ODgwMTI5QzI0Ny5wbmc=.png

结束语