1. 程式人生 > 程式設計 >JavaScript 裝逼指南(js另類寫法)

JavaScript 裝逼指南(js另類寫法)

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

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()。

JavaScript 裝逼指南(js另類寫法)

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、短路表示式,棄用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');

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

5、另外一種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)

JavaScript 裝逼指南(js另類寫法)

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,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的會忽略掉。

10、陣列去重

阿里面試官,喜歡問這個問題。

let array=[1,"1",1,3]; 
//拓展運算子(...)內部使用for...of迴圈 
[...new Set(array)];//[1,3\] 
//利用Array.from將Set結構轉換成陣列 
Array.from(new Set(array));//[1,3\]

傳統的方法,迴圈遍歷:排序sort()後前一下與後一個比較==;在陣列中用indexOf判斷,利用includes,利用filter;這些方法感覺都過時了,還是用ES6中利用Set去重比較牛。

11、取陣列中的最大值和最小值

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

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

但如果是陣列,就不能這樣呼叫了。此時就用到了apply方法。Function.apply()是JS的一個OOP特性,一般用來模擬繼承和擴充套件this的用途。所有函式都有apply(作用域鏈,引數)這個方法,當作用域鏈為null時,預設為上文,這個函式的“引數”,接收一個數組。

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

以上就是JavaScript 裝逼指南(js另類寫法)的詳細內容,更多關於js裝逼寫法的資料請關注我們其它相關文章!