JavaScript 实用技巧与原生方法速查
本文汇总了 JavaScript 编程中的实用技巧，涵盖变量类型转换、日期与数值处理、数组元素删除及进制转换。重点讲解如何利用原生方法简化最大数查找、随机数生成及变量交换，并深入解析事件委派与 IE 版本检测机制，帮助开发者编写更简洁高效的代码。
JavaScript 技巧概览
本文整理并分享了 JavaScript 编程中的实用技巧，供读者参考与学习，具体内容包括以下各项。
变量类型转换与处理
1、变量类型转换
varmyVar="3.14159",
str=""+myVar,//tostring
int=~~myVar,//tointeger
float=1*myVar,//tofloat
bool=!!myVar,/*toboolean-anystringwithlength
andanynumberexcept0aretrue*/
array=[myVar];//toarray
需要注意的是，将变量转换为日期（new Date(myVar)）和正则表达式（new RegExp(myVar)）时必须使用构造函数。在创建正则表达式时，推荐使用 /pattern/flags 这种简写形式。
数值、日期与数组操作技巧
2、取整并同时转换为数值型
//字符型变量参与运算时，JS会自动将其转换为数值型（如果无法转化，变为NaN）
'10.567890'|0
//结果:10
//JS里面的所有数值型都是双精度浮点数,因此，JS在进行位运算时，会首先将这些数字运算数转换为整数，然后再执行运算
//|是二进制或，x|0永远等于x；^为异或，同0异1，所以x^0还是永远等于x；至于~是按位取反，搞了两次以后值当然是一样的
'10.567890'^0
//结果:10
-2.23456789|0
//结果:-2
3、将日期转换为数值
//JS本身时间的内部表示形式就是Unix时间戳，以毫秒为单位记录着当前距离1970年1月1日0点的时间单位
vard=+newDate();//1295698416792
4、将类数组对象转换为数组
vararr=[].slice.call(arguments)
下面的实例用的更绝
functiontest(){
varres=['item1','item2']
res=res.concat(Array.prototype.slice.call(arguments))//方法1
Array.prototype.push.apply(res,arguments)//方法2
}
5、不同进制之间的转换
(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));
数组元素删除与 IE 判断
6、删除数组中的元素
vara=[1,2,3,4,5];
a.splice(3,1);//a=[1,2,3,5]
大家也许会想为什么要用splice而不用delete,因为用delete将会在数组里留下一个空洞，而且后面的下标也并没有递减。 7、判断是否为IE
varie=/*@cc_on!@*/false;
7、判断浏览器是否为 IE
通过这样一句简单的代码即可实现 IE 判断，效果显著。
//edithttp://www.lai18.com
//貌似是最短的，利用IE不支持标准的ECMAscript中数组末逗号忽略的机制
varie=!-[1,];
//利用了IE的条件注释
varie=/*@cc_on!@*/false;
//还是条件注释
varie//@cc_on=1;
//IE不支持垂直制表符
varie='v'=='v';
//原理同上
varie=!+"v1";
实际上还有更多巧妙的实现方式，详见下文。
深入理解后，往往会发现之前的写法存在不足。
利用原生方法优化代码
12、尽量利用原生方法
varnumbers=[3,342,23,22,124];
varmax=0;
for(vari=0;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
当然，最简洁的写法如下：
[xhtml]view plaincopy
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);
8、生成随机数
a=[b,b=a][0];
随机数生成与变量交换
无需借助第三方变量即可交换两个变量的值。
事件委派机制
9、事件委派
//Classiceventhandlingexample
(function(){
varresources=document.getElementById('resources');
varlinks=resources.getElementsByTagName('a');
varall=links.length;
for(vari=0;i
//Attachalistenertoeachlink
links[i].addEventListener('click',handler,false);
};
functionhandler(e){
varx=e.target;//Getthelinkthatwasclicked
alert(x);
e.preventDefault();
};
})();
传统的 JavaScript 代码如下：
(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();
}
};
})();
利用事件委派机制，可以写出更加优雅且高效的代码：
var_IE=(function(){
varv=3,div=document.createElement('div'),all=div.getElementsByTagName('i');
while(
div.innerHTML='',
all[0]
);
returnv>4?v:false;
}());
IE 版本与 JavaScript 版本检测
10、检测 IE 版本
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"));
了解你的浏览器支持哪个版本的 JavaScript 至关重要。
//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();
}
属性存在性与数组检测
11、判断属性是否存在
//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]";
12、检测对象是否为数组
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28