下面的技巧,后三個(gè),請謹(jǐn)慎用于團(tuán)隊(duì)項(xiàng)目中(主要考慮到可讀性的問題),不然,leader 干你沒商量。
這個(gè)技巧用的很多,也非常的簡單
!!'foo'
通過兩個(gè)取反,可以強(qiáng)制轉(zhuǎn)換為Boolean類型。較為常用。
這個(gè)也特別簡單,String轉(zhuǎn)化為Number
+'45' +new Date
會自動(dòng)轉(zhuǎn)化為number類型的。較為常用。
這個(gè)其實(shí)非常有實(shí)用價(jià)值,不算是裝逼。只是其他語言里沒有這么玩的,給不太了解js的同學(xué)看那可牛逼大了。
(function(arg) { // do something })(arg)
實(shí)用價(jià)值在于可以防止全局污染。不過現(xiàn)在隨著ES2015的普及已經(jīng)沒什么必要用這個(gè)了,我相信五年之后,這種寫法就會逐漸沒落。
自己干五年,在實(shí)習(xí)生面前裝逼用也是蠻不錯(cuò)的嘛~
閉包嘛,js 特別好玩的一個(gè)地方。上面的立即執(zhí)行函數(shù)就是對閉包的一種運(yùn)用。
不了解的回去翻翻書,知乎上也有很多討論,可以去看看。
閉包用起來對初學(xué)者來說簡直就是大牛的標(biāo)志(其實(shí)并不是)。
var counter = function() { var count = 0 return function() { return count++ } }
上面用到了閉包,看起來還挺裝逼的吧。不過好像沒什么實(shí)用價(jià)值。
那么這樣呢?
var isType = function(type) { return function(obj) { return toString.call(obj) == '[Object ' + type + ']'; } }
通過高階函數(shù)很輕松的實(shí)現(xiàn)判定類別。(別忘了有判定Array的Array.isArray())
當(dāng)然,很明顯,這只是基礎(chǔ),并不能更裝逼一點(diǎn)。來看下一節(jié)
事件響應(yīng)前端肯定都寫爛了,一般來說如何寫一個(gè)計(jì)數(shù)器呢?
var times = 0 var foo = document.querySelector('.foo') foo.addEventListener('click', function() { times++ console.log(times) }, false)
好像是沒什么問題哦,但是!變量times為什么放在外面,就用了一次放在外面,命名沖突了怎么辦,或者萬一在外面修改了怎么辦。
這個(gè)時(shí)候這樣一個(gè)事件監(jiān)聽代碼就比較牛逼了
foo.addEventListener('click', (function() { var times = 0 return function() { times++ console.log(times) } })(), false)
怎么樣,是不是立刻感覺不一樣了。瞬間逼格高了起來!
通過創(chuàng)建一個(gè)閉包,把times封裝到里面,然后返回函數(shù)。這個(gè)用法不太常見。
高能預(yù)警
從這里開始,下面的代碼謹(jǐn)慎寫到公司代碼里!
parseInt這個(gè)函數(shù)太普通了,怎么能裝逼。答案是~~
現(xiàn)在摁下F12,在console里復(fù)制粘貼這樣的代碼:
~~3.14159 // => 3 ~~5.678 // => 5
這個(gè)技巧十分裝逼,原理是~是一個(gè)叫做按位非的操作,會返回?cái)?shù)值的反碼。是二進(jìn)制操作。
原因在于JavaScript中的number都是double類型的,在位操作的時(shí)候要轉(zhuǎn)化成int,兩次~就還是原數(shù)。
十六進(jìn)制操作。其實(shí)就是一個(gè)Array.prototype.toString(16)的用法
看到這個(gè)詞腦袋里冒出的肯定是CSS的顏色。
做到隨機(jī)的話可以這樣
(~~(Math.random()*(1<<24))).toString(16)
底下的原文鏈接非常建議去讀一下,后三個(gè)技巧都是在那里學(xué)到的。
左移操作。這個(gè)操作特別叼。一般得玩 C 玩得多的,這個(gè)操作會懂一些。一般半路出家的前端碼農(nóng)可能不太了解(說的是我 ?)。
這個(gè)也是二進(jìn)制操作。將數(shù)值二進(jìn)制左移
解釋上面的1<<24的操作。
其實(shí)是1左移24位。000000000000000000000001左移24位,變成了1000000000000000000000000
不信?
試著在console粘貼下面的代碼
parseInt('1000000000000000000000000', 2) === (1 << 24)
其實(shí)還有一種更容易理解的方法來解釋
Math.pow(2,24) === (1 << 24)
因?yàn)槭嵌M(jìn)制操作,所以速度是很快的。
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
翻譯成正常語言就是這樣的
Array.prototype.forEach.call(document.querySelectorAll('*'), dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`)
其他的,像是一些await, Decorators什么的。用上TypeScript基本就懂的東西我就不介紹了。
本站文章版權(quán)歸原作者及原出處所有 。內(nèi)容為作者個(gè)人觀點(diǎn), 并不代表本站贊同其觀點(diǎn)和對其真實(shí)性負(fù)責(zé),本站只提供參考并不構(gòu)成任何投資及應(yīng)用建議。本站是一個(gè)個(gè)人學(xué)習(xí)交流的平臺,網(wǎng)站上部分文章為轉(zhuǎn)載,并不用于任何商業(yè)目的,我們已經(jīng)盡可能的對作者和來源進(jìn)行了通告,但是能力有限或疏忽,造成漏登,請及時(shí)聯(lián)系我們,我們將根據(jù)著作權(quán)人的要求,立即更正或者刪除有關(guān)內(nèi)容。本站擁有對此聲明的最終解釋權(quán)。