您的位置:首页 > Web前端 > JavaScript

Javascript中的陷阱大集合

2013-01-07 18:37 579 查看
函数和操作符

双等号
==操作符比较时会进行类型的强制转换,这意味着它可以比较两个不同类型的对象,在执行比较之前它将会尝试把这两个对象转换成同一个类型,举一个例子:

"1" == 1 //true


然而,这样往往会误导我们,而且我们也不需要这样子来比较。在上面的例子中,我们完全可以先将字符串转换成数字型,然后利用对类型敏感的三重等号(===)来进行比较,如:

Number("1") === 1; //true


或者,更好的是,确保你放在首位的操作数的类型是正确的。
由于双等号具有强制类型转换的行为,所以它会打破一般的传递性规则,这点有点吓人,请看下面的列子:

"" == 0 //true - 空字符串会被强制转换为数字0.
0 == "0" //true - 数字0会被强制转换成字符串"0"
"" == "0" //false - 两操作数都是字符串所以不执行强制转换


如果使用三重等号,上面的三个比较都将返回false。
parseInt不把10作为数字基数
如果你忽略parseInt的第二个参数,那么数字的基数将由下面的规则所决定:

默认基数为10,即按10进制解析

如果数字以0x开头,那么基数为16,即按16进制解析

如果数字以0开头,那么基数为8,即按8进制解析

一个常见的错误是我们让用户输入以0开头的数字,这时候它就按8进制的方式去解析了,于是我们就看到了如下的效果:

parseInt("8"); //8
parseInt("08"); //0


因此,我们很多时候都会指定parseInt的第二个参数,如下所示:

parseInt("8", 10); //8
parseInt("08", 10); //8


ECMAScript5方面的说明:ECMAScript已不再支持8进制的解析假设,另外,如果忽略parseInt的第二个参数将会引起JSLint的警告。
字符串替换
字符串替换函数仅仅会替换第一个匹配项,并不能替换你所期望的全部匹配项。如下代码:

"bob".replace("b", "x"); // "xob"
"bob".replace(/b/, "x"); // "xob" (使用了正则表达式)


如果要替换所有的匹配项,我们可以使用正则表达式,并为他它添加全局修饰符,如下代码:

"bob".replace(/b/g, "x"); // "xox"
"bob".replace(new RegExp("b", "g"), "x"); // "xox" (alternate explicit RegExp)


全局修饰符确保了替换函数找到第一个匹配项后不会停止对下一个匹配项的替换。
“+"操作符会执行相加操作和字符串连接操作
php作为另一种弱类型语言,可以使用”.“操作符对字符串进行连接。Javascript却不是这样的 - 所以当操作数是字符串的时候”a+b“通常是执行连接操作。如果你想执行数字相加那你就要引起注意了,因为输入的内容可能是字符串类型的,所以你在执行相 加操作前需要先将其转换成数字类型,代码如下:

1 + document.getElementById("inputElem").value; // 连接操作
1 + Number(document.getElementById("inputElem").value); // 相加操作


需要注意的是,相减操作会尝试将操作数转换成数字类型,代码如下:

"3" - "1"; // 2


尽管有时候你想用减法将字符串从另一个字符串中减掉,但这时候往往会产生一些逻辑错误。
很多时候我们用数字和空串相加来实现数字转换成字符串的操作,代码如下:

3 + ""; // "3"


但是这样做并不好,所以我们可以用String(3)来取代上面的方法。
typeof
typeof这会返回一个javascript基本类型的实例的类型。Array实际上不是基本类型,所以typeof Array对象将返回Object,代码如下:

typeof {} === "object" //true
typeof "" === "string" //true
typeof [] === "array"; //false


当你对自己的对象的实例使用这个操作符时将会得到相同的结果(typeof = "object")。
另外说明一点,”typeof null“将返回”object“,这个有点诡异。
instanceof
instanceof返回指定对象是否是由某个类构造的实例,这个对我们检查指定对象是否是自定义类型之一很有帮助,但是,如果你是用文本语法创建的内置类型那可能会得出错误的结果,代码如下:

"hello" instanceof String; //false
new String("hello") instanceof String; //true


由于Array实际上不是内置类型(只是伪装成内置类型 - 因此对它使用typeof不能得到预期的结果),但是使用instanceof就能得到预期效果了,代码如下所示:

["item1", "item2"] instanceof Array;  //true
new Array("item1", "item2") instanceof Array;  //true


总的来说,如果你想测试Boolean, String, Number, 或者Function的类型,你可以使用typeof,对于其他的任何类型,你可以使用instanceof测试。
哦,还有一点,在一个function中,有一个预定义变量叫“arguments”,它以一个array的形式传递给function。然而,它并不是真正的array,它只是一个类似array的对象,带有长度属性并且属性值从0-length。非常奇怪...你可以用下面的小伎俩将它转换成真正的数组:

var args = Array.prototype.slice.call(arguments, 0);


这个对由getElementsByTagName返回的NodeList对象也是一样的 - 它们都可以用以上的代码转换成合适的数组。
eval
eval 可以将字符串以javascript代码的形式来解析执行,但是一般来说我们不建议这么做。因为eval非常慢 - 当javascript被加载到浏览器中时,它会被编译成本地代码;然而执行的过程中每次遇到eval表达式,编译引擎都将重新启动执行编译,这样做的代价太大了。而且这样做也丑陋无比,有很多eval被滥用的例子。另外,在eval中的代码会在当前范围内执行,因此它可以修改局部变量,以及在你的范围内添加一些让你意想不到的东西。
JSON 转换是我们经常要做的;通常我们使用“var obj = eval(jsonText);”来进行转换。然而现在几乎所有的浏览器都支持本地JSON对象,你可以使用“var obj = JSON.parse(jsonText);”来替代前面的代码。相反你也可以用“JSON.stringify”将JSON对象转换成字符串。更妙的是,你可以使用“jQuery.parseJSON”来完成上述的工作。
setTimeout和setInterval函数的第一个参数可以用字符串作为函数体来解析执行,当然,我们也不建议这样做,我们可以用实际的函数来替代。
最后,Function的构造函数和eval非常像,唯一不同的是,Function构造函数是在全局范围内执行的。
with
with表达式将为你提供访问对象属性的速记方式,但我们是否应该使用它,仍然存在矛盾的观点。Douglas Crockford不太喜欢它。John Resig在他的书中有找了很多with的巧妙用法,但是他也承认这将会影响性能并且会产生一点混乱。来看看我们分离出来的with代码块,他不能准确地告诉我们现在正在执行什么,代码如下所示:

with (obj) {
bob = "mmm";
eric = 123;
}


我是否刚刚修改了一个叫bob的局部变量?或者我是否设置了obj.bob?如果obj.bob已经被定义,那么它将会被重置为“mmm”。否则,如果有 另一个bob在这个范围中,那么他将会被改变。否则,全局变量bob会被设置。最后,下面的写法可以非常明确地表达你的意思:

obj.bob = "mmm";
obj.eric = 123;


ECMAScript5说明:ES5严格的来说已经不支持with表达式。

类型和构造函数
使用“new”关键字构造内置类型
Javascript中有Object, Array, Boolean, Number, String, 和Function这些类型,他们各自都有各自的文字语法,所以就不需要显式构造函数了。
显式构造(不建议)文字语法(推荐)
var a = new Object();


a.greet = "hello";
var a = { greet: "hello" };
var b = new Boolean(true);
var b = true;
var c = new Array("one", "two");
var c = ["one", "two"];
var d = new String("hello");
var d = "hello"
var e = new Function("greeting", "alert(greeting);");
var e = function(greeting) { alert(greeting); };
然而,如果你使用new关键字来构造上面其中的一种类型,你实际上将会得到一个类型为Object并且继承自你要构造的类型的原型的对象(Function类型除外)。所以尽管你用new关键字构造了一个Number类型,它也将是一个Object类型,如下代码:

typeof new Number(123); // "object"
typeof Number(123); // "number"
typeof 123; // "number"


上面的第三项是文本语法,为了避免冲突,我们应该使用这种方法来构造上面的这些类型。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  web