歡迎您光臨本站 註冊首頁

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

←手機掃碼閱讀     ml5rwbikls @ 2020-05-10 , reply:0

如何寫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、短路表達式,棄用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)
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的會忽略掉。
10、數組去重
阿里面試官,喜歡問這個問題。
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去重比較牛。
11、取數組中的最大值和最小值
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


[ml5rwbikls ] JavaScript 裝逼指南(js另類寫法)已經有270次圍觀

http://coctec.com/docs/javascript/show-post-233637.html