JavaScript编程实践中容易出错的地方(2)
条件语句(3个陷阱)
- 所有的条件语句都必须位于圆括号中。
if(var1 == var2){} - 不要犯无意地使用赋值运算符的错误:把第二个参数的值赋给第一个参数。因为它是一个逻辑问题,它将一直返回true且不会报错。
if(var1 = var2){} // 返回true。把var2赋值给var1 - JavaScript是弱类型,除了在 switch语句 中。当JavaScript在case比较时,它是非弱类型。
var myVar = 5;
if(myVar == '5'){ //返回true,因为JavaScript是弱类型
alert("hi"); //这个alert将执行,因为JavaScript通常不在意数据类型
}
switch(myVar){
case '5':
alert("hi"); //这个alert将不会执行,因为数据类型不匹配
}
换行
当心JavaScript中的硬换行。换行被解释为表示行结束的分号。即使在字符串中,如果在引号中包括了一个硬换行,那么你会得到一个解析错误(未结束的字符串)。
var bad = '<ul id="myId">
<li>some text</li>
<li>more text</li>
</ul>'; // 未结束的字符串错误
var good = '<ul id="myId">' +
‘<li>some text</li>‘ +
‘<li>more text</li>‘ +
‘</ul>’; // 正确
前面讨论过的换行被解释为分号的规则并不适用于控制结构这种情况:条件语句关闭圆括号后的换行并不是给其一个分号。
一直使用分号和圆括号,那么你不会因换行而出错,你的代码易于阅读,且除了那些不使用分号的怪异源码外你会少一些顾虑:所以当移动代码且最终导致两个语句在一行时,你无需担心第一个语句是否正确结束。
多余的逗号
在任何JavaScript对象定义中,最后一个属性决不能以一个逗号结尾。Firefox不会出错,而IE会报语法错误。
var theObj = {
city : "Boston",
state : "MA",//IE6和IE7中有“缺少标识符、字符串或数字”的错误,IE8 beta2修正了它
}
HTML id 冲突
JavaScript DOM绑定(JavaScript DOM bindings)允许通过HTML id索引。在JavaScript中函数和属性共享同一个名字空间。所以,当在HTML中的一个id和函数或属性有相同的名字时,你会得到难以跟踪的逻辑错误。然而这更多是一个 CSS最佳实践 的问题,当你不能解决你的JavaScript问题时,想起它是很重要的。
<ul>
<li id="length">1</li>
<li id="thisLength">2</li>
<li id="thatLength">3</li>
</ul>
<script>
var listitems = document.getElementsByTagName('li');
var liCount = listitems.length; //IE下返回的是<li id="length">1</li>这个节点而不是所有<li>的数量
var thisLength = document.getElementById('thisLength');
thatLength = document.getElementById('thatLength');
//IE下会出现“对象不支持此属性和方法”的错误,IE8 beta2下首次加载页面会出错,刷新页面则不会
//在IE中thisLength和thatLength直接表示以其为id值的DOM节点,
//所以赋值时会出错,当有var声明时,IE会把其当着变量,这个时候就正常了。
</script>
如果你要标记(X)HTML,绝不要使用JavaScript方法或属性名作为id的值。并且,当你写JavaScript时,避免使用 (X)HTML中的id值作为变量名。