【前端词典】4 个实用有趣的 JS 特性
前言
最近在学习的过程中发现了我之前未曾了解过的一些特性,发现有些很有趣并且在处理一些问题的时候可以给我一个新的思路。
这里我将这些特性介绍给大家。
4 个有趣的 JS 特性
利用 a 标签解析 URL
有的时候我们需要从一个 URL 中提取域名,查询关键字,变量参数值等,一般我们会自己去解析 URL 来获取这些内容。可是你或许不知道还有更简单的方法。
即创建一个 a 标签将需要解析的 URL 赋值给 a 的 href 属性,然后我们就能很方便的拿到这些内容。代码如下:
function parseURL(url) { var a = document.createElement('a'); a.href = url; return { host: a.hostname, port: a.port, query: a.search, params: (function(){ var ret = {}, seg = a.search.replace(/^?/,'').split('&'), len = seg.length, i = 0, s; for (;i<len;i++) { if (!seg[i]) { continue; } s = seg[i].split('='); ret[s[0]] = s[1]; } return ret; })(), hash: a.hash.replace('#','') };}
标记语句(label)
有的时候我们会写双重 for
循环做一些数据处理,我们有的时候希望满足条件的时候就直接跳出循环。以免浪费不必要资源。
这个时候我们就可以用 label
和 continue/break
配合使用:
firstLoop: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (i === j) { continue firstLoop; // 继续 firstLoop 循环 // break firstLoop; // 中止 firstLoop 循环 } console.log(`i = ${i}, j = ${j}`); }}// 输出i = 1, j = 0i = 2, j = 0i = 2, j = 1
for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (i === j) { continue } console.log(`i = ${i}, j = ${j}`); }}// 输出i = 0, j = 1i = 0, j = 2i = 1, j = 0i = 1, j = 2i = 2, j = 0i = 2, j = 1
相信你从上面两段代码的输出可以对标记语句有一个了解。
void 运算符
void 运算符对给定的表达式进行求值,然后返回 undefined。
由于 void
会忽略操作数的值,因此在操作数具有副作用的时候使用 void
会更加合理。
使用 void 替换 undefined
由于 undefined
并不是 JavaScript
的关键字,所以我们在赋值某个变量为 undefined
时可能会有点意想不到的结果。
function t(){ var undefined = 10; console.log(undefined);}console.log(t()); // 所有浏览器下都是10
如上代码我们可能希望赋值为 undefined
,但却得到了 10
这个莫名其妙的情况。所以我们可以使用使用 void
替换 undefined
。
这也是为什么我们在很多源码中都能看到使用
void
替换undefined
。
IntersectionObserver 是什么?
IntersectionObserver 可以用来监听元素是否进入了设备的可视区域之内,而不需要频繁的计算来做这个判断。
所以我们可以用这个特性来处理曝光埋点,而不是用 getBoundingClientRect().top
这种更加损耗性能的方式来处理。
当然你也可以用这个 API 来优化滚动吸顶,代码如下:
IntersectionObserverFun: function() { let self = this; let ele = self.$refs.pride_tab_fixed; if( !IntersectionObserver ){ let observer = new IntersectionObserver(function(){ let offsetTop = ele.getBoundingClientRect().top; self.titleFixed = offsetTop < 0; }, { threshold: [1] }); observer.observe(document.getElementsByClassName('title_box')[0]); } else { window.addEventListener('scroll', _.throttle(function(){ let offsetTop = ele.getBoundingClientRect().top; self.titleFixed = offsetTop < 0; }, 50)); }},
希望这 4 个特性可以对你有所帮助,然后点个赞在走呗。
- 利用Geneva开发SOA的安全模型
- STOMP协议介绍
- ADO.NET实体框架连接串引发的异常:Unable to load the specified metadata resource
- Mono产品生命周期
- WordPress免插件仅代码实现文章归档模板 II
- Paket 介绍
- C语言学不会,编程能力无法提升?你的问题我来解决!
- 实现WCF和Unity 的集成
- Qt中纯C++项目发布为dll的方法(超详细步骤)
- .NET的Actor模型:Orleans
- UML:类图复习-鸡生蛋,蛋生鸡
- DotNet多个程序集合并工具
- Spring官网下载dist.zip的几种方法
- Spring Security笔记:HTTP Basic 认证
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 相对路径问题:“No such file or directory“
- 基于etcd服务发现的overlay跨多宿主机容器网络
- Go语言(十六) 日志项目升级
- PyQt5 技术篇-设置窗口相对桌面位置,按屏幕比例
- Go语言(十五) 反射
- SpringBoot应用跨域访问解决方案
- Spring Boot 2.2都有哪些新变化
- Go语言(十四)日志项目
- 如何在Spring Boot中使用Cookies
- 在SpringBoot中使用flyway管理数据库版本状态
- 使用Spring Data JPA进行数据分页与排序
- 搭建一个高可用负载均衡的集群架构(第二部分)
- 在PyTorch中使用Seq2Seq构建的神经机器翻译模型
- 理解 ECMAScript 规范(1)
- 使用 NodeJS 实现 JWT 原理