关于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 /

posted @   停不下的风  阅读(931)  评论(3编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示