JavaScript 裝逼指南(實用技巧寫法)

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

轉Boolean類型

這個較爲常用。

!!'a'//true

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

轉Number類型

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

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

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

parseInt

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

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

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

短路表達式，棄用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更準確。

保留指定位數的小數點

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

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

單行寫一個評級組件

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

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

金錢格式化

//正則
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的倍數的位置就增加’,’，最後返回累加的字符串。

標準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去重比較牛。

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

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