本文秉承著
你看不懂是你sb，我寫的程式碼就要牛逼
的理念來介紹一些js的裝逼技巧。
下面的技巧，後三個，請謹慎用於團隊專案中(主要考慮到可讀性的問題)，不然，leader 幹你沒商量。
這個技巧用的很多，也非常的簡單
!!'foo'
透過兩個取反，可以強制轉換為Boolean類型。較為常用。
這個也特別簡單，String轉換成Number
+'45' +new Date
會自動轉換成number類型的。較為常用。
這個其實非常有實用價值，不算是裝逼。只是其他語言裡沒有這樣玩的，給不太了解js的同學看那可牛逼大了。
(function(arg) {
// do something
})(arg)實用價值在於可以防止全域污染。不過現在隨著ES2015的普及已經沒什麼必要用這個了，我相信五年之後，這種寫法就會逐漸沒落。
自己幹五年，在實習生面前裝逼用也是蠻不錯的嘛~
閉包嘛，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())
#當然，很明顯，這只是基礎，並不能更裝逼一點。來看下一節
事件回應前端一定都寫爛了，一般來說要如何寫一個計數器呢？
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這個函數太普通了，怎麼能裝逼。答案是~~
現在摁下F12，在console裡複製貼上這樣的程式碼：
~~3.14159 // => 3 ~~5.678 // => 5
這個技巧十分裝逼，原理是~是一個叫做位元非的操作，會傳回數值的反碼。是二進位操作。
原因在於JavaScript中的number都是double類型的，在位元操作的時候要轉換成int，兩次~就還是原數。
十六進位操作。其實就是一個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)
因為是二進位操作，所以速度是很快的。
[].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基本就懂的東西我就不介紹了。
以上是JavaScript 比較牛的指南的圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
