1、生成隨機(jī)字符串

利用Math.random和toString生成隨機(jī)字符串，來(lái)自前一陣子看到的一篇博文。這里的技巧是利用了toString方法可以接收一個(gè)基數(shù)作為參數(shù)的原理，這個(gè)基數(shù)從2到36封頂。如果不指定，默認(rèn)基數(shù)是10進(jìn)制。略屌！

function?generateRandomAlphaNum(len)?{?var?rdmString?=?"";?for?(;?rdmString.length?<?len;?rdmString?+=?Math.random().toString(36).substr(2));?return?rdmString.substr(0,?len);?}

2、整數(shù)的操作

JavaScript中是沒(méi)有整型概念的，但利用好位操作符可以輕松處理，同時(shí)獲得效率上的提升。

|0和~~是很好的一個(gè)例子，使用這兩者可以將浮點(diǎn)轉(zhuǎn)成整型且效率方面要比同類的parseInt,Math.round 要快。在處理像素及動(dòng)畫(huà)位移等效果的時(shí)候會(huì)很有用。性能比較見(jiàn)此。

var?foo?=?(12.4?/?4.13)?|?0;//結(jié)果為3?var?bar?=?~~(12.4?/?4.13);//結(jié)果為3

順便說(shuō)句，!!將一個(gè)值方便快速轉(zhuǎn)化為布爾值 !!window===true 。

3、重寫(xiě)原生瀏覽器方法以實(shí)現(xiàn)新功能

下載的代碼通過(guò)重寫(xiě)瀏覽器的alert讓它可以記錄彈窗的次數(shù)。

(function()?{?var?oldAlert?=?window.alert,?count?=?0;?window.alert?=?function(a)?{?count++;?oldAlert(a?+?"\n You've called alert "?+?count?+?" times now. Stop, it's evil!");?};?})();?alert("Hello World");

4、關(guān)于console的惡作劇

關(guān)于重寫(xiě)原生方法，這里有個(gè)惡作劇大家可以拿去尋開(kāi)心。Chrome的console.log是支持對(duì)文字添加樣式的，甚至log圖片都可以。于是可以重寫(xiě)掉默認(rèn)的log方法，把將要log的文字應(yīng)用到CSS的模糊效果，這樣當(dāng)有人試圖調(diào)用console.log()的時(shí)候，出來(lái)的是模糊不清的文字。好冷，我表示沒(méi)有笑。

是從這篇G+帖子的評(píng)論里看到的。使用之后的效果是再次調(diào)用log會(huì)輸出字跡模糊不清的文字。

var?_log?=?console.log;?console.log?=?function()?{?_log.call(console,?'%c'?+?[].slice.call(arguments).join(' '),?'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');?};

5、不聲明第三個(gè)變量的值交換

我們都知道交換兩個(gè)變量值的常規(guī)做法，那就是聲明一個(gè)中間變量來(lái)暫存。但鮮有人去挑戰(zhàn)不聲明中間變量的情況，下面的代碼給出了這種實(shí)現(xiàn)。蠻有創(chuàng)意 的。

var?a=1,b=2;a=[b,b=a][0];

6、JS中萬(wàn)物皆對(duì)象

在JavaScript的世界，萬(wàn)物皆對(duì)象。除了null和undefined，其他基本類型數(shù)字，字符串和布爾值都有對(duì)應(yīng)有包裝對(duì)象。對(duì)象的一個(gè)特征是你可以在它身上直接調(diào)用方法。對(duì)于數(shù)字基本類型，當(dāng)試圖在其身上調(diào)用toString方法會(huì)失敗，但用括號(hào)括起來(lái)后再調(diào)用就不會(huì)失敗了，內(nèi)部實(shí)現(xiàn)是使用相應(yīng)的包裝對(duì)象將基本類型轉(zhuǎn)為對(duì)象。所以(1).toString()相當(dāng)于new Number(1).toString()。因此，你的確可以把基本類型數(shù)字，字符串，布爾等當(dāng)對(duì)象使用的，只是注意語(yǔ)法要得體。

同時(shí)我們注意到，JavaScript中數(shù)字是不分浮點(diǎn)和整形的，所有數(shù)字其實(shí)均是浮點(diǎn)類型，只是把小數(shù)點(diǎn)省略了而已，比如你看到的1可以寫(xiě)成1.，這也就是為什么當(dāng)你試圖1.toString()時(shí)會(huì)報(bào)錯(cuò)，所以正確的寫(xiě)法應(yīng)該是這樣：1..toString()，或者如上面所述加上括號(hào)，這里括號(hào)的作用是糾正JS解析器，不要把1后面的點(diǎn)當(dāng)成小數(shù)點(diǎn)。內(nèi)部實(shí)現(xiàn)如上面所述，是將1.用包裝對(duì)象轉(zhuǎn)成對(duì)象再調(diào)用方法。

7、If語(yǔ)句的變形

當(dāng)你需要寫(xiě)一個(gè)if語(yǔ)句的時(shí)候，不妨嘗試另一種更簡(jiǎn)便的方法，用JavaScript中的邏輯操作符來(lái)代替。

var?day=(new?Date).getDay()===0;?//傳統(tǒng)if語(yǔ)?

if?(day)?{?alert('Today is Sunday!');?};?//運(yùn)用邏輯與代替if?day&&alert('Today is Sunday!');

比如上面的代碼，首先得到今天的日期，如果是星期天，則彈窗，否則什么也不做。我們知道邏輯操作存在短路的情況，對(duì)于邏輯與表達(dá)式，只有兩者都真才結(jié)果才為真，如果前面的day變量被判斷為假了，那么對(duì)于整個(gè)與表達(dá)式來(lái)說(shuō)結(jié)果就是假，所以就不會(huì)繼續(xù)去執(zhí)行后面的alert了，如果前面day為真，則還要繼續(xù)執(zhí)行后面的代碼來(lái)確定整個(gè)表達(dá)式的真假。利用這點(diǎn)達(dá)到了if的效果。

對(duì)于傳統(tǒng)的if語(yǔ)句，如果執(zhí)行體代碼超過(guò)了1 條語(yǔ)句，則需要加花括號(hào)，而利用逗號(hào)表達(dá)式，可以執(zhí)行任意條代碼而不用加花括號(hào)。

if(conditoin)?alert(1),alert(2),console.log(3);

上面if語(yǔ)句中，如果條件成立則執(zhí)行三個(gè)操作，但我們不需要用花括號(hào)將這三句代碼括起來(lái)。當(dāng)然，這是不推薦的，這里是冷知識(shí)課堂:)

8、禁止別人以iframe加載你的頁(yè)面

下面的代碼已經(jīng)不言自明了，沒(méi)什么好多說(shuō)的。

if?(window.location?!=?window.parent.location)?window.parent.location?=?window.location;

9、console.table

Chrome專屬，IE繞道的console方法?？梢詫avaScript關(guān)聯(lián)數(shù)組以表格形式輸出到瀏覽器console，效果很驚贊，界面很美觀。

//采購(gòu)情況?var?data?=?[{'品名':?'杜雷斯',?'數(shù)量':?4},?{'品名':?'岡本',?'數(shù)量':?3}];?console.table(

文章推薦程序員效率：畫(huà)流程圖常用的工具程序員效率：整理常用的在線筆記軟件遠(yuǎn)程辦公：常用的遠(yuǎn)程協(xié)助軟件，你都知道嗎？51單片機(jī)程序下載、ISP及串口基礎(chǔ)知識(shí)硬件：斷路器、接觸器、繼電器基礎(chǔ)知識(shí)

總結(jié)

以上是生活随笔為你收集整理的盘点9个你可能不会用的JS技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。