如何寫JavaScript才能逼格更高呢？是否很期待別人在看完你的代碼之后感嘆一句原來還可以這樣寫呢？下面列出一些在JavaScript時的裝逼技巧，也可說是非常實用的寫法

下面就是具體的寫法，建議大家逐個測試一下，加深印象

1、轉Boolean類型

這個較為常用。

!!'a'//true

通過兩個取反，可以強制轉換為Boolean類型。

!!是將表達式強制轉化為bool值的運算，運算結果為true或false，表達式是什么值，結果就是對應的bool值，不再取非。

不是取非再取非的意思！！！

!!false=false;    要注意false和“false” 的區別！！！！！

!!"false"=true;

!!true=true;

!!(NaN || undefined || null || 0 || ' ')=false;

2、轉Number類型

String轉化為Number；日期輸出時間戳。

+'45'//45 
+new Date//13位時間戳

會自動轉化為Number類型的。日期取時間戳不用new Date().getTime()。

3、parseInt

parseInt這個函數太普通了，怎么能裝逼。答案是~~，這種方法還可以將字符串轉換成數字類型。向下取整。

~~3.14159//3 
~~'5.678'//5 
-2.33 | 0 //-2 
2.33 >> 0 //2

原理是~是一個叫做按位非的操作，會返回數值的反碼，兩次取反就是原數。|為位運算符，兩個位只要有一個為1，那么結果都為1，否則就為0。>>運算符執行有符號右移位運算。都是二進制操作。 原因在于JavaScript中的number都是double類型的，在位操作的時候要轉化成int。

4、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)

因為是二進制操作，所以速度是很快的。

5、短路表達式，棄用if-else

反面示例：

if () { 
// ... 
} else if () { 
// ... 
} else { 
// ... 
}

用 || 和 &&來簡化if-else 。有時候用 !! 操作符也能簡化if-else模式。例如這樣：

let a = b || 1;//b為真，a=b;b為假，a=1; 
let c = b && 1;//b為真，c=1;b為假，c=b; 
// 使用!!符號 
let isValid = !!(value && value !== 'error');

“!”是取反操作，兩個“!”自然是負負得正了。比較常用的是||。

另外一種undefined

let data = void 0; // undefined

void 運算符 對給定的表達式進行求值，然后返回 undefined。
那為什么要用void 0，不直接undefined呢？ undefined在javascript中不是保留字。因此在IE5.5~8中我們可以將其當作變量那樣對其賦值（IE9+及其他現代瀏覽器中賦值給undefined將無效）。采用void方式獲取undefined更準確。

6、保留指定位數的小數點

let num = 2.443242342; 
num = num.toFixed(4); //"2.4432"

注意， toFixed() 方法返回的是字符串而不是一個數字。

7、單行寫一個評級組件

let rate = 3; 
"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);//"★★★☆☆"

slice() 方法可提取字符串的某個部分，并以新的字符串返回被提取的部分stringObject.slice(start,end)

8、金錢格式化

//正則 
let cash = '1234567890'
cash.replace(/\B(?=(\d{3})+(?!\d))/g, ',');//"1,234,567,890" 
//非正則的優雅實現 
function formatCash(str) { 
 return str.split('').reverse().reduce((prev, next, index) => { 
 return ((index % 3) ? next : (next + ',')) + prev 
 }) 
} 
formatCash(cash);//"1,234,567,890"

非正則的方法，先把字符串轉成了數組，反轉了一下變成了[0,9,8,7,6,5,4,3,2,1]。再對新的數組進行reduce操作，數組元素位置除3取余，是3的倍數的位置就增加','，最后返回累加的字符串。

9、標準JSON的深拷貝

let a = { 
 a1: 1, 
 b1: { c: 1, d: 2 } 
}; 
let b=JSON.parse(JSON.stringify(a)); 
b;//{a1: 1, b1: {…}}

不考慮IE的情況下，標準JSON格式的對象蠻實用，不過對于undefined和function的會忽略掉。

數組去重
阿里面試官，喜歡問這個問題。

let array=[1, "1", 2, 1, 1, 3]; 
//拓展運算符(...)內部使用for...of循環 
[...new Set(array)];//[1, "1", 2, 3\] 
//利用Array.from將Set結構轉換成數組 
Array.from(new Set(array));//[1, "1", 2, 3\]

傳統的方法，循環遍歷：排序sort()后前一下與后一個比較==；在數組中用indexOf判斷，利用includes，利用filter；這些方法感覺都過時了，還是用ES6中利用Set去重比較牛。

10、取數組中的最大值和最小值

Math.max方法可以求出給定參數中最大的數。

Math.max('1','2','3.1','3.2');//3.2 
Math.min(1,0,-1);//-1

但如果是數組，就不能這樣調用了。此時就用到了apply方法。Function.apply()是JS的一個OOP特性，一般用來模擬繼承和擴展this的用途。所有函數都有apply(作用域鏈,參數)這個方法，當作用域鏈為null時，默認為上文，這個函數的“參數”，接收一個數組。

let arr = ['1','2','3.1','3.2',0,-1]; 
//用apply方法 
Math.max.apply(null, arr);//3.2 
Math.min.apply(Math, arr);//-1 
//用拓展運算符 
Math.max(...arr);//3.2 
Math.min(...arr);//-1

11、IIFE

這個其實非常有實用價值，不算是裝逼。只是其他語言里沒有這么玩的，給不太了解js的同學看那可牛逼大了。

(function(arg) {
 // do something
})(arg)

實用價值在于可以防止全局污染。不過現在隨著ES2015的普及已經沒什么必要用這個了，我相信五年之后，這種寫法就會逐漸沒落。

自己干五年，在實習生面前裝逼用也是蠻不錯的嘛~

12、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)}`)

13、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封裝到里面，然后返回函數。這個用法不太常見。

以上就是JavaScript 裝逼指南(js另類寫法)的詳細內容