唯品秀前端博客

作为前端人员,我们平时肯定是离不开javascript的,但是,你真的熟悉javascript?记录下一些js有趣的小技巧

一、定时器

首当其冲就是定时器了,你可能说定时器我经常用啊,没有我不会的。甚至有熟手看到标题就想到,我知道了,你肯定要说定时器使用之前先要清除定时器再执行新的定时器。NO、NO、NO,下面一段代码告诉你,你不知道的定时器。大家用过定时器的应该都知道,平时我们使用定时器只传进去两个参数,一个是function,一个是触发的时间,那么你可曾想过第三个第N个参数又是怎么耍?

1
2
3
setInterval(function(a){
   console.log(a)
},500,100)
1
//结果控制台打印出来是100

二、字符串拼接

1
document.body.innerHTML = '<div>div<div><span>span</span>';

这样好像也没什么问题,如果内容比较多呢?想折行显示怎么办?大家通常是不是用+号进行拼接,那么现在介绍告诉你个小技巧,你可能又说我知道,ES6最新出来的字符串模板拼接``,傻X,就你知道我不知道啊,咱们来点我知道你未必知道的OK?

1
2
3
4
document.body.innerHTML =
  '<div>div<div>\
  <em>em<em>\
  <span>span</span>'
;

三、console.log

看到这里你应该不敢说你又知道了,平时我们用console.og主要用于调试,其实我们还可以通过console.log在控制台打印出花样文字、样式、甚至图片,例如进入我博客首页,打开F12瞅瞅

1
2
3
4
5
console.log( "
\n %c 唯品秀个人博客 %c  © Jun Li  http://weipxiu.com \n\n"
,
"color:#FFFFFB;background:#1abc9c;padding:5px 0;border-radius:.5rem 0 0 .5rem;",
"color:#FFFFFB;background:#080808;padding:5px 0;border-radius:0 .5rem .5rem 0;"
);

四、for循环

1
2
3
4
5
6
7
for(var i = 0;i<5;i++){
    for(var j = 0; j<1; j++){
        if(i==3){
            break
        }
    }
}
1
//结果:0,1,2,4,3确实没跳出来,但是4跳出来了,这说明break只会阻断当前循环,并不会阻断整个嵌套循环
1
2
3
4
5
6
7
a : for(var i = 0;i<5;i++){
    for(var j = 0; j<1; j++){
        if(i==3){
            break a
        }
    }
}
1
//结果:0,1,2

五、匿名函数自执行

1
2
3
(function(){
alert(1)
})()

这段代码应该不陌生,在很多插件源码都喜欢这么玩,但是你知道吗,类似这种写法还有很多

1
2
3
!function(){ //通过位运算符~、!、+等等都可以
alert(1)
}()

六、数字转千分位

语法如下:

1
Number.toLocaleString('en-US'); //数字Number类型外面必须()起来,浮点数不用

举例:

1
2
3
(123456789).toLocaleString('en-US');  // 123,456,789
20191026.15445.toLocaleString(’en-US‘)  // 20191026.154(小数部分四舍五入了,默认返回3位小数)
20191026.15445.toLocaleString('en-US',{minimumFractionDigits:5}) // 20,191,026.15445 设置minimumFractionDigits参数可以指定小数位数,但最少3位,设置3位小数以下无效

对于中文场景下,toLocaleString('en-US')中的'en-US'理论上是可以缺省的,也就是直接(123456789).toLocaleString()也是可以得到123,456,789。但是如果你的产品可能海外用户使用,则保险起见,还是保留'en-US'。

七、filter剔除为空项

1
2
[1,2,0,-1,null,undefined,10,'12.2'].filter(Boolean);
// [1, 2, -1, 10, '12.2']
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(7) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"你不知道的javascript – 看完怀疑自己是个假前端"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏