【前端词典】4 个实用有趣的 JS 特性
前言
最近在学习的过程中发现了我之前未曾了解过的一些特性,发现有些很有趣并且在处理一些问题的时候可以给我一个新的思路。
这里我将这些特性介绍给大家。
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 特性的更多相关文章
- 前端架构之路:使用Vue.js开始第一个项目
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...
- web前端关于html转义符的常用js函数
web前端关于html转义符的常用js函数 //去掉html标签 function removeHtmlTab(tab) { return tab.replace(/<[^<>]+? ...
- legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变))
legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变)) 一.总结 一句话总结:php给元素初始状态,js根据这个状态做初始化和后续变化,使用vue真的很方便( ...
- 实用的 Node.js 教程,工具和资源
这里分享一批实用的实用的 Node.js 教程,工具和资源. Node.js是一个建立在Chrome之上的JavaScript运行时平台,可方便地构建快速,可扩展的网络应用程序.Node.js使用事件 ...
- 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制
[原创]分布式之数据库和缓存双写一致性方案解析(三) 正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...
- 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app
大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...
- 一个有趣的js隐式转换的问题
一个有趣的js隐式转换的问题 在chrome的控制台中打印一下表达式 [] + {} //结果为 [object object] 然后调整顺序打印 {} + [] //结果为 0 然后将两个表达式组合 ...
- 前端开发者不得不知的ES6十大特性
前端开发者不得不知的ES6十大特性 转载 作者:AlloyTeam 链接:http://www.alloyteam.com/2016/03/es6-front-end-developers-will- ...
- 【前端词典】这些功能其实不需要 JS,CSS 就能搞定
前言 今天我们大家介绍一些你可能乍一眼以为一定需要 JavaScript 才能完成的功能,其实 CSS 就能完成,甚至更加简单. 内容已经发布在 gitHub 了,欢迎围观 Star,更多文章都在 g ...
随机推荐
- MySQL5.7初始化后5种密码重置方法
前言:由于好几次安装MySQL5.7后一直被重置密码所困扰,因此特意整理重置的方法 安装MySQL5.7 [root@node1 db]# ll 以下的rpm安装包可以随处下载 total 40235 ...
- 6.Sentinel源码分析—Sentinel是如何动态加载配置限流的?
Sentinel源码解析系列: 1.Sentinel源码分析-FlowRuleManager加载规则做了什么? 2. Sentinel源码分析-Sentinel是如何进行流量统计的? 3. Senti ...
- 使用 Nginx 部署前后端分离项目,解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
- Vue学习之todolist删除功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【面试】我是如何在面试别人Redis相关知识时“软怼”他的
事出有因 Redis是一个分布式NoSQL数据库,因其数据都存储在内存中,所以访问速度极快,因此几乎所有公司都拿它做缓存使用,所以Redis常被称为分布式缓存. 一次我的一个同事让我帮他看Redis相 ...
- Java 从入门到进阶之路(六)
之前的文章我们介绍了 Java 的数组,本章我们来看一下 Java 的对象和类. Java 是一种面向对象语言,那什么是对象呢,对象在编程语言中属于一个很宽泛的概念,我们可以认为万事万物都是对象,每个 ...
- 第一次登陆jenkins页面空白解决方案
之前搭建了几次jenkins环境都没问题,最近换了工作,再次搭建jenkins用的是docker部署: https://www.cnblogs.com/yy-cola/p/10457484.html ...
- JIRA集成GitHub
原因: 作为管理员, 为用户提高效率的角度,配置测试此服务.让用户从JIRA内看到代码分支,提交信息,pull requests等等, 让Github的代码提交记录和JIRA的任务管理系统集成在一起, ...
- Python实战练习_贪吃蛇 (pygame的初次使用)
正如标题所写的那样,我将一步步的完成本次实战练习——贪吃蛇.废话不多说,感兴趣的伙伴可以一同挑战一下. 首先说明本次实战中我的配备: 开发环境:python 3.7: 开发工具:pycharm2019 ...
- Redis-->Ubutn上的安装教程
Redis 安装 当前redis最新稳定版本是4.0.9 以下步骤可以跳过 最新稳定版本下载链接:http://download.redis.io/releases/redis-4.0.9.tar.g ...