1、轉(zhuǎn)換為數(shù)字

一元 + 運(yùn)算符

+"42" // 42

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

一元加號(hào)運(yùn)算符位于其操作數(shù)之前并計(jì)算其操作數(shù)，但如果尚未將其轉(zhuǎn)換為數(shù)字，則會(huì)嘗試將其轉(zhuǎn)換為數(shù)字。

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

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

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

數(shù)字

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

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

解析整數(shù)

parseInt()接受一個(gè)字符串作為第一個(gè)參數(shù)和一個(gè)字符串將被轉(zhuǎn)換成的基數(shù)。此方法始終返回一個(gè)整數(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。

解析浮點(diǎn)數(shù)

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

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

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

2、管理對(duì)象

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

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

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

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

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

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

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

3、交換兩個(gè)變量

使用我們?cè)谏弦粋€(gè)技巧中學(xué)到的知識(shí)，可以輕松地交換變量：

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

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

不再需要臨時(shí)變量了！

4、 設(shè)置默認(rèn)值

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

變量

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

const bookList = receivedBooks ?? [];

參數(shù)

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

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

這里我們將默認(rèn)值設(shè)置為height:100。

對(duì)象

解構(gòu)對(duì)象時(shí)的另一個(gè)技巧是設(shè)置默認(rèn)值：

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)默認(rèn)值僅在值為undefined時(shí)。

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

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

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

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

6、刪除數(shù)組重復(fù)項(xiàng)

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

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

我們從數(shù)組創(chuàng)建一個(gè)Set，因?yàn)镾et中的每個(gè)值都必須是唯一的，所以，我們刪除了所有重復(fù)項(xiàng)。然后，我們使用擴(kuò)展運(yùn)算符將Set轉(zhuǎn)換回新數(shù)組。

7、動(dòng)態(tài)屬性名稱

ES6 為我們帶來了計(jì)算屬性名稱，允許對(duì)象字面量的屬性鍵使用表達(dá)式。通過用括號(hào)包圍鍵[]，我們可以使用變量作為屬性鍵：

const type = "fruit";const item = { [type]: "kiwi"};
console.log(item); // {fruit: "kiwi"}

這個(gè)在你希望動(dòng)態(tài)創(chuàng)建密鑰的情況下很有用。

我們可以使用括號(hào)表示法訪問該值：

item[type];   // "kiwi"item["fruit"] // "kiwi"

或使用點(diǎn)符號(hào)：

item.fruit; // "kiwi"

8、獎(jiǎng)勵(lì)你一個(gè)額外的小技巧

如果我們想在沒有改變的情況下向數(shù)組添加一個(gè)新項(xiàng)目（我們通常希望避免這種情況），我們可以使用 ES6擴(kuò)展運(yùn)算符和slice創(chuàng)建一個(gè)新數(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"]

結(jié)論

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

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)