经常会遇到对比两个值大小关系的逻辑,常规的处理中我们都是处理两个数字或者数字类型的字符串。那么这里进行延伸拓展的练习,来避免一些开发中的采坑。
起因是自己在看《vuejs权威指南》里看到表单验证里,也就是validator.js里可以验证最小最大值的源码部分。
源码里针对最小值的写法是这样的:
export default min (val, areg){
return !isNaN(val) && !isNaN(areg) && +(val)>= +(areg)
}
在上面的代码里我们可以看到严谨的判断了,两个比较类型均是可以转为数字类型的判断。然后第三个判断就有点不是很理解了,两个都加加号是什么操作?
我们知道+操作符除了一些基本的数字的运算,还支持一些其他的功能。
1 前面为数字,后面为数字的字符串,两者相加,会得到字符串的相加。
let a = 1 , b ='2'
let c = a + b
console.log(c) //12
2 如果两者都是字符串,那么得到是字符串的相加,也就是我们之前es5最熟悉的字符串拼接方式。
let a = 1 , b ='2'
let c = a + +(b)
console.log(c) //3 ,
通过代码尝试,我们发现无论是数字减去字符串型的数字,还是字符串型的数字互相减,都是可以得到想要的结果,而不是和加法一样会有时去按照拼接字符串处理。
let a = "2" ,b= '20',c=34 ,d='2'
document.write(a - b)
document.write(c - d)
document.write(b - c)
结果表明,-(a)操作也是可以改为数据类型的字符串改为数字的。但是其中是有一个潜在的问题的,就是-在转换的时候,如果值为负数,转换得到的是其相反数,这个不是我们期望的。
所以从这点在回看,用+做数字或者非数字的不区分转换是比较ok的。
比如我们经常举例的,’20’ > ‘100’,其返回的结果是true,明显不符合预期,所以我们比较大小的时候多数这样写的:a-b>0,这样比较大小没有问题。
>
如果比较两个字符串比较的是什么其比较的内容是 :按字符在unicode中的码位来比较大小。所以一般情况下比较两个字符窜的大小么有实际可用的意义。
通过本文我们看到了比较两个类数字的严谨的方式方法,也知道了+运算符可以没有难度的帮我们把数字型的字符串转为数字类型;如果你不习惯这样比较,也可以用a-b的减法操作进行。
在array的sort方法中,相信你还记得起比较大小顺序的语法是这样的。这里不是用a>b比较的,因为直接用大于无法比较出真正想要的大小,所以一般是a-b。
arr.sort((a, b ) =>{
return a-b
})
既然提到了NaN,我们顺便回忆下,哪些类型是我们容易遗漏的NaN类型。