JavaScript 裝逼指南
本文秉承著
你看不懂是你sb,我寫的程式碼就要牛逼
的理念來介紹一些js的裝逼技巧。
下面的技巧,後三個,請謹慎用於團隊專案中(主要考慮到可讀性的問題),不然,leader 幹你沒商量。
Boolean
這個技巧用的很多,也非常的簡單
!!'foo'
通過兩個取反,可以強制轉換為Boolean型別。較為常用。
Number
這個也特別簡單,String轉化為Number
+'45' +new Date
會自動轉化為number型別的。較為常用。
IIFE
這個其實非常有實用價值,不算是裝逼。只是其他語言裡沒有這麼玩的,給不太瞭解js的同學看那可牛逼大了。
(function(arg) { // do something })(arg)
實用價值在於可以防止全域性汙染。不過現在隨著ES2015的普及已經沒什麼必要用這個了,我相信五年之後,這種寫法就會逐漸沒落。
自己幹五年,在實習生面前裝逼用也是蠻不錯的嘛~
Closure
閉包嘛,js 特別好玩的一個地方。上面的立即執行函式就是對閉包的一種運用。
不瞭解的回去翻翻書,知乎上也有很多討論,可以去看看。
閉包用起來對初學者來說簡直就是大牛的標誌(其實並不是)。
var counter = function() { var count = 0 return function() { return count++ } }
上面用到了閉包,看起來還挺裝逼的吧。不過好像沒什麼實用價值。
那麼這樣呢?
var isType = function(type) { return function(obj) { return toString.call(obj) == '[Object ' + type + ']'; } }
通過高階函式很輕鬆的實現判定類別。(別忘了有判定Array的Array.isArray())
當然,很明顯,這只是基礎,並不能更裝逼一點。來看下一節
Event
事件響應前端肯定都寫爛了,一般來說如何寫一個計數器呢?
var times = 0 var foo = document.querySelector('.foo') foo.addEventListener('click', function() { times++ console.log(times) }, false)
好像是沒什麼問題哦,但是!變數times
為什麼放在外面,就用了一次放在外面,命名衝突了怎麼辦,或者萬一在外面修改了怎麼辦。
這個時候這樣一個事件監聽程式碼就比較牛逼了
foo.addEventListener('click', (function() { var times = 0 return function() { times++ console.log(times) } })(), false)
怎麼樣,是不是立刻感覺不一樣了。瞬間逼格高了起來!
通過建立一個閉包,把times
封裝到裡面,然後返回函式。這個用法不太常見。
parseInt
高能預警
從這裡開始,下面的程式碼謹慎寫到公司程式碼裡!
parseInt
這個函式太普通了,怎麼能裝逼。答案是~~
現在摁下F12
,在console裡複製貼上這樣的程式碼:
~~3.14159 // => 3 ~~5.678 // => 5
這個技巧十分裝逼,原理是~
是一個叫做按位非的操作,會返回數值的反碼。是二進位制操作。
原因在於JavaScript中的number都是double型別的,在位操作的時候要轉化成int,兩次~就還是原數。
Hex
十六進位制操作。其實就是一個Array.prototype.toString(16)
的用法
看到這個詞腦袋裡冒出的肯定是CSS的顏色。
做到隨機的話可以這樣
(~~(Math.random()*(1<<24))).toString(16)
底下的原文連結非常建議去讀一下,後三個技巧都是在那裡學到的。
«
左移操作。這個操作特別叼。一般得玩 C 玩得多的,這個操作會懂一些。一般半路出家的前端碼農可能不太瞭解(說的是我 ☹)。
這個也是二進位制操作。將數值二進位制左移
解釋上面的1<<24
的操作。
其實是1左移24位。000000000000000000000001
左移24位,變成了1000000000000000000000000
不信?
試著在console貼上下面的程式碼
parseInt('1000000000000000000000000', 2) === (1 << 24)
其實還有一種更容易理解的方法來解釋
Math.pow(2,24) === (1 << 24)
因為是二進位制操作,所以速度是很快的。
BTW
[].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)}`)
Others
其他的,像是一些await, Decorators什麼的。用上TypeScript基本就懂的東西我就不介紹了。
祝願大家越玩越牛逼
相關文章
- 這些JavaScript程式設計黑科技,裝逼指南,高逼格程式碼,讓你驚歎不已JavaScript程式設計
- 【技巧總結】位運算裝逼指南
- 【演算法技巧】位運算裝逼指南演算法
- 一行能裝逼的JavaScript程式碼的延伸JavaScript
- JavaScript 裝飾器極速指南JavaScript
- 程式設計師高逼格指南程式設計師
- 產品經理撕逼修煉指南
- Spring淺入淺出——不吹牛逼不裝逼Spring
- 裝逼的寫法 jsJS
- Spring註解淺入淺出——不吹牛逼不裝逼Spring
- 前端JSer裝逼手冊前端JS
- Xcode 裝逼外掛 ActivatePowerModeXCode
- 你以為 CSS 只是個簡單的佈局?裝逼指南瞭解一下CSS
- 【演算法技巧】位運算裝逼指南 ---- 帶你領略位運算的魅力演算法
- JS無形裝逼,最為致命JS
- React loves you —“洞悉Redux裝的逼”ReactRedux
- [譯] JavaScript 之 this 指南JavaScript
- JavaScript編碼指南JavaScript
- JavaScript IndexedDB 完整指南JavaScriptIndex
- JavaScript 編碼指南JavaScript
- JavaScript風格指南JavaScript
- JavaScript 閉包基本指南JavaScript
- JavaScript 日期權威指南JavaScript
- Google JavaScript 風格指南GoJavaScript
- JavaScript SDK 設計指南JavaScript
- Spring的資料庫程式設計淺入淺出——不吹牛逼不裝逼Spring資料庫程式設計
- 分享一個用Git裝逼的小技巧~Git
- 0115 - 幣圈裝逼小程式
- 裝個逼:自定義三元運算子
- JavaScript編碼風格指南JavaScript
- JavaScript權威指南(6)——物件JavaScript物件
- 【譯】JavaScript 原型的深入指南JavaScript原型
- JavaScript:Scope(域)的基本指南JavaScript
- [譯] JAVASCRIPT 日期權威指南JavaScript
- JavaScript 編碼風格指南JavaScript
- JavaScript權威指南-陣列JavaScript陣列
- JavaScript 程式碼風格指南JavaScript
- JavaScript 模組(1):初學者指南JavaScript