【前端詞典】4 個實用有趣的 JS 特性

時間 2019-11-06

標籤前端詞典實用有趣特性欄目 JavaScript 简体版

原文原文鏈接

前言

最近在學習的過程當中發現了我以前不曾瞭解過的一些特性，發現有些頗有趣而且在處理一些問題的時候能夠給我一個新的思路。前端

這裏我將這些特性介紹給你們。瀏覽器

4 個有趣的 JS 特性

利用 a 標籤解析 URL

有的時候咱們須要從一個 URL 中提取域名，查詢關鍵字，變量參數值等，通常咱們會本身去解析 URL 來獲取這些內容。但是你或許不知道還有更簡單的方法。bash

即建立一個 a 標籤將須要解析的 URL 賦值給 a 的 href 屬性，而後咱們就能很方便的拿到這些內容。代碼以下：ide

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 循環作一些數據處理，咱們有的時候但願知足條件的時候就直接跳出循環。以避免浪費沒必要要資源。oop

這個時候咱們就能夠用 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 = 0
i = 2, j = 0
i = 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 = 1
i = 0, j = 2
i = 1, j = 0
i = 1, j = 2
i = 2, j = 0
i = 2, j = 1
複製代碼

相信你從上面兩段代碼的輸出能夠對標記語句有一個瞭解。學習

void 運算符

void 運算符對給定的表達式進行求值，而後返回 undefined。優化

因爲 void 會忽略操做數的值，所以在操做數具備反作用的時候使用 void 會更加合理。ui

使用 void 替換 undefined

因爲 undefined 並非 JavaScript 的關鍵字，因此咱們在賦值某個變量爲 undefined 時可能會有點意想不到的結果。this

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));
    }
}, 
複製代碼