码农的世界Web前端之路互联网科技

【前端词典】4 个实用有趣的 JS 特性

2019-07-03  本文已影响30人  前端项目部

前言

最近在学习的过程中发现了我之前未曾了解过的一些特性,发现有些很有趣并且在处理一些问题的时候可以给我一个新的思路。

这里我将这些特性介绍给大家。

4 个有趣的 JS 特性

利用 a 标签解析 URL

有的时候我们需要从一个 URL 中提取域名,查询关键字,变量参数值等,一般我们会自己去解析 URL 来获取这些内容。可是你或许不知道还有更简单的方法。

即创建一个 a 标签将需要解析的 URL 赋值给 a 的 href 属性,然后我们就能很方便的拿到这些内容。代码如下:

标记语句(label)

有的时候我们会写双重 for 循环做一些数据处理,我们有的时候希望满足条件的时候就直接跳出循环。以免浪费不必要资源。

这个时候我们就可以用 label 和 continue/break 配合使用:

相信你从上面两段代码的输出可以对标记语句有一个了解。

void 运算符

void 运算符对给定的表达式进行求值,然后返回 undefined。

由于void会忽略操作数的值,因此在操作数具有副作用的时候使用void会更加合理。

使用 void 替换 undefined

由于undefined并不是JavaScript的关键字,所以我们在赋值某个变量为undefined时可能会有点意想不到的结果。

如上代码我们可能希望赋值为undefined,但却得到了10这个莫名其妙的情况。所以我们可以使用使用void替换undefined。

这也是为什么我们在很多源码中都能看到使用void替换undefined。

IntersectionObserver 是什么?

IntersectionObserver 可以用来监听元素是否进入了设备的可视区域之内,而不需要频繁的计算来做这个判断。

所以我们可以用这个特性来处理曝光埋点,而不是用getBoundingClientRect().top这种更加损耗性能的方式来处理。

当然你也可以用这个 API 来优化滚动吸顶,代码如下:

希望这 4 个特性可以对你有所帮助,然后点个赞在走呗。

本次给大家推荐一个免费的学习圈,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。获取资料??????对web开发技术感兴趣的同学,欢迎加qun:??四八四????七五七????七六零??,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天解答问题。

上一篇下一篇

猜你喜欢

热点阅读