你不知道的javascript技巧.doc

尽管我使用Javascript来做开发有很多年了，但它常有一些让我很惊讶的小特性。对于我来说，Javascript是需要持续不断的学习的。在这篇文章中，我将列出10个Javascript使用小技巧，主要面向Javascript新手和中级开发者。希望每个读者都能至少从中学到一个有用的技巧。1.变量转换看起来很简单，但据我所看到的，使用构造函数，像Array()或者Number()来进行变量转换是常用的做法。始终使用原始数据类型（有时也称为字面量）来转换变量，这种没有任何额外的影响的做法反而效率更高。view sourceprint?1 var myVar = 3.14159,2 str = + myVar,/ to string3 int = myVar, / to integer4 float = 1*myVar, / to float5 bool = !myVar, /* to boolean - any string with length6 and any number except 0 are true */7 array = myVar; / to array转换日期(new Date(myVar)和正则表达式(new RegExp(myVar)必须使用构造函数，而且创建正则表达式的时候要使用/pattern/flags的形式。2.十进制转换为十六进制或者八进制，或者反过来你是不是写个单独的函数来转换十六进制（或者八进制）呢？马上停下吧！有更容易的现成的函数可以用：view sourceprint?1 (int).toString(16); / converts int to hex, eg 12 = C2 (int).toString(8); / converts int to octal, eg. 12 = 143 parseInt(string,16) / converts hex to int, eg. FF = 2554 parseInt(string,8) / converts octal to int, eg. 20 = 163.玩转数字除了上一节介绍的之外，这里有更多的处理数字的技巧view sourceprint?1 0xFF; / Hex declaration, returns 2552 020; / Octal declaration, returns 163 1e3; / Exponential, same as 1 * Math.pow(10,3), returns 10004 (1000).toExponential(); / Opposite with previous, returns 1e35 (3.1415).toFixed(3); / Rounding the number, returns 3.1424.Javascript版本检测你知道你的浏览器支持哪一个版本的Javascript吗？如果不知道的话，去维基百科查一下Javascript版本表吧。出于某种原因，Javascript 1.7版本的某些特性是没有得到广泛的支持。不过大部分浏览器都支持了1.8版和1.8.1版的特性。（注：所有的IE浏览器（IE8或者更老的版本）只支持1.5版的Javascript）这里有一个脚本，既能通过检测特征来检测JavaScript版本，它还能检查特定的Javascript版本所支持的特性。view sourceprint?01 var JS_ver = ;02 (Ntotype.toFixed)?JS_ver.push(1.5):false;03 (.indexOf & .forEach)?JS_ver.push(1.6):false;04 (function()try a,b = 0,1;return true;catch(ex) return false;)()?JS_ver.push(1.7):false;05 (.reduce & .reduceRight & JSON)?JS_ver.push(1.8):false;06 (.trimLeft)?JS_ver.push(1.8.1):false;07 JS_ver.supports = function()08 09 if (arguments0)10 return (!this.join().indexOf(arguments0 +,) +,);11 else12 return (thisthis.length-1);13 14 alert(Latest Javascript version supported: + JS_ver.supports();15 alert(Support for version 1.7 : + JS_ver.supports(1.7);5.使用进行简单会话处理这个是我真的喜欢的东西。您可以为指定一个字符串作为属性的值，直到您关闭该标签或窗口。虽然我没有提供任何脚本，但我强烈建议您如充分利用这个方法。举例来说，在建设一个网站或应用程序的时候，在调试和测试模式之间切换是非常有用的。6.判断属性是否存在这个问题包含两个方面，既有检查属性时候存在，还要获取属性的类型。但我们总是忽略了这些小事情:view sourceprint?01 / BAD: This will cause an error in code when foo is undefined02 if (foo) 03 doSomething();04 05 / GOOD: This doesnt cause any errors. However, even when06 / foo is set to NULL or false, the condition validates as true07 if (typeof foo != undefined) 08 doSomething();09 10 / BETTER: This doesnt cause any errors and in addition11 / values NULL or false wont validate as true12 if (window.foo) 13 doSomething();14 但是，有的情况下，我们有更深的结构和需要更合适的检查的时候，可以这样：view sourceprint?1 / UGLY: we have to proof existence of every2 / object before we can be sure property actually exists3 if (window.oFoo & oFoo.oBar & oFoo.oBar.baz) 4 doSomething();5 7.给函数传递参数当函数既有必选又有可选参数的时候，我们可能是这样做的：view sourceprint?1 function doSomething(arg0, arg1, arg2, arg3, arg4) 2 .3 4 doSomething(, foo, 5, , false);而传递一个对象总是比传递一堆的参数更方便：view sourceprint?01 function doSomething() 02 / Leaves the function if nothing is passed03 if (!arguments0) 04 return false;05 06 var oArgs = arguments007 arg0 = oArgs.arg0 | ,08 arg1 = oArgs.arg1 | ,09 arg2 = oArgs.arg2 | 0,10 arg3 = oArgs.arg3 | ,11 arg4 = oArgs.arg4 | false;12 13 doSomething(14 arg1 : foo,15 arg2 : 5,16 arg4 : false17 );这只是一个把对象作为参数传递的一个很简单的例子，例如，我们还可以声明一个对象，变量名作为Key，默认值作为Value。8.使用document.createDocumentFragment()您可能需要动态地追加多个元素到文档中。然而，直接将它们插入到文档中会导致这个文档每次都需要重新布局一个，相反的，你应该使用文档碎片，建成后只追加一次：view sourceprint?01 function createList() 02 var aLI = first item, second item, third item,03 fourth item, fith item;04 / Creates the fragment05 var oFrag = document.createDocumentFragment();06 while (aLI.length) 07 var oLI = document.createElement(li);08 / Removes the first item from array and appends it09 / as a text node to LI element10 oLI.appendChild(document.createTextNode(aLI.shift();11 oFrag.appendChild(oLI);12 13 document.getElementById(myUL).appendChild(oFrag);14 9.为replace()方法传递一个函数有的时候你想替换字符串的某个部分为其它的值，最好的方法就是给String.replace()传递一个独立的函数。下面是一个简单例子：view sourceprint?01 var sFlop = Flop: Ah Ks 7c;02 var aValues = A:Ace,K:King,7:Seven;03 var aSuits = h:Hearts,s:Spades,04 d:Diamonds,c:Clubs;05 sFlop = sFlop.replace(/w+/gi, function(match) 06 match = match.replace(match2, aSuitsmatch2);07 match = match.replace(match1, aValuesmatch1 + of );08 return match;09 );10 / string sFlop now contains:11 / Flop: Ace of Hearts King of Spades Seven of Clubs10.循环中标签的使用有的时候，循环中又嵌套了循环，你可能想在循环中退出，则可以用标签：view sourceprint?01 outerloop: