今天筆者整理了一份自己最近用到的一些小技巧分享給大家，雖然都是基礎(chǔ)技術(shù)，不過在某些特殊時(shí)刻還蠻有用的，不至于加載一堆體積龐大的第三方庫(kù)。今天筆者用本文歸納一下分享給大家。本篇文章主要包含以下內(nèi)容：
- 產(chǎn)生隨機(jī)不重復(fù)ID
- 模板標(biāo)簽替換
- 字符串與xml的互轉(zhuǎn)
- 快速取整數(shù)
本篇文章預(yù)計(jì)時(shí)間3分鐘
產(chǎn)生隨機(jī)不重復(fù)ID
有時(shí)候在沒有第三方類庫(kù)的情況下，我們希望希望產(chǎn)生隨機(jī)且不重復(fù)的ID，這時(shí)我會(huì)使用「隨機(jī)數(shù)」搭配「時(shí)間戳」的方式，首先使用Math.random()產(chǎn)生0～1之間約16～17位數(shù)的隨機(jī)浮點(diǎn)數(shù)，再通過toString(36)的方法縮短其位數(shù)，并轉(zhuǎn)換為36進(jìn)位( 0～9、a～z )，若嫌太長(zhǎng)還可用substr方法進(jìn)行自行截取。
Math.random().toString(36).substr(2,n); // 截取小數(shù)點(diǎn)后的部分，n在實(shí)際應(yīng)用中修改成你需要的位數(shù)
第二步使用Date.now()取得目前的毫秒數(shù)，總共有13位數(shù)，和上個(gè)方法一樣我們通過toString(36)的方法縮短其位數(shù)，并轉(zhuǎn)換為36進(jìn)位，接著用substr自行截取需要的位數(shù)。
Date.now().toString(36).substr(4,n); //由于前幾位固定，我們從第5位開始進(jìn)去截取獲取隨機(jī)數(shù)，n在實(shí)際應(yīng)用中修改成你需要的位數(shù)
將隨機(jī)數(shù)的片段和時(shí)間戳的片段進(jìn)行組合，就能產(chǎn)生一個(gè)隨機(jī)不重復(fù)的id 。( 應(yīng)該說重復(fù)機(jī)率低到不可能重復(fù)，如果你遇到重復(fù)的，恭喜你，建議你今天買彩票 )
Math.random().toString(36).substr(2,n) + Date.now().toString(36).substr(4,n);
模板標(biāo)簽替換
開發(fā)過程中有時(shí)會(huì)遇到要取出一段文字中的某些值，如果單純只是要「替換成別的值」，使用replace()的方法就能輕松實(shí)現(xiàn)，對(duì)以下這段字符串來說，里面有幾個(gè)利用{{}}包覆的標(biāo)簽需要你替換，你會(huì)怎么做呢:
大家好，我的公眾號(hào)是{{name}}，今年{{age}}歲了，創(chuàng)建于{{year}}年，歡迎你的關(guān)注
如果想要把所有「{{}}」兩個(gè)大括號(hào)內(nèi)的字替換成對(duì)應(yīng)的值，可以通過以下的方式進(jìn)行處理，核心的內(nèi)容就是replace()方法里的正規(guī)表達(dá)式/{{(.*?)}}/g,/{|}/g：
const text = '大家好，我的公眾號(hào)是{{name}}，今年{{age}}歲了，創(chuàng)建于{{year}}年，歡迎你的關(guān)注’;
const obj = {
name: '前端達(dá)人',
age: 5,
year: 2014
};
const result = text.replace(/{{(.*?)}}/g, e => {
return obj[e.replace(/{|}/g,'')];
});
得到的結(jié)果就會(huì)是：「大家好，我的公眾號(hào)是前端達(dá)人，今年5歲了，創(chuàng)建于2014年，歡迎你的關(guān)注」。
String 轉(zhuǎn) XML、XML 轉(zhuǎn) String
在JAVAScript里如果直接讀取XML，得到的會(huì)是一些XML節(jié)點(diǎn)構(gòu)成的對(duì)象，如果要使用像是replace()..等字串的操作就必須轉(zhuǎn)換成字串String才行，下方程式可以很簡(jiǎn)單的將XML轉(zhuǎn)換成字串String，處理之后再轉(zhuǎn)回XML。（注：ie需要特殊處理，感興趣的可以去百度搜索）
XML轉(zhuǎn)字串String
xmlToString = (new XMLSerializer()).serializeToString(xmlObject);
字串String轉(zhuǎn)XML
stringToXML = (new DOMParser()).parseFromString(xmlString, "text/xml");
快速取整數(shù)
在JavaScript中取整數(shù)，最常見的不外乎就是Math.round()四舍五入、Math.floor()返回小于等于給定數(shù)字的最大整數(shù)和 Math.ceil()函數(shù)返回大于或等于一個(gè)給定數(shù)字的最小整數(shù)（無(wú)條件進(jìn)位）三種方法，不過如果通過兩個(gè)「按位取反兩次」~~(兩個(gè)蚯蚓符號(hào))，也可以做到無(wú)條件舍去小數(shù)點(diǎn)的效果，這也是最快可以取整數(shù)的方法，下方的代碼會(huì)先取得一個(gè)0～100的隨機(jī)數(shù)，然后取出整數(shù)的部分。
const num = Math.random() * 100; console.log(num); // 輸出原本的隨機(jī)數(shù) console.log(~~num); // 無(wú)條件舍去小數(shù)部分，類似Math.floor()
~是按位取反運(yùn)算，~~是取反兩次。在這里~~的作用是去掉小數(shù)部分，因?yàn)槲贿\(yùn)算的操作值要求是整數(shù)，其結(jié)果也是整數(shù)，所以經(jīng)過位運(yùn)算的都會(huì)自動(dòng)變成整數(shù)。與Math.floor()不同的是，它只是單純的去掉小數(shù)部分，不論正負(fù)都不會(huì)改變整數(shù)部分。
小節(jié)
今天JS小技巧的分享就到這里，希望能在工作中對(duì)你有所幫助，建議大家整理梳理自己日常工作中會(huì)用到的小方法和小技巧，維護(hù)到自己的方法類庫(kù)里，到時(shí)用的時(shí)候會(huì)事半功倍。在接下來的文章里，筆者會(huì)持續(xù)關(guān)注這方面的內(nèi)容，將會(huì)整理成文章分享到這個(gè)系列里，歡迎你持續(xù)關(guān)注與訂閱。
