1、轉換為數(shù)字

一元 + 運算符

+"42" // 42

一元運算是只有一個操作數(shù)的運算。該操作數(shù)出現(xiàn)在運算符之前或之后。

一元加號運算符位于其操作數(shù)之前并計算其操作數(shù)，但如果尚未將其轉換為數(shù)字，則會嘗試將其轉換為數(shù)字。

以下是它的行為方式的更多示例：

+true // 1 +false // 0 +null // 0

但是，如果我們想在我們的代碼中更加明確怎么辦？

數(shù)字

Number是一個原始包裝對象，用于表示和操作數(shù)字。當用作函數(shù)時，Number(value)將字符串或其他值轉換為數(shù)字類型。如果該值無法轉換，則返回NaN(Not a Number)。

Number("42") // 42 Number("1.3") // 1.3 Number("tax") // NaN

解析整數(shù)

parseInt()接受一個字符串作為第一個參數(shù)和一個字符串將被轉換成的整數(shù)。此方法始終返回一個整數(shù)。

parseInt("1234", 10) // 1234 parseInt("11 player ", 10) // 11 parseInt("player 2", 10) // NaN parseInt("10.81", 10) // 10

parseInt()嘗試從不僅包含數(shù)字的字符串中獲取數(shù)字，但如果字符串不以數(shù)字開頭，你將獲得NaN。

解析浮點數(shù)

如果我們想保留小數(shù)部分而不僅僅是整數(shù)部分，我們可以使用parseFloat()將字符串作為參數(shù)并返回等效的浮點數(shù)。

parseFloat("10.42") // 10.42 parseFloat("10.00") // 10

還有一些方法可以轉換為數(shù)字，但這些是更常見的方法。

2、管理對象

解構是 ES6 的重要組成部分，您可能會經常使用。它允許我們從對象中提取數(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ù)解構返回的對象并選擇我們想要使用的值：

function getPerson() {  return {    firstName: 'Max',    lastName: 'Best',    age: 42  }}const { age } = getPerson();console.log(age); // 42

因此，通過解構，我們可以通過返回一個對象并選擇我們想要返回的部分來從函數(shù)中返回多個值。

以不可變的方式刪除屬性需要由 spread 的對應方提供的一個小技巧，rest operator，它用三個點 (...) 寫成，類似于 spread。

但是，在這種情況下，我們將剩余的屬性分散到一個新對象中。

const { age:_ , …person } = getPerson();console.log(person); // {firstName: “Max”, lastName: “Best”}

現(xiàn)在該person對象擁有原始 person 對象的所有屬性，除了age。

3、交換兩個變量

使用我們在上一個技巧中學到的知識，可以輕松地交換變量：

let me = "happy", you = "sad";[me, you] = [you, me];// me = "sad", you = "happy"

上面的代碼創(chuàng)建了一個 [you, me] 數(shù)組，并立即將它們解構為相反的變量。

不再需要臨時變量了！

4、 設置默認值

我們都見過他們。檢查值是否已設置的無休止的 if 語句。如果我說有更好的方法呢？嗯，這正是我要說的，默認值。

變量

所述nullish合并運算符（？）是否返回其右側的操作，其左側操作是一個邏輯運算符null或undefined否則返回其左側。我們可以使用它來設置默認值，例如，當我們收到尚未設置為數(shù)組的列表時：

const bookList = receivedBooks ?? [];

參數(shù)

我們可以使用空合并運算符為函數(shù)中的變量設置默認值，但有更好的方法，默認參數(shù)：

function calculateArea(width, height = 100) {  return width * height;}
const area = calculateArea(50);console.log(area); // 5000

這里我們將默認值設置為height:100。

對象

解構對象時的另一個技巧是設置默認值：

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 解構默認值僅在值為undefined時。

5、區(qū)間隨機數(shù)

有時我們需要在一個范圍內生成一個隨機數(shù)。該Math.random()函數(shù)幫助我們生成一個隨機數(shù)，然后，我們可以將其轉換為我們想要的范圍：

const randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max — min + 1) + min);

如果你查看函數(shù)的構造方式，還有另一個技巧可以融入到這個技巧中。

6、刪除數(shù)組重復項

ES6 中引入的 Set 對象類型允許你存儲唯一值。與擴展運算符 (...) 一起，我們可以使用它來創(chuàng)建一個只有唯一值的新數(shù)組：

const uniqueArray = [...new Set(array)]

我們從數(shù)組創(chuàng)建一個Set，因為Set中的每個值都必須是唯一的，所以，我們刪除了所有重復項。然后，我們使用擴展運算符將Set轉換回新數(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 array newItem,                // 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"]

結論

我希望，你發(fā)現(xiàn)這些 JavaScript 技巧中的一些有用并且值得添加到您的日常武器庫中。請記住，負責任遠比高效重要。

學習更多技能

請點擊下方公眾號