分享7個實用的 JavaScript 方法技巧
1、轉(zhuǎn)換為數(shù)字
一元 + 運算符
+"42" // 42一元運算是只有一個操作數(shù)的運算。該操作數(shù)出現(xiàn)在運算符之前或之后。
一元加號運算符位于其操作數(shù)之前并計算其操作數(shù)，但如果尚未將其轉(zhuǎn)換為數(shù)字，則會嘗試將其轉(zhuǎn)換為數(shù)字。
以下是它的行為方式的更多示例：
+true // 1+false // 0+null // 0
但是，如果我們想在我們的代碼中更加明確怎么辦？
數(shù)字
Number是一個原始包裝對象，用于表示和操作數(shù)字。當用作函數(shù)時，Number(value)將字符串或其他值轉(zhuǎn)換為數(shù)字類型。如果該值無法轉(zhuǎn)換，則返回NaN(Not a Number)。
Number("42") // 42Number("1.3") // 1.3Number("tax") // NaN
解析整數(shù)
parseInt()接受一個字符串作為第一個參數(shù)和一個字符串將被轉(zhuǎn)換成的整數(shù)。此方法始終返回一個整數(shù)。
parseInt("1234", 10) // 1234parseInt("11player ", 10) // 11 parseInt("player 2", 10) // NaNparseInt("10.81", 10) // 10
parseInt()嘗試從不僅包含數(shù)字的字符串中獲取數(shù)字，但如果字符串不以數(shù)字開頭，你將獲得NaN。
解析浮點數(shù)
如果我們想保留小數(shù)部分而不僅僅是整數(shù)部分，我們可以使用parseFloat()將字符串作為參數(shù)并返回等效的浮點數(shù)。
parseFloat("10.42") // 10.42parseFloat("10.00") // 10
還有一些方法可以轉(zhuǎn)換為數(shù)字，但這些是更常見的方法。
2、管理對象
解構(gòu)是 ES6 的重要組成部分，您可能會經(jīng)常使用。它允許我們從對象中提取數(shù)據(jù)，并將提取的數(shù)據(jù)分配給變量：
const rectangle = { h: 100, w: 200 };const { h, w } = rectangle;
如果我們想，我們可以重命名變量：
const { h: height, w: width} = rectangle;console.log(height); // 100
我們可以做的另一件方便的事情是通過函數(shù)解構(gòu)返回的對象并選擇我們想要使用的值：
function getPerson() {return {firstName: 'Max',lastName: 'Best',age: 42}}const { age } = getPerson();console.log(age); // 42
因此，通過解構(gòu)，我們可以通過返回一個對象并選擇我們想要返回的部分來從函數(shù)中返回多個值。
以不可變的方式刪除屬性需要由 spread 的對應(yīng)方提供的一個小技巧，rest operator，它用三個點 (...) 寫成，類似于 spread。
但是，在這種情況下，我們將剩余的屬性分散到一個新對象中。
const { age:_ , …person } = getPerson();console.log(person); // {firstName: “Max”, lastName: “Best”}
現(xiàn)在該person對象擁有原始 person 對象的所有屬性，除了age。
3、交換兩個變量
使用我們在上一個技巧中學(xué)到的知識，可以輕松地交換變量：
let me = "happy", you = "sad";[] = [you, me];// me = "sad", you = "happy"
上面的代碼創(chuàng)建了一個 [you, me] 數(shù)組，并立即將它們解構(gòu)為相反的變量。
不再需要臨時變量了！
4、 設(shè)置默認值
我們都見過他們。檢查值是否已設(shè)置的無休止的 if 語句。如果我說有更好的方法呢？嗯，這正是我要說的，默認值。
變量
所述nullish合并運算符（？）是否返回其右側(cè)的操作，其左側(cè)操作是一個邏輯運算符null或undefined否則返回其左側(cè)。我們可以使用它來設(shè)置默認值，例如，當我們收到尚未設(shè)置為數(shù)組的列表時：
const bookList = receivedBooks ?? [];參數(shù)
我們可以使用空合并運算符為函數(shù)中的變量設(shè)置默認值，但有更好的方法，默認參數(shù)：
function calculateArea(width, height = 100) {return width * height;}const area = calculateArea(50);console.log(area); // 5000
這里我們將默認值設(shè)置為height:100。
對象
解構(gòu)對象時的另一個技巧是設(shè)置默認值：
const rectangle = { height: 400 };const { height = 750, width = 500 } = rectangle;console.log(height); // 400?-?comes from rectangle objectconsole.log(width); // 500?-?fallback to default
ES6 解構(gòu)默認值僅在值為undefined時。
5、區(qū)間隨機數(shù)
有時我們需要在一個范圍內(nèi)生成一個隨機數(shù)。該Math.random()函數(shù)幫助我們生成一個隨機數(shù)，然后，我們可以將其轉(zhuǎn)換為我們想要的范圍：
const randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max — min + 1) + min);如果你查看函數(shù)的構(gòu)造方式，還有另一個技巧可以融入到這個技巧中。
6、刪除數(shù)組重復(fù)項
ES6 中引入的 Set 對象類型允許你存儲唯一值。與擴展運算符 (...) 一起，我們可以使用它來創(chuàng)建一個只有唯一值的新數(shù)組：
const uniqueArray = [...new Set(array)]我們從數(shù)組創(chuàng)建一個Set，因為Set中的每個值都必須是唯一的，所以，我們刪除了所有重復(fù)項。然后，我們使用擴展運算符將Set轉(zhuǎn)換回新數(shù)組。
7、動態(tài)屬性名稱
ES6 為我們帶來了計算屬性名稱，允許對象字面量的屬性鍵使用表達式。通過用括號包圍鍵[]，我們可以使用變量作為屬性鍵：
const type = "fruit";const item = {[type]: "kiwi"};console.log(item); // {fruit: "kiwi"}
這個在你希望動態(tài)創(chuàng)建密鑰的情況下很有用。
我們可以使用括號表示法訪問該值：
item[type]; // "kiwi"item["fruit"] // "kiwi"
或使用點符號：
item.fruit; // "kiwi"8、獎勵你一個額外的小技巧
如果我們想在沒有改變的情況下向數(shù)組添加一個新項目（我們通常希望避免這種情況），我們可以使用 ES6擴展運算符和slice創(chuàng)建一個新數(shù)組：
const insert = (arr, index, newItem) => [...arr.slice(0, index), // first half of arraynewItem, // new item...arr.slice(index) // rest of array];const items = ['S', 'L', 'C', 'E']const result = insert(items, 2, 'I');console.log(result); // ["S", "L", "I", "C", "E"]
結(jié)論
我希望，你發(fā)現(xiàn)這些 JavaScript 技巧中的一些有用并且值得添加到您的日常武器庫中。請記住，負責(zé)任遠比高效重要。
學(xué)習(xí)更多技能
請點擊下方公眾號
