실수를 방지하는 데 도움이 되는 Javascript 함정 목록_javascript 팁

翻译讲究"信雅达",我就谈不上了.希望能把文章的意思不要弄错就行.

编程的陷阱(gotcha)是指计算机系统中的意想不到的文档特征而不是bug.这些陷阱使得初学者远离javascript编程.在我看来,因为所有的浏览器都能运行javascript使得它是使用最广泛的语言之一,但它也是最少人研究的.让我们从一个基础的示例开始.

1.浮点运算

这可能是挫败一些对javascript不熟悉并准备执行一些数学运算的人的主要原因.

1. <script>  </span></span> </li> <li> <span>alert(0.02 / 0.1);  <span class="comment">//0.19999999999999998 </span><span>  </span></span> </li> <li class="alt"> <span>alert(1.14 * 100);  <span class="comment">//113.99999999999999    ;)</span><span>  </span></span> </li> <li><span></script> 
   

Math.round()就能在这里派上用场.

2.加号操作符的重载

"+"加号运算符即能做算术运算,又能够做字符串的连接.如果正确的使用它是很便利的.让我们看一看.

1. <script>  </span></span> </li> <li> <span><span class="keyword">var</span><span> msg, one=</span><span class="string">"1"</span><span>;  </span></span> </li> <li class="alt"> <span>msg = 2 + <span class="string">"1"</span><span>; </span><span class="comment">// msg = "21"</span><span>  </span></span> </li> <li> <span>msg = 2 + one; <span class="comment">// msg = "21"</span><span>  </span></span> </li> <li class="alt"> <span>msg = 1 + 1 + 1 + <span class="string">" musketeers"</span><span>; </span><span class="comment">// msg = "3 musketeers"</span><span>  </span></span> </li> <li> <span>msg = <span class="string">"Bond "</span><span> + 0 + 0 + 7; </span><span class="comment">//msg = "Bond 007"  </span><span>  </span></span> </li> <li class="alt"><span></script> 
   

上述行为是因为这些运算都是从左到右执行的.类型的转换是基于其中的字符串或数字.

3.行尾插入分号

javascript 自动在行尾插入分号";",让我们来看看这在一个简单的示例中的情况.

1. <script>  </span></span> </li> <li> <span><span class="keyword">function</span><span> returnSame(a){  </span></span> </li> <li class="alt"> <span>   <span class="keyword">return</span><span>                 </span><span class="comment">//Inserts semi-colon to convert to return;</span><span>  </span></span> </li> <li> <span>   a                      <span class="comment">//a becomes a; - Unreachable</span><span>  </span></span> </li> <li class="alt"> <span>}  </span> </li> <li> <span>alert(returnSame(2));  <span class="comment">//Output is undefined</span><span>  </span></span> </li> <li class="alt"><span></script> 
   

当在创建对象或使用对象的值的时候这个神奇的分号能使事情变得更复杂.

4.typeof操作符

typeof 是一个一元操作符,运算结果往往并不是如预期的那样.令人吃惊的是对"null"的运算结果是"object"

1. <script>  </span></span> </li> <li> <span><span class="keyword">var</span><span> obj={};  </span><span class="comment">//object created using object literal</span><span>  </span></span> </li> <li class="alt"> <span><span class="keyword">var</span><span> arr=[];  </span><span class="comment">//array created by array literal</span><span>  </span></span> </li> <li> <span>alert(<span class="keyword">typeof</span><span>(obj));   </span><span class="comment">//object  - Good</span><span>  </span></span> </li> <li class="alt"> <span>alert(<span class="keyword">typeof</span><span>(arr));   </span><span class="comment">//object  - Bad</span><span>  </span></span> </li> <li> <span>alert(<span class="keyword">typeof</span><span>(</span><span class="keyword">null</span><span>));  </span><span class="comment">//object  - Ugly!  ;)</span><span>  <br></span></span> </li> <li><span><span></script>

它仅仅能查找对象的原始类型.

5. false, null, undefined, NaN, Infinity

尽管他们看起来相似,但他们代表着不通的意思.javascript有3种基本数据类型数字numbers, 字符串strings 和布尔 boolean,除此之外还有两个不重要的数据类型"undefine"和"null".按照"=="运算符运算,null和undefine是相等的.

1. <script>  </span> </li> <li class="alt"> <span><span class="keyword">var</span><span> a;  </span></span> </li> <li> <span>alert (a);    <span class="comment">//undefined</span><span>  </span></span> </li> <li class="alt"> <span>alert (1/0);  <span class="comment">//Infinity</span><span>  </span></span> </li> <li> <span>alert (0/0);  <span class="comment">//NaN</span><span>  </span></span> </li> <li class="alt"> <span>0/0 == 0/0;   <span class="comment">//false - a NaN != NaN</span><span>  </span></span> </li> <li> <span>alert (b);    <span class="comment">//error</span><span>  </span></span> </li> <li class="alt"><span></script> 
   

6.字符串只替换第一个匹配的字符

与PHP或其他程序语言不同,默认情况下,javascript的字符替换只替换第一个出现的匹配的字符.

1. <script>  </span></span> </li> <li> <span><span class="keyword">var</span><span> nospace = </span><span class="string">"I dont need spaces"</span><span>.replace(</span><span class="string">" "</span><span>,</span><span class="string">"_"</span><span>);  </span></span> </li> <li class="alt"> <span>alert(nospace);    <span class="comment">//I_dont need spaces   - Only first occurence</span><span>  </span></span> </li> <li> <span><span class="keyword">var</span><span> nospace = </span><span class="string">"I dont need spaces"</span><span>.replace(/ /g,</span><span class="string">"_"</span><span>);  </span></span> </li> <li class="alt"> <span>alert(nospace);    <span class="comment">//I_dont_need_spaces</span><span>  </span></span> </li> <li><span></script> 
   

7.parseInt 함수

parseInt는 문자열을 정수 유형으로 변환하는 데 사용됩니다. 두 번째 매개변수는 지정된 밑수입니다. 여기서 소수점은 10으로 지정됩니다. 그렇다면 0으로 시작하는 문자열은 8진수로 변환됩니다.

1. <스크립트>
2. var str = "017"; var
3. strInt =parseInt(str); //strInt = 15 ;) var
4. strInt = parsInt(str,10) //strInt = 17
5.