JavaScript 有用的代码片段和 trick
浮点数取整
constx=123.4545; x>>0;//123 ~~x;//123 x|0;//123 Math.floor(x);//123
注意：前三种方法只适用于32个位整数，对于负数的处理上和Math.floor是不同的。
Math.floor(-12.53);//-13 -12.53|0;//-12
生成6位数字验证码
//方法一
('000000'+Math.floor(Math.random()*999999)).slice(-6);
//方法二
Math.random().toString().slice(-6);
//方法三
Math.random().toFixed(6).slice(-6);
//方法四
''+Math.floor(Math.random()*999999);
16进制颜色代码生成
(function(){
return'#'+('00000'+
(Math.random()*0x1000000<<0).toString(16)).slice(-6);
})();
驼峰命名转下划线
'componentMapModelRegistry'.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase();//component_map_model_registry
url查询参数转json格式
//ES6
constquery=(search='')=>((querystring='')=>(q=>(querystring.split('&').forEach(item=>(kv=>kv[0]&&(q[kv[0]]=kv[1]))(item.split('='))),q))({}))(search.split('?')[1]);
//对应ES5实现
varquery=function(search){
if(search===void0){search='';}
return(function(querystring){
if(querystring===void0){querystring='';}
return(function(q){
return(querystring.split('&').forEach(function(item){
return(function(kv){
returnkv[0]&&(q[kv[0]]=kv[1]);
})(item.split('='));
}),q);
})({});
})(search.split('?')[1]);
};
query('?key1=value1&key2=value2');//es6.html:14{key1:"value1",key2:"value2"}
获取URL参数
functiongetQueryString(key){
varreg=newRegExp("(^|&)"+key+"=([^&]*)(&|$)");
varr=window.location.search.substr(1).match(reg);
if(r!=null){
returnunescape(r[2]);
}
returnnull;
}
n维数组展开成一维数组
varfoo=[1,[2,3],['4',5,['6',7,[8]]],[9],10];
//方法一
//限制：数组项不能出现`,`，同时数组项全部变成了字符数字
foo.toString().split(',');//["1","2","3","4","5","6","7","8","9","10"]
//方法二
//转换后数组项全部变成数字了
eval('['+foo+']');//[1,2,3,4,5,6,7,8,9,10]
//方法三，使用ES6展开操作符
//写法太过麻烦，太过死板
[1,...[2,3],...['4',5,...['6',7,...[8]]],...[9],10];//[1,2,3,"4",5,"6",7,8,9,10]
//方法四
JSON.parse(`[${JSON.stringify(foo).replace(/\[|]/g,'')}]`);//[1,2,3,"4",5,"6",7,8,9,10]
//方法五
constflatten=(ary)=>ary.reduce((a,b)=>a.concat(Array.isArray(b)?flatten(b):b),[]);
flatten(foo);//[1,2,3,"4",5,"6",7,8,9,10]
//方法六
functionflatten(a){
returnArray.isArray(a)?[].concat(...a.map(flatten)):a;
注：更多方法请参考《HowtoflattennestedarrayinJavaScript?》
日期格式化
//方法一
functionformat1(x,y){
varz={
y:x.getFullYear(),
M:x.getMonth()+1,
d:x.getDate(),
h:x.getHours(),
m:x.getMinutes(),
s:x.getSeconds()
};
returny.replace(/(y+|M+|d+|h+|m+|s+)/g,function(v){
return((v.length>1?"0":"")+eval('z.'+v.slice(-1))).slice(-(v.length>2?v.length:2))
});
}
format1(newDate(),'yy-M-dh:m:s');//17-10-1422:14:41
//方法二
Date.prototype.format=function(fmt){
varo={
"M+":this.getMonth()+1,//月份
"d+":this.getDate(),//日
"h+":this.getHours(),//小时
"m+":this.getMinutes(),//分
"s+":this.getSeconds(),//秒
"q+":Math.floor((this.getMonth()+3)/3),//季度
"S":this.getMilliseconds()//毫秒
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
}
for(varkino){
if(newRegExp("("+k+")").test(fmt)){
fmt=fmt.replace(RegExp.$1,(RegExp.$1.length==1)?(o[k]):(("00"+o[k]).substr((""+o[k]).length)));
}
}
returnfmt;
}
newDate().format('yy-M-dh:m:s');//17-10-1422:18:17
特殊字符转义
functionhtmlspecialchars(str){
varstr=str.toString().replace(/&/g,"&").replace(//g,">").replace(/"/g,'"');
returnstr;
}
htmlspecialchars('&jfkds<>');//"&jfkds<>"
动态插入js
functioninjectScript(src){
vars,t;
s=document.createElement('script');
s.type='text/javascript';
s.async=true;
s.src=src;
t=document.getElementsByTagName('script')[0];
t.parentNode.insertBefore(s,t);
}
格式化数量
//方法一
functionformatNum(num,n){
if(typeofnum=="number"){
num=String(num.toFixed(n||0));
varre=/(-?\d+)(\d{3})/;
while(re.test(num))num=num.replace(re,"$1,$2");
returnnum;
}
returnnum;
}
formatNum(2313123,3);//"2,313,123.000"
//方法二
'2313123'.replace(/\B(?=(\d{3})+(?!\d))/g,',');//"2,313,123"
//方法三
functionformatNum(str){
returnstr.split('').reverse().reduce((prev,next,index)=>{
return((index%3)?next:(next+','))+prev
});
}
formatNum('2313323');//"2,313,323"
身份证验证
functionchechCHNCardId(sNo){
if(!this.regExpTest(sNo,/^[0-9]{17}[X0-9]$/)){
returnfalse;
}
sNo=sNo.toString();
vara,b,c;
a=parseInt(sNo.substr(0,1))*7+parseInt(sNo.substr(1,1))*9+parseInt(sNo.substr(2,1))*10;
a=a+parseInt(sNo.substr(3,1))*5+parseInt(sNo.substr(4,1))*8+parseInt(sNo.substr(5,1))*4;
a=a+parseInt(sNo.substr(6,1))*2+parseInt(sNo.substr(7,1))*1+parseInt(sNo.substr(8,1))*6;
a=a+parseInt(sNo.substr(9,1))*3+parseInt(sNo.substr(10,1))*7+parseInt(sNo.substr(11,1))*9;
a=a+parseInt(sNo.substr(12,1))*10+parseInt(sNo.substr(13,1))*5+parseInt(sNo.substr(14,1))*8;
a=a+parseInt(sNo.substr(15,1))*4+parseInt(sNo.substr(16,1))*2;
b=a%11;
if(b==2){
c=sNo.substr(17,1).toUpperCase();
}else{
c=parseInt(sNo.substr(17,1));
}
switch(b){
case0:
if(c!=1){
returnfalse;
}
break;
case1:
if(c!=0){
returnfalse;
}
break;
case2:
if(c!="X"){
returnfalse;
}
break;
case3:
if(c!=9){
returnfalse;
}
break;
case4:
if(c!=8){
returnfalse;
}
break;
case5:
if(c!=7){
returnfalse;
}
break;
case6:
if(c!=6){
returnfalse;
}
break;
case7:
if(c!=5){
returnfalse;
}
break;
case8:
if(c!=4){
returnfalse;
}
break;
case9:
if(c!=3){
returnfalse;
}
break;
case10:
if(c!=2){
returnfalse;
};
}
returntrue;
}
测试质数
functionisPrime(n){
return!(/^.?$|^(..+?)\1+$/).test('1'.repeat(n))
}
统计字符串中相同字符出现的次数
vararr='abcdaabc';
varinfo=arr
.split('')
.reduce((p,k)=>(p[k]++||(p[k]=1),p),{});
console.log(info);//{a:3,b:2,c:2,d:1}
使用void0来解决undefined被污染问题
undefined=1; !!undefined;//true !!void(0);//false
单行写一个评级组件
"★★★★★☆☆☆☆☆".slice(5-rate,10-rate);
JavaScript错误处理的方式的正确姿势
try{
something
}catch(e){
window.location.href=
"http://stackoverflow.com/search?q=[js]+"+
e.message;
}
匿名函数自执行写法
(function(){}());
(function(){})();
[function(){}()];
~function(){}();
!function(){}();
+function(){}();
-function(){}();
deletefunction(){}();
typeoffunction(){}();
voidfunction(){}();
newfunction(){}();
newfunction(){};
varf=function(){}();
1,function(){}();
1^function(){}();
1>function(){}();
两个整数交换数值
vara=20,b=30; a^=b; b^=a; a^=b; a;//30 b;//20
数字字符转数字
vara='1'; +a;//1
最短的代码实现数组去重
[...newSet([1,"1",2,1,1,3])];//[1,"1",2,3]
用最短的代码实现一个长度为m(6)且值都n(8)的数组
Array(6).fill(8);//[8,8,8,8,8,8]
将argruments对象转换成数组
varargArray=Array.prototype.slice.call(arguments); //ES6： varargArray=Array.from(arguments) //or varargArray=[...arguments];
获取日期时间缀
//获取指定时间的时间缀 newDate().getTime(); (newDate()).getTime(); (newDate).getTime(); //获取当前的时间缀 Date.now(); //日期显示转换为数字 +newDate();
使用~x.indexOf('y')来简化x.indexOf('y')>-1
varstr='helloworld';
if(str.indexOf('lo')>-1){
//...
}
if(~str.indexOf('lo')){
//...
}
两者的差别之处在于解析和转换两者之间的理解。
解析允许字符串中含有非数字字符，解析按从左到右的顺序，如果遇到非数字字符就停止。而转换不允许出现非数字字符，否者会失败并返回NaN。
vara='520'; varb='520px'; Number(a);//520 parseInt(a);//520 Number(b);//NaN parseInt(b);//520
parseInt方法第二个参数用于指定转换的基数，ES5默认为10进制。
parseInt('10',2);//2
parseInt('10',8);//8
parseInt('10',10);//10
parseInt('10',16);//16
对于网上parseInt(0.0000008)的结果为什么为8，原因在于0.0000008转换成字符为"8e-7"，然后根据parseInt的解析规则自然得到"8"这个结果。
+拼接操作，+xorString(x)？
+运算符可用于数字加法，同时也可以用于字符串拼接。如果+的其中一个操作符是字符串(或者通过隐式强制转换可以得到字符串)，则执行字符串拼接；否者执行数字加法。
需要注意的时对于数组而言，不能通过valueOf()方法得到简单基本类型值，于是转而调用toString()方法。
[1,2]+[3,4];//"1,23,4"
对于对象同样会先调用valueOf()方法，然后通过toString()方法返回对象的字符串表示。
vara={};
a+123;//"[objectObject]123"
对于a+""隐式转换和String(a)显示转换有一个细微的差别：a+''会对a调用valueOf()方法，而String()直接调用toString()方法。大多数情况下我们不会考虑这个问题，除非真遇到。
vara={
valueOf:function(){return42;},
toString:function(){return4;}
}
a+'';//42
String(a);//4
判断对象的实例
//方法一:ES3
functionPerson(name,age){
if(!(thisinstanceofPerson)){
returnnewPerson(name,age);
}
this.name=name;
this.age=age;
}
//方法二:ES5
functionPerson(name,age){
varself=thisinstanceofPerson?this:Object.create(Person.prototype);
self.name=name;
self.age=age;
returnself;
}
//方法三：ES6
functionPerson(name,age){
if(!new.target){
throw'Peronmustcalledwithnew';
}
this.name=name;
this.age=age;
}
数据安全类型检查
//对象
functionisObject(value){
returnObject.prototype.toString.call(value).slice(8,-1)==='Object'';
}
//数组
functionisArray(value){
returnObject.prototype.toString.call(value).slice(8,-1)==='Array';
}
//函数
functionisFunction(value){
returnObject.prototype.toString.call(value).slice(8,-1)==='Function';
}
让数字的字面值看起来像对象
toString();//UncaughtSyntaxError:Invalidorunexpectedtoken ..toString();//第二个点号可以正常解析 .toString();//注意点号前面的空格 (2).toString();//2先被计算
对象可计算属性名(仅在ES6中)
varsuffix='name';
varperson={
['first'+suffix]:'Nicholas',
['last'+suffix]:'Zakas'
}
person['firstname'];//"Nicholas"
person['lastname'];//"Zakas"
数字四舍五入
//v:值，p:精度
function(v,p){
p=Math.pow(10,p>>>31?0:p|0)
v*=p;
return(v+0.5+(v>>31)|0)/p
}
round(123.45353,2);//123.45
在浏览器中根据url下载文件
functiondownload(url){
varisChrome=navigator.userAgent.toLowerCase().indexOf('chrome')>-1;
varisSafari=navigator.userAgent.toLowerCase().indexOf('safari')>-1;
if(isChrome||isSafari){
varlink=document.createElement('a');
link.href=url;
if(link.download!==undefined){
varfileName=url.substring(url.lastIndexOf('/')+1,url.length);
link.download=fileName;
}
if(document.createEvent){
vare=document.createEvent('MouseEvents');
e.initEvent('click',true,true);
link.dispatchEvent(e);
returntrue;
}
}
if(url.indexOf('?')===-1){
url+='?download';
}
window.open(url,'_self');
returntrue;
}
快速生成UUID
functionuuid(){
vard=newDate().getTime();
varuuid='xxxxxxxxxxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){
varr=(d+Math.random()*16)%16|0;
d=Math.floor(d/16);
return(c=='x'?r:(r&0x3|0x8)).toString(16);
});
returnuuid;
};
uuid();//"33f7f26656cb-499b-b73e-89a921a59ba6"
JavaScript浮点数精度问题
functionisEqual(n1,n2,epsilon){
epsilon=epsilon==undefined?10:epsilon;//默认精度为10
returnn1.toFixed(epsilon)===n2.toFixed(epsilon);
}
0.1+0.2;//0.30000000000000004
isEqual(0.1+0.2,0.3);//true
0.7+0.1+99.1+0.1;//99.99999999999999
isEqual(0.7+0.1+99.1+0.1,100);//true
格式化表单数据
functionformatParam(obj){
varquery='',name,value,fullSubName,subName,subValue,innerObj,i;
for(nameinobj){
value=obj[name];
if(valueinstanceofArray){
for(i=0;i
创建指定长度非空数组
在JavaScript中可以通过newArray(3)的形式创建一个长度为3的空数组。在老的Chrome中其值为[undefinedx3]，在最新的Chrome中为[emptyx3]，即空单元数组。在老Chrome中，相当于显示使用[undefined,undefined,undefined]的方式创建长度为3的数组。
但是，两者在调用map()方法的结果是明显不同的
vara=newArray(3);
varb=[undefined,undefined,undefined];
a.map((v,i)=>i);//[empty×3]
b.map((v,i)=>i);//[0,1,2]
多数情况我们期望创建的是包含undefined值的指定长度的空数组，可以通过下面这种方法来达到目的：
vara=Array.apply(null,{length:3});
a;//[undefined,undefined,undefined]
a.map((v,i)=>i);//[0,1,2]
总之，尽量不要创建和使用空单元数组。
以上所述是小编给大家介绍的JavaScript有用的代码片段和trick，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。