你应该需要知道的前端小技巧

心已赠人 2022-11-30 15:57 250阅读 0赞

本文主要收集一些前端开发中我们可能不常用的开发技巧。如果路过的小伙伴有什么实用的小技巧可以再下方留言，我会将你宝贵的小技巧加在本文的后面，供路过的小伙伴们学习。

1、 清除定时器

就这？不是哟，我其实表达的是批量清除定时器，一般我们会在定时器调用的时候将它赋值给一个变量，然后将在需要清除定时器的时候使用 clearTimeout 或者 clearInterval 就可以清除定时器了。那么如果你想批量清除定时器又该如何清除呢？  
其实很简单，小伙伴们在控制台打印一下使用 setTimeout 或者 setInterval 的返回值可能就知道改怎么做了。啥？你没 get 到，好吧，让我细细道来。  
每个定时器调用的时候都会返回一个数字值id，这个id值是递增的，每次你调用定时器后，id值都会加一，如果后面你想清除全局的定制器，你可以再设一个定制器，用它的返回值来个 for 循环即可，代码如下：

![在这里插入图片描述][20200825111219422.png_pic_center]

如果你只想清除特定范围或者特定的几个定时器的话，可以将它们的值传到一个数组里面去，再进行一个 for 循环即可

注：谷歌浏览器的定时器返回数值ID以1为起，fireFox要在原定时器的序位的基础上加1，我试了一下，起始值确实是2。

2、获取当前月份的最后一天  
乍一看，好像挺简单的。但是一般的小伙伴都是一看就会，一用就废，认真想一下感觉好像实现起来有点难，其实就一行代码，挺简单的。

function getFirstDay(year, month) { 
      return new Date(year, month, 0).getDate()
    }

3、获取变量的数据类型  
如何获取变量的数据类型？很常见的问题了，很多同学都会遇到，有挺多靠谱和不靠谱的回答，在这里我找了一种比较靠谱的回答，源码看下面：

function getType(val) { 
      return Object.prototype.toString.call(val).replace(/^\[object (.+)\]$/, '$1')
    }
    在职前端开发，如果你也想学习前端开发技术，可以加入我组建的前端学习交流裙：851 231 348 也可以关注我的微信
    公众号：【前端留学生】自己根据多年来的开发经验总结录制的一套web前端精讲视频和学习方法，
    以及一些前端学习手册，前端面试题，端开发工具，PDF文档书籍教程，无偿分享给大家。需要的话都可以自行来获取下载。

4、 calc的使用  
可能挺多小伙伴都没有听说过calc吧，作为前端专业级的菜鸟，我也是最近才接触到这个，此刻应该来一波 网抑云 。  
calc是一个css3新增的功能，可以用来指定元素的长度，动态计算长度值。写个小案例如下。以下只是小试牛刀，后面你需要自行百度calc的具体使用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]

注：calc在使用的时候需要注意它的运算符，- 和 + 在使用的时候前后都必须要有空格，\* 和 / 倒是没有这个要求

[20200825111219422.png_pic_center]: /images/20221123/32fee0b2a6a14d9d9b5186b0cb7824a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/867612895b5146539fc652bcd632a30b.png