帮助避免错误的Javascript陷阱清单

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

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

1.浮点运算

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

  1. <script>  
  2. alert(0.02 / 0.1);  //0.19999999999999998   
  3. alert(1.14 * 100);  //113.99999999999999    ;)  
  4. </script>

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

2.加号操作符的重载

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

  1. <script>  
  2. var msg, one="1";  
  3. msg = 2 + "1"; // msg = "21"  
  4. msg = 2 + one; // msg = "21"  
  5. msg = 1 + 1 + 1 + " musketeers"; // msg = "3 musketeers"  
  6. msg = "Bond " + 0 + 0 + 7; //msg = "Bond 007"    
  7. </script>

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

3.行尾插入分号

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

  1. <script>  
  2. function returnSame(a){  
  3. return                 //Inserts semi-colon to convert to return;  
  4. a                      //a becomes a; - Unreachable  
  5. }  
  6. alert(returnSame(2));  //Output is undefined  
  7. </script>

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

4.typeof操作符

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

  1. <script>  
  2. var obj={};  //object created using object literal  
  3. var arr=[];  //array created by array literal  
  4. alert(typeof(obj));   //object  - Good  
  5. alert(typeof(arr));   //object  - Bad  
  6. alert(typeof(null));  //object  - Ugly!  ;) 

  7. </script>

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

5. false, null, undefined, NaN, Infinity

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

  1. <script>  
  2. var a;  
  3. alert (a);    //undefined  
  4. alert (1/0);  //Infinity  
  5. alert (0/0);  //NaN  
  6. 0/0 == 0/0;   //false - a NaN != NaN  
  7. alert (b);    //error  
  8. </script>

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

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

  1. <script>  
  2. var nospace = "I dont need spaces".replace(" ","_");  
  3. alert(nospace);    //I_dont need spaces   - Only first occurence  
  4. var nospace = "I dont need spaces".replace(/ /g,"_");  
  5. alert(nospace);    //I_dont_need_spaces  
  6. </script>

 7.parseInt 函数

parseInt 用来将一个字符串转换为整数类型.这个函数能传入两个参数,第二个参数是指定多少进制的.这里十进制用 10 指定.如果没有指定进制,则parseInt函数自己会试图找到合适的进制.如果是这样,以0开头的字符串将会转换为8进制.

  1. <script>  
  2. var str = "017";  
  3. var strInt = parseInt(str);      //strInt = 15  ;)  
  4. var strInt = parseInt(str,10);   //strInt = 17  
  5. </script>

赞 (0)

相关推荐

  • 错误剖析之JavaScript的9个陷阱及评点

    来自Nine Javascript Gotchas, 以下是JavaScript容易犯错的九个陷阱.虽然不是什么很高深的技术问题,但注意一下,会使您的编程轻松些,即所谓make life easier. 笔者对某些陷阱会混杂一些评点. 1.最后一个逗号 如这段代码,注意最后一个逗号,按语言学角度来说应该是不错的(python的类似数据类型辞典dictionary就允许如此).IE会报语法错误,但语焉不详,你只能用人眼从几千行代码中扫描. var theObj = { city : "Boston

  • 在JavaScript中遭遇级联表达式陷阱

    依稀还记得,在学习C语言的库函数时,很多字符串操作相关的函数都会返回和结果相关的指针.其实这个返回值很多时候都并不是非常必要,因为在我们的传入的参数中,十有八九已包含了这个指针.而加上这个返回值的最大好处就是,可以让我们方便的书写出级联表达式.但是这些年的实际工作中,越发觉得级联表达式是个魔鬼馅饼. 比如在C语言中,我们熟悉的字符串操作函数strcpy,strcat等,它们的原形一般是: extern char *strxxx(char *dest, char *src);     返回值cha

  • JavaScript 存在陷阱 删除某一区域所有节点

    比较简单的,例如:有一区域<div id="newbody" ></div>,现要求删除其中所有节点.相信很多人会这样写: 复制代码 代码如下: var divpanel = document.getElementById("newbody"); var controlinfo= divpanel.childNodes; for(var index = 0;index < controlinfo.length ;index++) { d

  • JavaScript的9个陷阱及评点分析

    1. 最后一个逗号 如这段代码,注意最后一个逗号,按语言学角度来说应该是不错的(python的类似数据类型辞典dictionary就允许如此).IE会报语法错误,但语焉不详,你只能用人眼从几千行代码中扫描. <script>   var theObj = {         city : "Boston",         state : "MA",   } </script>  2. this的引用会改变 如这段代码: <input 

  • JavaScript中常见陷阱小结

    你所创建的所有函数都是区分大小写的 单引号('字符串')和双引号("字符串")在JavaScript中没有特殊的区别,都可以用来创建字符串.但作为一般原则,大多数WEB开发者都选择使用单引号 而不是双引号,因为XHTML规范要求所有XHTML属性值都必须使用双引号括起来. JavaScript不支持重载,在JavaScript中,脚本在执行时不会顾及函数定义时的参数,而是直接使用在作用域链中最后定义的那个函数.这意味着,相同名称的函数永远只存在一个实例 闭包是与作用域相关的一个概念,它

  • JavaScript中常见的八个陷阱总结

    前言 这里我们针对JavaScript初学者给出一些技巧和列出一些陷阱.如果你已经是一个砖家,也可以读一读. 1. 你是否尝试过对数组元素进行排序? JavaScript默认使用字典序(alphanumeric)来排序.因此, [1,2,5,10].sort()的结果是[1, 10, 2, 5]. 如果你想正确的排序,应该这样做: [1,2,5,10].sort((a, b) => a - b) 2. new Date() 十分好用 new Date()可以接收: - 不接收任何参数:返回当前时

  • JavaScript性能陷阱小结(附实例说明)

    1.避免使用eval或者Function构造函数 2.避免使用with 3.不要在性能要求关键的函数中使用try-catch-finally 4.避免使用全局变量 5.避免在性能要求关键的函数中使用for-in 6.使用字符串累加计算风格 7.原操作会比函数调用快 8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串 9.避免在对象中使用不需要的DOM引用 10.最清晰的目标速度,最小化作用域链 11.试着在脚本中少使用注释,避免使用长变量名 12.在当前作

  • 比较搞笑的js陷阱题

    看如下代码: 复制代码 代码如下: var a = function(t) { return t; } (1 + 2).toString(); alert(a); 结果是多少? 其实主要问题出在第一行后面没有分号,所以其实是var a = function(t) { return t; }(1 + 2).toString(); 先建立变量a,然后执行赋值语句,匿名函数传入参数1+2执行,返回结果.toString(),赋值给a. 关于这种function() {}()的写法,具体可参看js的命名

  • JavaScript中for..in循环陷阱介绍

    大家都知道在JavaScript中提供了两种方式迭代对象: (1)for 循环: (2)for..in循环: 使用for循环进行迭代数组对象,想必大家都已经司空见惯了.但是,使用for.. in循环时,大家可要注意了,为什么这么说呢?大家听我娓娓道来.... javascript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,for...in循环中的循环计数器是字符串,而不是数字.它包含当前属性的名称或当前数组元素的索引. 案例一: 复制代码 代码如下:

  • Javascript 陷阱 window全局对象

    function Test(){ this.name='Test'; var name=2; this.show=function(){ alert(name); alert(this.name);//显示名字 } } var test=new Test();//通过构造器创建一个对象 test.show();//输出2和'Test' ,说明对象方法访问其属性时必须加this. function Test2(){ this.name='Test2'; this.show=function(){

随机推荐