前言

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

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

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这种更加损耗性能的方式来处理。

自己是一个五年的全栈工程师,这里推荐一下我的前端学习交流圈:开始484然后757最后760,里面都是学习前端的,裙子里会不定期更新最新的教程和学习方法,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的web前端党欢迎加入,

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

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

【前端词典】4 个实用有趣的 JS 特性的更多相关文章

  1. 前端架构之路:使用Vue.js开始第一个项目

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...

  2. web前端关于html转义符的常用js函数

    web前端关于html转义符的常用js函数 //去掉html标签 function removeHtmlTab(tab) { return tab.replace(/<[^<>]+? ...

  3. legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变))

    legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变)) 一.总结 一句话总结:php给元素初始状态,js根据这个状态做初始化和后续变化,使用vue真的很方便( ...

  4. 实用的 Node.js 教程,工具和资源

    这里分享一批实用的实用的 Node.js 教程,工具和资源. Node.js是一个建立在Chrome之上的JavaScript运行时平台,可方便地构建快速,可扩展的网络应用程序.Node.js使用事件 ...

  5. 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制

    [原创]分布式之数据库和缓存双写一致性方案解析(三)   正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...

  6. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  7. 一个有趣的js隐式转换的问题

    一个有趣的js隐式转换的问题 在chrome的控制台中打印一下表达式 [] + {} //结果为 [object object] 然后调整顺序打印 {} + [] //结果为 0 然后将两个表达式组合 ...

  8. 前端开发者不得不知的ES6十大特性

    前端开发者不得不知的ES6十大特性 转载 作者:AlloyTeam 链接:http://www.alloyteam.com/2016/03/es6-front-end-developers-will- ...

  9. 【前端词典】这些功能其实不需要 JS,CSS 就能搞定

    前言 今天我们大家介绍一些你可能乍一眼以为一定需要 JavaScript 才能完成的功能,其实 CSS 就能完成,甚至更加简单. 内容已经发布在 gitHub 了,欢迎围观 Star,更多文章都在 g ...

随机推荐

  1. Python网络爬虫实战(三)照片定位与B站弹幕

    之前两篇已经说完了如何爬取网页以及如何解析其中的数据,那么今天我们就可以开始第一次实战了. 这篇实战包含两个内容. * 利用爬虫调用Api来解析照片的拍摄位置 * 利用爬虫爬取Bilibili视频中的 ...

  2. Hessian 接口使用示例总结(转载)

    一.使用hessian接口准备 首先,hessian接口的使用,必须要准备hessian接口的jar包,本文使用的jar包如下:hessian-4.0.7.jar; Hessian接口的使用一般是在两 ...

  3. 译 .NET Core 3.0 发布

    原文:<Announcing .NET Core 3.0> 宣布.NET Core 3.0 发布 很高兴宣布.NET Core 3.0的发布.它包括许多改进,包括添加Windows窗体和W ...

  4. 使用 Eslint & standard 规范前端代码

    前言 JavaScript的动态语言类型,给它带来了独特的魅力,产生了风格多样的开发范式,同时也带来了一些问题,从运行时常见的 undefined .null 报错,到代码随意的加减分号.换行.空格, ...

  5. html使用空格的替代符号

    替代符号就是在需要显示空格的地方加入替代符号,这些符号会被浏览器解释为空格显示. 空格的替代符号有以下几种: 名称 编号 描述     不断行的空白(1个字符宽度)     半个空白(1个字符宽度) ...

  6. Java异常详谈

    什么是异常: 异常(Exception)是程序运行过程中发生的事件,该事件可以中断程序指令的正常执行流程. 注意: 如果实际抛出的异常对象属于Exception的子类对象,而继承自Throwable类 ...

  7. Python学习笔记整理总结【Django】:中间件、CSRF、缓存

     一.中间件  中间件是一类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法:在django项目的settings模块中,有一个 MIDDLEWARE 变量,其中每 ...

  8. ReactNative实现GridView

    ReactNative内置了ListView组件但是没有类似GridView这样的组件.利用一些已经有的属性是可以实现GridView的,利用ContentContainerStyle的属性然后配合样 ...

  9. Java初中级面试笔记及对应视频讲解

    笔试题链接:点击打开链接   密码:提取码:7h9e 视频下载链接: 点击打开链接  提取码:hyye 百万it课程 https://pan.baidu.com/s/1ldJ_Ak7y0VL5Xmy9 ...

  10. 转载:Docker入门只需看这一篇就够了

    最近项目中需要用到 Docker 打包,于是上网查找资料学习了 Docker 的基本命令,记录一下自己遇到的一些错误. 准备开始自己写,结果看到了阮一峰老师的文章,瞬间就没有写下去的动力了,转载大佬的 ...