个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
变量转换
varmyVar="3.14159", str=""+myVar,//tostring int=~~myVar,//tointeger float=1*myVar,//tofloat bool=!!myVar,/*toboolean-anystringwithlength andanynumberexcept0aretrue*/ array=[myVar];//toarray
但是转换日期(newDate(myVar))和正则表达式(newRegExp(myVar))必须使用构造函数，创建正则表达式的时候要使用/pattern/flags这样的简化形式。
取整同时转换成数值型
//字符型变量参与运算时，JS会自动将其转换为数值型（如果无法转化，变为NaN） '10.567890'|0 //结果:10 //JS里面的所有数值型都是双精度浮点数,因此，JS在进行位运算时，会首先将这些数字运算数转换为整数，然后再执行运算 //|是二进制或，x|0永远等于x；^为异或，同0异1，所以x^0还是永远等于x；至于~是按位取反，搞了两次以后值当然是一样的 '10.567890'^0 //结果:10 -2.23456789|0 //结果:-2 ~~-2.23456789 //结果:-2
日期转数值
//JS本身时间的内部表示形式就是Unix时间戳，以毫秒为单位记录着当前距离1970年1月1日0点的时间单位 vard=+newDate();//1295698416792
类数组对象转数组
vararr=[].slice.call(arguments)
下面的实例用的更绝
functiontest(){
varres=['item1','item2']
res=res.concat(Array.prototype.slice.call(arguments))//方法1
Array.prototype.push.apply(res,arguments)//方法2
}
进制之间的转换
(int).toString(16);//convertsinttohex,eg12=>"C" (int).toString(8);//convertsinttooctal,eg.12=>"14" parseInt(string,16)//convertshextoint,eg."FF"=>255 parseInt(string,8)//convertsoctaltoint,eg."20"=>16
将一个数组插入另一个数组指定的位置
vara=[1,2,3,7,8,9]; varb=[4,5,6]; varinsertIndex=3; a.splice.apply(a,Array.prototype.concat(insertIndex,0,b));
删除数组元素
vara=[1,2,3,4,5]; a.splice(3,1);//a=[1,2,3,5]
大家也许会想为什么要用splice而不用delete,因为用delete将会在数组里留下一个空洞，而且后面的下标也并没有递减。
判断是否为IE
varie=/*@cc_on!@*/false;
这样一句简单的话就可以判断是否为ie，太。。。
其实还有更多妙的方法，请看下面
//貌似是最短的，利用IE不支持标准的ECMAscript中数组末逗号忽略的机制 varie=!-[1,]; //利用了IE的条件注释 varie=/*@cc_on!@*/false; //还是条件注释 varie//@cc_on=1; //IE不支持垂直制表符 varie='\v'=='v'; //原理同上 varie=!+"\v1";
学到这个瞬间觉得自己弱爆了。
尽量利用原生方法
要找一组数字中的最大数，我们可能会写一个循环，例如：
varnumbers=[3,342,23,22,124];
varmax=0;
for(vari=0;i<numbers.length;i++){
if(numbers[i]>max){
max=numbers[i];
}
}
alert(max);
其实利用原生的方法，可以更简单实现
varnumbers=[3,342,23,22,124];
numbers.sort(function(a,b){returnb-a});
alert(numbers[0]);
当然最简洁的方法便是：
Math.max(12,123,3,2,433,4);//returns433
当前也可以这样
Math.max.apply(Math,[12,123,3,2,433,4])//取最大值 Math.min.apply(Math,[12,123,3,2,433,4])//取最小值
生成随机数
Math.random().toString(16).substring(2);//toString()函数的参数为基底，范围为2~36。 Math.random().toString(36).substring(2);
不用第三方变量交换两个变量的值
a=[b,b=a][0];
事件委派
举个简单的例子：html代码如下
<h2>GreatWebresources</h2> <ulid="resources"> <li><ahref="http://opera.com/wsc">OperaWebStandardsCurriculum</a></li> <li><ahref="http://sitepoint.com">Sitepoint</a></li> <li><ahref="http://alistapart.com">AListApart</a></li> <li><ahref="http://yuiblog.com">YUIBlog</a></li> <li><ahref="http://blameitonthevoices.com">Blameitonthevoices</a></li> <li><ahref="http://oddlyspecific.com">Oddlyspecific</a></li> </ul>
js代码如下：
//Classiceventhandlingexample
(function(){
varresources=document.getElementById('resources');
varlinks=resources.getElementsByTagName('a');
varall=links.length;
for(vari=0;i<all;i++){
//Attachalistenertoeachlink
links[i].addEventListener('click',handler,false);
};
functionhandler(e){
varx=e.target;//Getthelinkthatwasclicked
alert(x);
e.preventDefault();
};
})();
利用事件委派可以写出更加优雅的：
(function(){
varresources=document.getElementById('resources');
resources.addEventListener('click',handler,false);
functionhandler(e){
varx=e.target;//getthelinktha
if(x.nodeName.toLowerCase()==='a'){
alert('Eventdelegation:'+x);
e.preventDefault();
}
};
})();
检测ie版本
var_IE=(function(){
varv=3,div=document.createElement('div'),all=div.getElementsByTagName('i');
while(
div.innerHTML='<!--[ifgtIE'+(++v)+']><i></i><![endif]-->',
all[0]
);
returnv>4?v:false;
}());
javaScript版本检测
你知道你的浏览器支持哪一个版本的Javascript吗？
varJS_ver=[];
(Number.prototype.toFixed)?JS_ver.push("1.5"):false;
([].indexOf&&[].forEach)?JS_ver.push("1.6"):false;
((function(){try{[a,b]=[0,1];returntrue;}catch(ex){returnfalse;}})())?JS_ver.push("1.7"):false;
([].reduce&&[].reduceRight&&JSON)?JS_ver.push("1.8"):false;
("".trimLeft)?JS_ver.push("1.8.1"):false;
JS_ver.supports=function()
{
if(arguments[0])
return(!!~this.join().indexOf(arguments[0]+",")+",");
else
return(this[this.length-1]);
}
alert("LatestJavascriptversionsupported:"+JS_ver.supports());
alert("Supportforversion1.7:"+JS_ver.supports("1.7"));
判断属性是否存在
//BAD:Thiswillcauseanerrorincodewhenfooisundefined
if(foo){
doSomething();
}
//GOOD:Thisdoesn'tcauseanyerrors.However,evenwhen
//fooissettoNULLorfalse,theconditionvalidatesastrue
if(typeoffoo!="undefined"){
doSomething();
}
//BETTER:Thisdoesn'tcauseanyerrorsandinaddition
//valuesNULLorfalsewon'tvalidateastrue
if(window.foo){
doSomething();
}
有的情况下，我们有更深的结构和需要更合适的检查的时候
//UGLY:wehavetoproofexistenceofevery
//objectbeforewecanbesurepropertyactuallyexists
if(window.oFoo&&oFoo.oBar&&oFoo.oBar.baz){
doSomething();
}
其实最好的检测一个属性是否存在的方法为：
if("opera"inwindow){
console.log("OPERA");
}else{
console.log("NOTOPERA");
}
检测对象是否为数组
varobj=[]; Object.prototype.toString.call(obj)=="[objectArray]";
给函数传递对象
functiondoSomething(){
//Leavesthefunctionifnothingispassed
if(!arguments[0]){
returnfalse;
}
varoArgs=arguments[0]
arg0=oArgs.arg0||"",
arg1=oArgs.arg1||"",
arg2=oArgs.arg2||0,
arg3=oArgs.arg3||[],
arg4=oArgs.arg4||false;
}
doSomething({
arg1:"foo",
arg2:5,
arg4:false
});
为replace方法传递一个函数
varsFlop="Flop:[Ah][Ks][7c]";
varaValues={"A":"Ace","K":"King",7:"Seven"};
varaSuits={"h":"Hearts","s":"Spades",
"d":"Diamonds","c":"Clubs"};
sFlop=sFlop.replace(/\[\w+\]/gi,function(match){
match=match.replace(match[2],aSuits[match[2]]);
match=match.replace(match[1],aValues[match[1]]+"of");
returnmatch;
});
//stringsFlopnowcontains:
//"Flop:[AceofHearts][KingofSpades][SevenofClubs]"
循环中使用标签
有时候循环当中嵌套循环，你可能想要退出某一层循环，之前总是用一个标志变量来判断，现在才知道有更好的方法
outerloop:
for(variI=0;iI<5;iI++){
if(somethingIsTrue()){
//Breakstheouterloopiteration
breakouterloop;
}
innerloop:
for(variA=0;iA<5;iA++){
if(somethingElseIsTrue()){
//Breakstheinnerloopiteration
breakinnerloop;
}
}
}
对数组进行去重
/*
*@desc:对数组进行去重操作，返回一个没有重复元素的新数组
*/
functionunique(target){
varresult=[];
loop:for(vari=0,n=target.length;i<n;i++){
for(varx=i+1;x<n;x++){
if(target[x]===target[i]){
continueloop;
}
}
result.push(target[i]);
}
returnresult;
}
或者如下：
Array.prototype.distinct=function(){
varnewArr=[],obj={};
for(vari=0,len=this.length;i<len;i++){
if(!obj[typeof(this[i])+this[i]]){
newArr.push(this[i]);
obj[typeof(this[i])+this[i]]='new';
}
}
returnnewArr;
}
其实最优的方法是这样的
Array.prototype.distinct=function(){
varsameObj=function(a,b){
vartag=true;
if(!a||!b)returnfalse;
for(varxina){
if(!b[x])returnfalse;
if(typeof(a[x])==='object'){
tag=sameObj(a[x],b[x]);
}else{
if(a[x]!==b[x])
returnfalse;
}
}
returntag;
}
varnewArr=[],obj={};
for(vari=0,len=this.length;i<len;i++){
if(!sameObj(obj[typeof(this[i])+this[i]],this[i])){
newArr.push(this[i]);
obj[typeof(this[i])+this[i]]=this[i];
}
}
returnnewArr;
}
使用范例（借用评论）：
vararr=[{name:"tom",age:12},{name:"lily",age:22},{name:"lilei",age:12}];
varnewArr=arr.distinct(function(ele){
returnele.age;
});
查找字符串中出现最多的字符及个数
vari,len,maxobj='',maxnum=0,obj={};
vararr="sdjksfssscfssdd";
for(i=0,len=arr.length;i<len;i++){
obj[arr[i]]?obj[arr[i]]++:obj[arr[i]]=1;
if(maxnum<obj[arr[i]]){
maxnum=obj[arr[i]];
maxobj=arr[i];
}
}
alert(maxobj+"在数组中出现了"+maxnum+"次");
其实还有很多，这些只是我闲来无事总结的一些罢了。