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

【前端词典】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 循环做一些数据处理,我们有的时候希望满足条件的时候就直接跳出循环。以免浪费不必要资源。

这个时候我们就可以用 labelcontinue/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 个特性可以对你有所帮助,然后点个赞在走呗。

本文分享自微信公众号 - 小生方勤(XSFQ_HSD),作者:小生方勤

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端词典】必备知识-原型与原型链

    继承是我们前端必须熟悉的一个知识点。可依旧有很多前端对继承的实现和应用没有一个整体的把握。追其原因无非有二:

    小生方勤
  • chrome 开发者工具的 11 个骚技巧

    对于每个前端从业者来说,除了 F5 键之外,用的最多的另外一个键就是 F12 了。

    小生方勤
  • 10 种 JavaScript 最常见的错误

    查看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 ...

    小生方勤
  • python判断成绩给等级

    py3study
  • JS中3种风格的For循环有什么异同?

    在学习任何开发语言时候,for循环是必不可少的一种语法,可能所有开发人员都会使用它。它非常经典,以至于每个开发语言都至少包括一种关于循环的语法版本。不过,在Ja...

    葡萄城控件
  • 恶意IP远程登录Linux服务器脚本

    程序员同行者
  • ​使用nfpm制作rpm包

    NFPM is Not FPM - a simple deb and rpm packager written in Go

    追马
  • jquery - 页面弹框 - 阻止事件冒泡示例

    好了,下一步就是设置.pop_con隐藏,设置display:none,然后编写jquery,设置点击按钮#btn ,触发click()事件的时候,设置.pop...

    Devops海洋的渔夫
  • 什么是Robots协议,标准写法是什么

    沈唁
  • go监控方案(1) -- 概述

    在编写应用程序的时候,通常会记录日志以便事后分析,在很多情况下是产生了问题之后,再去查看日志,是一种事后的静态分析。 在很多时候,我们可能需要了解整个系统在当前...

    solate

扫码关注云+社区

领取腾讯云代金券