JS開發中讓代碼更簡潔的技巧有哪些

本文小編為大家詳細介紹“JS開發中讓代碼更簡潔的技巧有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JS開發中讓代碼更簡潔的技巧有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1 轉換布爾值

除了常規的布爾值true和false之外，JavaScript 還將所有其他值視為 ‘truthy’ 或‘falsy’。

除非另有定義，否則 JavaScript 中的所有值都是'truthy'，除了0，“”，null，undefined，NaN，當然還有false，這些都是'falsy'

我們可以通過使用負算運算符輕松地在true和false之間切換。它也會將類型轉換為“boolean”。

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

2 轉換數字

使用加法運算符+可以快速實現相反的效果。

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

這也可以用于將布爾值轉換為數字，如下所示

 console.log(+true);  // Return: 1 
 console.log(+false); // Return: 0

在某些上下文中，+將被解釋為連接操作符，而不是加法操作符。當這種情況發生時(你希望返回一個整數，而不是浮點數)，您可以使用兩個波浪號:~~。

連續使用兩個波浪有效地否定了操作，因為—?(?—?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轉換字符串

要快速地將數字轉換為字符串，我們可以使用連接運算符+后跟一組空引號""。

const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

4浮點數轉整數

如果希望將浮點數轉換為整數，可以使用Math.floor()、Math.ceil()或Math.round()。但是還有一種更快的方法可以使用|(位或運算符)將浮點數截斷為整數。

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

|的行為取決于處理的是正數還是負數，所以最好只在確定的情況下使用這個快捷方式。

如果n為正，則n | 0有效地向下舍入。如果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

最后，你之前可能已經使用過JSON.stringify，但是您是否意識到它還可以幫助你縮進JSON？

stringify()方法有兩個可選參數：一個replacer函數，可用于過濾顯示的JSON和一個空格值。

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

6取數組最后一項

數組方法slice()可以接受負整數，如果提供它，它將接受數組末尾的值，而不是數組開頭的值。

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數組去重

Set對象類型是在ES6中引入的，配合展開操作...一起，我們可以使用它來創建一個新數組，該數組只有唯一的值。

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

在ES6之前，隔離惟一值將涉及比這多得多的代碼。

此技巧適用于包含基本類型的數組：undefined，null，boolean，string和number。（如果你有一個包含對象，函數或其他數組的數組，你需要一個不同的方法！）

8更優雅的運算

從ES7開始，可以使用指數運算符**作為冪的簡寫，這比編寫Math.pow(2, 3) 更快。這是很簡單的東西，但它之所以出現在列表中，是因為沒有多少教程更新過這個操作符。

console.log(2 ** 3); // Result: 8

這不應該與通常用于表示指數的^符號相混淆，但在JavaScript中它是按位異或運算符。

在ES7之前，只有以2為基數的冪才存在簡寫，使用按位左移操作符

讀到這里，這篇“JS開發中讓代碼更簡潔的技巧有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。