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')