前言
最近在學(xué)習(xí)的過(guò)程中發(fā)現(xiàn)了我之前未曾了解過(guò)的一些特性恰矩，發(fā)現(xiàn)有些很有趣并且在處理一些問(wèn)題的時(shí)候可以給我一個(gè)新的思路疑苫。
這里我將這些特性介紹給大家。
4 個(gè)有趣的 JS 特性
利用 a 標(biāo)簽解析 URL
有的時(shí)候我們需要從一個(gè) URL 中提取域名，查詢(xún)關(guān)鍵字柑蛇，變量參數(shù)值等弊琴，一般我們會(huì)自己去解析 URL 來(lái)獲取這些內(nèi)容兆龙。可是你或許不知道還有更簡(jiǎn)單的方法敲董。
即創(chuàng)建一個(gè) a 標(biāo)簽將需要解析的 URL 賦值給 a 的 href 屬性紫皇，然后我們就能很方便的拿到這些內(nèi)容慰安。代碼如下：
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('#','')
};
}
標(biāo)記語(yǔ)句（label）
有的時(shí)候我們會(huì)寫(xiě)雙重 for 循環(huán)做一些數(shù)據(jù)處理，我們有的時(shí)候希望滿(mǎn)足條件的時(shí)候就直接跳出循環(huán)坝橡。以免浪費(fèi)不必要資源泻帮。
這個(gè)時(shí)候我們就可以用 label 和 continue/break 配合使用:
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (i === j) {
continue firstLoop; // 繼續(xù) firstLoop 循環(huán)
// break firstLoop; // 中止 firstLoop 循環(huán)
}
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
相信你從上面兩段代碼的輸出可以對(duì)標(biāo)記語(yǔ)句有一個(gè)了解。
void 運(yùn)算符
void 運(yùn)算符對(duì)給定的表達(dá)式進(jìn)行求值计寇，然后返回 undefined锣杂。
由于 void 會(huì)忽略操作數(shù)的值，因此在操作數(shù)具有副作用的時(shí)候使用 void 會(huì)更加合理番宁。
使用 void 替換 undefined
由于 undefined 并不是 JavaScript 的關(guān)鍵字元莫，所以我們?cè)谫x值某個(gè)變量為 undefined 時(shí)可能會(huì)有點(diǎn)意想不到的結(jié)果。
var undefined = 10;
console.log(undefined);
}
console.log(t()); // 大多數(shù)瀏覽器下都是10
如上代碼我們可能希望賦值為 undefined蝶押，但卻得到了 10 這個(gè)莫名其妙的情況踱蠢。所以我們可以使用使用 void 替換 undefined。
這也是為什么我們?cè)诤芏嘣创a中都能看到使用 void 替換 undefined棋电。
IntersectionObserver 是什么茎截？
IntersectionObserver 可以用來(lái)監(jiān)聽(tīng)元素是否進(jìn)入了設(shè)備的可視區(qū)域之內(nèi)，而不需要頻繁的計(jì)算來(lái)做這個(gè)判斷赶盔。
所以我們可以用這個(gè)特性來(lái)處理曝光埋點(diǎn)企锌，而不是用 getBoundingClientRect().top 這種更加損耗性能的方式來(lái)處理。
當(dāng)然你也可以用這個(gè) API 來(lái)優(yōu)化滾動(dòng)吸頂,代碼如下：
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 個(gè)特性可以對(duì)你有所幫助于未，然后點(diǎn)個(gè)贊在走唄撕攒。
