5個JavaScript小技巧

1、Every 函數 和 some 函數的巧妙使用

every函數和some函數並非是所有開發人員都熟悉的函數。但是,它們在某些情況下非常有用。讓我們從every函數開始。如果你想知道數組的所有元素是否都通過特定測試,則可以使用此函數。本質上,這是在遍歷數組的每個元素並檢查它們是否全部正確。

這聽起來可能有點抽象,所以讓我們看下面的示例。它並不像聽起來那樣複雜。

const random_numbers = [ 13, 2, 37, 18, 5 ]
const more_random_numbers = [ 0, -1, 30, 22 ]
const isPositive = (number) => {return number > 0}
random_numbers.every(isPositive); // returns true
more_random_numbers.every(isPositive); // returns false

每個函數都返回一個布爾值。如果數組中的所有元素均通過測試,則將返回true。如果數組中的元素之一未通過測試,則將返回false。

如果你願意,也可以使用匿名函數作爲測試器函數:

random_numbers.every((number) => {return number > 0})

some功能幾乎與every功能完全相同。只有一個主要區別:some函數測試數組中至少一個元素是否通過實現的測試。

如果我們看一下前面的示例,並使用some函數而不是every函數,則兩個數組都將返回true,因爲兩個數組都包含一個正數。​​​​​​​

const random_numbers = [ 13, 2, 37, 18, 5 ]
const more_random_numbers = [ 0, -1, 30, 22 ]
const isPositive = (number) => {return number > 0}
random_numbers.some(isPositive); // returns true
more_random_numbers.some(isPositive); // returns true

2、有條件地設置一個變量

有條件地設置變量既容易,又可以使代碼看起來更優雅。應用此技巧時無需編寫if語句-就我個人而言,這是我最喜歡的JavaScript技巧之一。

那麼如何有條件地設置變量?​​​​​​​

const timezone = user.preferred_timezone || 'America/New_York'

在上面的示例中,我們檢查用戶是否具有首選時區。如果用戶具有首選時區,我們將使用該時區。如果用戶沒有首選時區,我們將使用默認時區,即“ America / New_York”。

與使用if語句相比,此代碼看起來乾淨得多。​​​​​​​

let timezone = 'America/New_York'
if (user.preferred_timezone) { timezone = user.preferred_timezone}

這樣,看起來是不是更加整潔?

3、在數組中強制轉換值

有時你想將所有值都轉換爲數組。例如,當你使用三元等於運算符檢查數組中是否存在某個數字時,就是其中一種情況。

我最近遇到了一個多重選擇問題。select選項的HTML值是字符串而不是整數,這很有意義。所選值的數組如下所示:​​​​​​​

let selected_values = [ '1', '5', '8' ]

問題是我正在檢查所選值的數組中是否存在某個整數。沒有成功。我用了一個使用三元等於運算符的相交函數。既然'5'!== 5,我必須找到一個解決方案。

我認爲,最漂亮的解決方案是將數組中的所有值都轉換爲整數。嘗試執行此操作時,我偶然發現了一個痛苦而又簡單卻優雅的解決方案。

selected_values = selected_values.map(Number) // [ 1, 5, 8 ]

除了將所有值都強制轉換爲整數,還可以通過簡單地更改map函數的參數將數組中的所有值強制轉換爲布爾值。​​​​​​​

selected_values = selected_values.map(Boolean)

4、對象解構

一旦瞭解了對象解構的知識,你可能每天都會使用它。

但是,到底什麼是解構?

解構是一種JavaScript表達式,可讓你從數組,對象,映射和集合中提取數據到它們自己的變量中。它允許你一次從多個對象中提取對象的屬性或從數組中提取項目。

讓我們看下面的示例,其中有一個用戶對象。如果要將用戶名存儲在變量中,則必須在新行中將其分配給變量。而且,如果要將性別也存儲在變量中,則必須再次執行相同操作。​​​​​​​

const user = {name: 'Frank',age: 23,gender: 'M',member: false}
const name = user.nameconst gender = user.gender

通過解構,你可以使用以下語法直接獲取對象屬性的變量:​​​​​​​

const { name, age, gender, member } = user;
console.log(name) // Frank
console.log(age) // 23
console.log(gender) // M
console.log(member) // false

5、更好的調試使用性能

開發人員要做的一件重要的事就是調試。但是,調試不只是使用console.log在控制檯中打印一堆日誌消息。

你是否知道控制檯對象是分析代碼段性能的好方法?但是,大多數開發人員僅瞭解調試其代碼的標準console.log方法。

控制檯對象具有更多有用的功能。它具有time and timeEnd函數,可以幫助你分析性能。它真的很簡單。

在要測試的代碼前面,調用console.time函數。此函數有一個參數,該參數採用描述你要分析的內容的字符串。在要測試的代碼末尾,調用console.timeEnd函數。你爲該函數提供與第一個參數相同的字符串。然後,你將在控制檯中查看運行代碼所花費的時間。​​​​​​​

console.time('loop') 
for (let i = 0; i < 10000; i++) { // Do stuff here } 
console.timeEnd('loop')

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章