[关闭]
@hotlp 2018-03-10T14:19:50.000000Z 字数 2662 阅读 1173

类型转换

编码规范


第一篇请见 编码规范--by姜琦
之前姜琦整理的编码规范范围很广,也很详细,但是不知道大家看了多少,这篇文档是对之前那篇的一个小小的补充,主要是js方面的转换问题。

隐式转换和显式转换

js属于弱类型语言,声明变量不用指定变量的类型,允许变量的类型转换,在使用时可能不知不觉的就完成了类型的转换,先看一个比较典型的例子:

  1. var date = '';
  2. date = new Date().getFullYear()+'-'+ (new Date().getMonth()+1) + '-' +new Date().getDate();
  3. date += ' '+new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds();
  4. var search = {
  5. "searchType":page.searchType
  6. ,"searchContent": kw
  7. ,"searchTime": dateFormat(date,'yyyy-MM-dd hh:mm:ss')
  8. };

首先,date在声明时初始值是空字符串,new Date()了很多次,但在赋值是赋的是number和string的拼接,另外,用了效率不好的 += ,其次dateFormat函数里有new Date()的过程,所以拼接完全是多余的。

在声明变量时,如果不确定类型,可以:

  1. var a ;

或者

  1. var a = null ;

不要盲目的定义类型。

显式转换

js提供了自动类型转换,但有时仍需要要显示转换,或者为了使代码变得清晰易读

使用String(),Number(),Boolean(),Object()

  1. Number('3') //=>3
  2. String('false') //=>false 或使用false.toString()
  3. Boolean([]) //=>true
  4. Object(3) //=>new Number(3)

试图将null和 undefined转为对象会报TypeError,使用Object()函数不会报异常,它仅简单的返回一个新的空对象。

parseInt安全转换

parseInt在不同的浏览器下有不同的默认行为处理
IE8下面parseint默认会把“09”当成八进制,但是又发现不是合法的八进制,最后就抛出了0这个false
在chrome下,“09”会默认当做十进制来看的
所以在使用parseInt时要注意加上第二个参数,进制,这样就不回报错了,
简单的十进制的处理还可以使用 Number()

parseInt('09',10)||0

隐式转换

之前姜琦在隐式转换方面也进行了一次培训,详见Javascript书写技巧--by姜琦,现在把详细的规则整理了一下:

js中的不同的数据类型之间的比较转换规则如下:

1. 对象和布尔值比较

对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字

  1. [] == true; //false

[]转换为字符串'',然后转换为数字0,true转换为数字1,所以为false

2. 对象和字符串比较

对象和字符串进行比较时,对象转换为字符串,然后两者进行比较。

  1. [1,2,3] == '1,2,3' // true

[1,2,3]转化为'1,2,3',然后和'1,2,3', so结果为true;

3. 对象和数字比较

对象和数字进行比较时,对象先转换为字符串,然后转换为数字,再和数字进行比较。

  1. [1] == 1; // true

对象先转换为字符串再转换为数字,二者再比较 1 => '1' => 1 所以结果为true

4. 字符串和数字比较

字符串和数字进行比较时,字符串转换成数字,二者再比较。

  1. '1' == 1 // true

5. 字符串和布尔值比较

字符串和布尔值进行比较时,二者全部转换成数值再比较。

  1. '1' == true; // true
  2. '2' == true; // false

6. 布尔值和数字比较

布尔值和数字进行比较时,布尔转换为数字,二者比较。

  1. true == 1 // true
  2. true == 2 // false

另外

  1. [] == false;
  2. ![] == false;

这两个的结果都是true,第一个是,对象 => 字符串 => 数值0 false转换为数字0,这个是true应该没问题,
第二个前边多了个!,则直接转换为布尔值再取反,转换为布尔值时,空字符串(''),NaN,0,null,undefined这几个外返回的都是true, 所以! []这个[] => true 取反为false,所以[] == false为true。

undefined和null

  1. undefined == null //true

比较返回true,二者和其他值比较返回false
Number(null) //0

isNaN() 方法自带隐式类型转换,该方法在测试其参数之前,会先调用 Number() 方法将其转换为数字。所以 isNaN('1') 这个语句中明明用一个字符串去测试,返回值仍然为 false 。

7.四则运算

加法运算符+是双目运算符,只要其中一个是String类型,表达式的值便是一个String。
对于其他的四则运算,只有其中一个是Number类型,表达式的值便是一个Number。

  1. var a = '11';
  2. a = a - '';
  3. alert(typeof a);// -->number

对于非法字符的情况通常会返回NaN:

  1. '1' * 'a' // => NaN,这是因为parseInt(a)值为NaN,1 * NaN 还是 NaN

条件(三元)操作符

三元操作符之前也讲过,Javascript书写技巧--by姜琦
虽然三元操作符用起来十分方便,使用时要注意不要滥用。

下面这个语句判断如果是会员,费用为2美元,非会员,为10美元。现在设置了非会员,却打印出了2美元,显然出错了。

  1. var isMember = false;
  2. console.log("当前费用" + isMember ? "$2.00" : "$10.00");

出错的原因是?号的优先级比+号低,所以实际运行的语句是

  1. "当前费用false" ? "$2.00" : "$10.00");

在js中,字符串为真,所以打印出$2.00。

另外,项目中出现的:

  1. return skuMatchMaxNum===valueIds.length? true:false;

可以:

  1. return skuMatchMaxNum === valueIds.length;

补充:

truthy和true,
truthy为真值,除了 false0''nullundefinedNaN 以外,所有的值都是真值。而true为一种布尔型的值。
同理,还有falsy和false。
truthy在if中的表现

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注