文章來源于公眾號:前端開發(fā)社區(qū) ,作者:炮哥
本文給大家安利幾個JS開發(fā)小技巧,可能有些人已經(jīng)知道了,但是對于新手來說還是蠻有用的,它可以讓你的代碼更簡潔。
1 轉(zhuǎn)換布爾值
除了常規(guī)的布爾值true
和false
之外,JavaScript 還將所有其他值視為 ‘truthy’ 或‘falsy’。
除非另有定義,否則 JavaScript 中的所有值都是'truthy',除了0
,“”
,null
,undefined
,NaN
,當然還有false
,這些都是'falsy'
我們可以通過使用負算運算符輕松地在true
和false
之間切換。它也會將類型轉(zhuǎn)換為“boolean”。
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"
2 轉(zhuǎn)換數(shù)字
使用加法運算符+
可以快速實現(xiàn)相反的效果。
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
這也可以用于將布爾值轉(zhuǎn)換為數(shù)字,如下所示
console.log(+true); // Return: 1
console.log(+false); // Return: 0
在某些上下文中,+
將被解釋為連接操作符,而不是加法操作符。當這種情況發(fā)生時(你希望返回一個整數(shù),而不是浮點數(shù)),您可以使用兩個波浪號:~~
。
連續(xù)使用兩個波浪有效地否定了操作,因為—?(?—?n?—?1)?—?1 = n + 1?—?1 = n
。換句話說,~—16
等于15
。
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
雖然我想不出很多用例,但是按位NOT運算符也可以用在布爾值上:~true = \-2
和~false = \-1
。
3轉(zhuǎn)換字符串
要快速地將數(shù)字轉(zhuǎn)換為字符串,我們可以使用連接運算符+
后跟一組空引號""
。
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"
4浮點數(shù)轉(zhuǎn)整數(shù)
如果希望將浮點數(shù)轉(zhuǎn)換為整數(shù),可以使用Math.floor()
、Math.ceil()
或Math.round()
。但是還有一種更快的方法可以使用|(位或運算符)將浮點數(shù)截斷為整數(shù)。
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23
|的行為取決于處理的是正數(shù)還是負數(shù),所以最好只在確定的情況下使用這個快捷方式。
如果n
為正,則n | 0
有效地向下舍入。如果n
為負數(shù),則有效地向上舍入。更準確地說,此操作將刪除小數(shù)點后面的任何內(nèi)容,將浮點數(shù)截斷為整數(shù)。
你可以使用~~
來獲得相同的舍入效果,如上所述,實際上任何位操作符都會強制浮點數(shù)為整數(shù)。這些特殊操作之所以有效,是因為一旦強制為整數(shù),值就保持不變。
刪除最后一個數(shù)字
按位或
運算符還可以用于從整數(shù)的末尾刪除任意數(shù)量的數(shù)字。這意味著我們不需要使用這樣的代碼來在類型之間進行轉(zhuǎn)換。
let str = "1553";
Number(str.substring(0, str.length - 1));
相反,按位或運算符可以這樣寫:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1
5格式化JSON
最后,你之前可能已經(jīng)使用過JSON.stringify
,但是您是否意識到它還可以幫助你縮進JSON?
stringify()
方法有兩個可選參數(shù):一個replacer
函數(shù),可用于過濾顯示的JSON和一個空格值。
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'
6取數(shù)組最后一項
數(shù)組方法slice()
可以接受負整數(shù),如果提供它,它將接受數(shù)組末尾的值,而不是數(shù)組開頭的值。
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]
7es6數(shù)組去重
Set對象類型是在ES6中引入的,配合展開操作...一起,我們可以使用它來創(chuàng)建一個新數(shù)組,該數(shù)組只有唯一的值。
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]
在ES6之前,隔離惟一值將涉及比這多得多的代碼。
此技巧適用于包含基本類型的數(shù)組:undefined
,null
,boolean
,string
和number
。(如果你有一個包含對象,函數(shù)或其他數(shù)組的數(shù)組,你需要一個不同的方法!)
8更優(yōu)雅的運算
從ES7開始,可以使用指數(shù)運算符**
作為冪的簡寫,這比編寫Math.pow(2, 3)
更快。這是很簡單的東西,但它之所以出現(xiàn)在列表中,是因為沒有多少教程更新過這個操作符。
console.log(2 ** 3); // Result: 8
這不應該與通常用于表示指數(shù)的^符號相混淆,但在JavaScript中它是按位異或運算符。
在ES7之前,只有以2
為基數(shù)的冪才存在簡寫,使用按位左移操作符