关于JS的几点TIPS
作为前端基本工作每天都会用到JS...但是我们对JS真的都了解吗,或者说有什么tips是我们不知道的呢。。
So..此文关于JS的几点tips.....
一:定时器(可传多个参数)
首先是一个一般的定时器,一般我们使用就用到定时器的2个参数,一个是function函数,一个是时间。
1 2 3 | setTimeout(function(){ //函数 alert(1); },2000) //时间 |
但是其实定时器有很多个参数参数,tips:
1 2 3 | setTimeout(function(num){ //传一个形参 alert(num); },2000,123) //回调参数 |
二:拼接字符串
在工作中经常会遇到拼接字符串的问题,比如我们给一个body元素添加内容:
1 2 3 | window.onload=function(){ document.body.innerHTML='< div >div</ div >< span >span</ span ></ p >p</ p >123'; } |
当这些字符串在一行上的时候,这样添加没有问题,如果我们添加的内容过多需要这行的时候,一般是这样拼接的:
1 2 3 4 5 6 7 | window.onload=function(){ document.body.innerHTML= '< div >div</ div >'+ '< span >span</ span >'+ '</ p >p</ p >'+ '123'; } |
这种普遍方法妥妥的,一定问题都没。
下面是一种也许不那么常用的tips:
1 2 3 4 5 6 7 | window.onload=function(){ document.body.innerHTML= '< div >div</ div >\ //在字符后天加一个反斜杠 < span >span</ span >\ </ p >p</ p >\ 123'; } |
一样,妥妥的,木有一点问题!
三:Console.log()
主要用于打印,调试信息,首先,在调试台输出一个hallo
1 2 3 4 | < script > var a = 'hallo'; console.log(a); </ script > |
OK,没有问题,其实我们不但可以输出一个字符, 还可以输出图像,样式。 我们现在给这个hallo添加样式
1 2 3 4 | < script > var a = 'hallo'; console.log('%c'+a,'font-size:400%;background:blue;color:red;'); </ script > |
挺靠谱~
四:tipeof
这个平时常用,用于检测数据类型的,一般这么用
1 2 | var a = []; alert(typeof a) //用空格连接,弹出object |
还可以这么用
1 2 | var a = []; alert(typeof(a)) //用()连接,弹出object |
五:嵌套for循环
首先定义2个for循环
1 2 3 4 5 6 7 8 | for(var i=0;i<5;i++){ //i循环 for(var j=0;j<1;j++){ //j循环 if(i==3){ break; //没有跳出i循环, 只是跳过了3. } alert(i); } } |
有时候我们需要跳出整个大的循环,so
1 2 3 4 5 6 7 8 | a:for(var i=0;i<5;i++){ //给循环一个名称 for(var j=0;j<1;j++){ if(i==3){ break a; //跳出这个循环 } alert(i); } } |
六:for循环
1.最常用
1 2 3 | for(var i=0;i<5;i++){ //3个值 alert(i) } |
2.也常用
1 2 3 4 | var i = 0; //外部定义i for(;i<5;i++){ //2个值 alert(i) } |
3.不常用
1 2 3 4 5 6 7 | var i = 0; for(;;){ //0个值 alert(i) if(++i>=5){ //需if判断,不然死循环 break; } } |
七:call
1 2 3 4 5 6 7 | var obj = { a : function(){ alert(this) } } var arr = [1,2,3]; obj.a(); //this指向obj |
如果要使this指向arr,只需call(arr)
1 | obj.a.call(arr); |
如果call()里面没有指向,自动指向window。
八:匿名函数自执行
错误写法
1 2 3 | function(){ alert(123); }(); |
正确写法 加(小括号)
1 2 3 | (function(){ alert(123); })(); //自动执行alert(); |
如果不想加小括号又想自执行,可以这样
1 2 3 | !function(){ alert(123); }(); |
加运算符,也是不会报错,不但可以加!,还可以~,或者+ (统统都不报错了)
九:创建对象
一般
1 2 | var arr = new Array(); alert(arr.length); |
其实可以不用对象后面的();
1 2 | var arr = new Array; alert(arr.length); |
其实都是很多很小很小很小的细节方面,写的更少,做的更多,多么愉悦的一件事哈!
最后,细节决定成败! \ 0.0 /
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现