JavaScript学习总结-技巧、实用函数、简洁方法、编程细节

整理JavaScript方面的一些技巧，比较实用的函数，常见功能实现方法，仅作参考

变量转换

1. //edithttp://www.lai18.com
2. varmyVar="3.14159",
3. str=""+myVar,//tostring
4. int=~~myVar,//tointeger
5. float=1*myVar,//tofloat
6. bool=!!myVar,/*toboolean-anystringwithlength
7. andanynumberexcept0aretrue*/
8. array=[myVar];//toarray

但是转换日期(new Date(myVar))和正则表达式(new RegExp(myVar))必须使用构造函数，创建正则表达式的时候要使用/pattern/flags这样的简化形式。　

取整同时转换成数值型　

1. //edithttp://www.lai18.com
2. //字符型变量参与运算时，JS会自动将其转换为数值型（如果无法转化，变为NaN）
3. '10.567890'|0
4. //结果:10
5. //JS里面的所有数值型都是双精度浮点数,因此，JS在进行位运算时，会首先将这些数字运算数转换为整数，然后再执行运算
6. //|是二进制或，x|0永远等于x；^为异或，同0异1，所以x^0还是永远等于x；至于~是按位取反，搞了两次以后值当然是一样的
7. '10.567890'^0
8. //结果:10
9. -2.23456789|0
10. //结果:-2
11. ~~-2.23456789
12. //结果:-2

日期转数值

1. //JS本身时间的内部表示形式就是Unix时间戳，以毫秒为单位记录着当前距离1970年1月1日0点的时间单位
2. vard=+newDate();//1295698416792

类数组对象转数组

1. vararr=[].slice.call(arguments)

下面的实例用的更绝

1. functiontest(){
2. varres=['item1','item2']
3. res=res.concat(Array.prototype.slice.call(arguments))//方法1
4. Array.prototype.push.apply(res,arguments)//方法2
5. }

进制之间的转换

1. (int).toString(16);//convertsinttohex,eg12=>"C"
2. (int).toString(8);//convertsinttooctal,eg.12=>"14"
3. parseInt(string,16)//convertshextoint,eg."FF"=>255
4. parseInt(string,8)//convertsoctaltoint,eg."20"=>16

将一个数组插入另一个数组指定的位置

1. vara=[1,2,3,7,8,9];
2. varb=[4,5,6];
3. varinsertIndex=3;
4. a.splice.apply(a,Array.prototype.concat(insertIndex,0,b));

删除数组元素

1. vara=[1,2,3,4,5];
2. a.splice(3,1);//a=[1,2,3,5]

大家也许会想为什么要用splice而不用delete,因为用delete将会在数组里留下一个空洞，而且后面的下标也并没有递减。

判断是否为IE

1. varie=/*@cc_on!@*/false;

这样一句简单的话就可以判断是否为ie，太。。。

其实还有更多妙的方法，请看下面

1. //edithttp://www.lai18.com
2. //貌似是最短的，利用IE不支持标准的ECMAscript中数组末逗号忽略的机制
3. varie=!-[1,];
4. //利用了IE的条件注释
5. varie=/*@cc_on!@*/false;
6. //还是条件注释
7. varie//@cc_on=1;
8. //IE不支持垂直制表符
9. varie='v'=='v';
10. //原理同上
11. varie=!+"v1";

学到这个瞬间觉得自己弱爆了。



尽量利用原生方法

要找一组数字中的最大数，我们可能会写一个循环，例如：

1. varnumbers=[3,342,23,22,124];
2. varmax=0;
3. for(vari=0;i<numbers.length;i++){
4. if(numbers[i]>max){
5. max=numbers[i];
6. }
7. }
8. alert(max);

其实利用原生的方法，可以更简单实现

1. varnumbers=[3,342,23,22,124];
2. numbers.sort(function(a,b){returnb-a});
3. alert(numbers[0]);

当然最简洁的方法便是：

1. Math.max(12,123,3,2,433,4);//returns433

当前也可以这样

[xhtml]view plaincopy

1. Math.max.apply(Math,[12,123,3,2,433,4])//取最大值
2. Math.min.apply(Math,[12,123,3,2,433,4])//取最小值

生成随机数

1. Math.random().toString(16).substring(2);//toString()函数的参数为基底，范围为2~36。
2. Math.random().toString(36).substring(2);

不用第三方变量交换两个变量的值

1. a=[b,b=a][0];

事件委派

举个简单的例子：html代码如下

1. <h2>GreatWebresources</h2>
2. <ulid="resources">
3. <li><ahref="http://opera.com/wsc">OperaWebStandardsCurriculum</a></li>
4. <li><ahref="http://sitepoint.com">Sitepoint</a></li>
5. <li><ahref="http://alistapart.com">AListApart</a></li>
6. <li><ahref="http://yuiblog.com">YUIBlog</a></li>
7. <li><ahref="http://blameitonthevoices.com">Blameitonthevoices</a></li>
8. <li><ahref="http://oddlyspecific.com">Oddlyspecific</a></li>
9. </ul>

js代码如下：

1. //Classiceventhandlingexample
2. (function(){
3. varresources=document.getElementById('resources');
4. varlinks=resources.getElementsByTagName('a');
5. varall=links.length;
6. for(vari=0;i<all;i++){
7. //Attachalistenertoeachlink
8. links[i].addEventListener('click',handler,false);
9. };
10. functionhandler(e){
11. varx=e.target;//Getthelinkthatwasclicked
12. alert(x);
13. e.preventDefault();
14. };
15. })();

利用事件委派可以写出更加优雅的：

1. (function(){
2. varresources=document.getElementById('resources');
3. resources.addEventListener('click',handler,false);
4. functionhandler(e){
5. varx=e.target;//getthelinktha
6. if(x.nodeName.toLowerCase()==='a'){
7. alert('Eventdelegation:'+x);
8. e.preventDefault();
9. }
10. };
11. })();

检测ie版本

1. var_IE=(function(){
2. varv=3,div=document.createElement('div'),all=div.getElementsByTagName('i');
3. while(
4. div.innerHTML='<!--[ifgtIE'+(++v)+']><i></i><![endif]-->',
5. all[0]
6. );
7. returnv>4?v:false;
8. }());

javaScript版本检测

你知道你的浏览器支持哪一个版本的Javascript吗？

1. varJS_ver=[];
2. (Number.prototype.toFixed)?JS_ver.push("1.5"):false;
3. ([].indexOf&&[].forEach)?JS_ver.push("1.6"):false;
4. ((function(){try{[a,b]=[0,1];returntrue;}catch(ex){returnfalse;}})())?JS_ver.push("1.7"):false;
5. ([].reduce&&[].reduceRight&&JSON)?JS_ver.push("1.8"):false;
6. ("".trimLeft)?JS_ver.push("1.8.1"):false;
7. JS_ver.supports=function()
8. {
9. 　　if(arguments[0])
10. 　　　　return(!!~this.join().indexOf(arguments[0]+",")+",");
11. 　　else
12. 　　　　return(this[this.length-1]);
13. }
14. alert("LatestJavascriptversionsupported:"+JS_ver.supports());
15. alert("Supportforversion1.7:"+JS_ver.supports("1.7"));

判断属性是否存在

1. //BAD:Thiswillcauseanerrorincodewhenfooisundefined
2. if(foo){
3. 　　doSomething();
4. }
5. //GOOD:Thisdoesn'tcauseanyerrors.However,evenwhen
6. //fooissettoNULLorfalse,theconditionvalidatesastrue
7. if(typeoffoo!="undefined"){
8. 　　doSomething();
9. }
10. //BETTER:Thisdoesn'tcauseanyerrorsandinaddition
11. //valuesNULLorfalsewon'tvalidateastrue
12. if(window.foo){
13. 　　doSomething();
14. }

有的情况下，我们有更深的结构和需要更合适的检查的时候

1. //UGLY:wehavetoproofexistenceofevery
2. //objectbeforewecanbesurepropertyactuallyexists
3. if(window.oFoo&&oFoo.oBar&&oFoo.oBar.baz){
4. 　　doSomething();
5. }

其实最好的检测一个属性是否存在的方法为：

1. if("opera"inwindow){
2. console.log("OPERA");
3. }else{
4. console.log("NOTOPERA");
5. }

检测对象是否为数组

1. varobj=[];
2. Object.prototype.toString.call(obj)=="[objectArray]";

给函数传递对象

1. functiondoSomething(){
2. 　　//Leavesthefunctionifnothingispassed
3. 　　if(!arguments[0]){
4. 　　returnfalse;
5. 　　}
6. 　　varoArgs=arguments[0]
7. 　　arg0=oArgs.arg0||"",
8. 　　arg1=oArgs.arg1||"",
9. 　　arg2=oArgs.arg2||0,
10. 　　arg3=oArgs.arg3||[],
11. 　　arg4=oArgs.arg4||false;
12. }
13. doSomething({
14. 　　arg1:"foo",
15. 　　arg2:5,
16. 　　arg4:false
17. });

为replace方法传递一个函数

1. varsFlop="Flop:[Ah][Ks][7c]";
2. varaValues={"A":"Ace","K":"King",7:"Seven"};
3. varaSuits={"h":"Hearts","s":"Spades",
4. "d":"Diamonds","c":"Clubs"};
5. sFlop=sFlop.replace(/

   w+

   /gi,function(match){
6. 　　match=match.replace(match[2],aSuits[match[2]]);
7. 　　match=match.replace(match[1],aValues[match[1]]+"of");
8. 　　returnmatch;
9. });
10. //stringsFlopnowcontains:
11. //"Flop:[AceofHearts][KingofSpades][SevenofClubs]"

循环中使用标签

有时候循环当中嵌套循环，你可能想要退出某一层循环，之前总是用一个标志变量来判断，现在才知道有更好的方法

1. outerloop:
2. for(variI=0;iI<5;iI++){
3. 　　if(somethingIsTrue()){
4. 　　//Breakstheouterloopiteration
5. 　　breakouterloop;
6. 　　}
7. 　　innerloop:
8. 　　for(variA=0;iA<5;iA++){
9. 　　　　if(somethingElseIsTrue()){
10. 　　　　//Breakstheinnerloopiteration
11. 　　　　breakinnerloop;
12. 　　}
13. 　　}
14. }

对数组进行去重

1. /*
2. *@desc:对数组进行去重操作，返回一个没有重复元素的新数组
3. */
4. functionunique(target){
5. varresult=[];
6. loop:for(vari=0,n=target.length;i<n;i++){
7. for(varx=i+1;x<n;x++){
8. if(target[x]===target[i]){
9. continueloop;
10. }
11. }
12. result.push(target[i]);
13. }
14. returnresult;
15. }

或者如下：

1. Array.prototype.distinct=function(){
2. varnewArr=[],obj={};
3. for(vari=0,len=this.length;i<len;i++){
4. if(!obj[typeof(this[i])+this[i]]){
5. newArr.push(this[i]);
6. obj[typeof(this[i])+this[i]]='new';
7. }
8. }
9. returnnewArr;
10. }

其实最优的方法是这样的

1. Array.prototype.distinct=function(){
2. varsameObj=function(a,b){
3. vartag=true;
4. if(!a||!b)returnfalse;
5. for(varxina){
6. if(!b[x])returnfalse;
7. if(typeof(a[x])==='object'){
8. tag=sameObj(a[x],b[x]);
9. }else{
10. if(a[x]!==b[x])
11. returnfalse;
12. }
13. }
14. returntag;
15. }
16. varnewArr=[],obj={};
17. for(vari=0,len=this.length;i<len;i++){
18. if(!sameObj(obj[typeof(this[i])+this[i]],this[i])){
19. newArr.push(this[i]);
20. obj[typeof(this[i])+this[i]]=this[i];
21. }
22. }
23. returnnewArr;
24. }

使用范例（借用评论）：

1. vararr=[{name:"tom",age:12},{name:"lily",age:22},{name:"lilei",age:12}];
2. varnewArr=arr.distinct(function(ele){
3. returnele.age;
4. });

查找字符串中出现最多的字符及个数

1. vari,len,maxobj='',maxnum=0,obj={};
2. vararr="sdjksfssscfssdd";
3. for(i=0,len=arr.length;i<len;i++){
4. obj[arr[i]]?obj[arr[i]]++:obj[arr[i]]=1;
5. if(maxnum<obj[arr[i]]){
6. maxnum=obj[arr[i]];
7. maxobj=arr[i];
8. }
9. }
10. alert(maxobj+"在数组中出现了"+maxnum+"次");

其实还有很多，这些只是我闲来无事总结的一些罢了。