全文共3019字，預計學習時長9分鐘
JavaScript是目前最流行的編程語言之一。就像任何其他編程語言一樣，它有許多讓人馬上就能學會的小技巧。
每一個技巧都能完成大多數開發人員每天需要完成的工作。根據經驗，讀者可能已經知道了其中一些，然而仍會對其他的技巧大吃一驚。
本文將介紹一系列技巧，而這些技巧能將讀者打造為一名更好的開發人員，並增強JavaScript技能。
我們一起來看看吧~
1.對象解構
開發人員一旦瞭解了對象解構，就可能每天都會用到。
但什麼是解構呢？
解構是一個JavaScript表達式，允許將數組、對象、映射和集合中的數據提取到其自己的變量中。它允許您一次從一個或多個對象中提取屬性。
一起看看以下示例，其中有一個用戶對象。如果要將用戶名(name)存儲在變量中，則必須將其賦給新行上的變量。如果想把性別(gender)也存儲在一個變量中，就必須重複上述操作。
<code>const user = {
name: 'Frank',
age: 23,
gender: 'M',
member: false
}const name = user.name
const gender = user.gender/<code>使用解構，就可以通過以下語法直接獲取對象屬性的變量：
<code>const { name, age, gender, member }= user;console.log(name) // Frank
console.log(age) // 23
console.log(gender) // M
console.log(member) // false/<code> 2.使用設備性能以更好地調試
作為一名開發人員，做的最多的事情就是調試。但是調試不僅僅是使用console.log在控制檯打印出一堆日誌信息這麼簡單。
知道控制檯對象有分析代碼片段性能的好辦法嗎？大多開發人員只知道用標準的console.log方法來調試代碼。
控制檯對象有很多有用的功能。它有一個time和timeEnd函數，可以幫助分析性能。其工作原理非常簡單。
在被測試的代碼前調用console.time函數。此函數有一個參數，接受一個描述被分析內容的字符串。在被測試代碼的末尾，調用console.timeEnd函數。給這個函數與第一個參數相同的字符串。然後，運行代碼所需的時間將會在控制檯中顯示。
<code>console.time('loop') for (let i = 0; i < 10000; i++) {
// Do stuff here
} console.timeEnd('loop')/<code> 3. Every和 some函數
Every和some函數並不是為所有開發人員熟知。然而，它們在某些情況下非常有用。先來講講every函數。如果想要知道數組中的所有元素是否都通過了某個測試，那就可以應用此函數。本質上，這是在遍歷數組中的每個元素，並且檢查它們是否屬性都為真。
這聽起來可能有些抽象，所以請看以下示例。並沒有那麼複雜。
<code>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/<code>
Every函數返回一個布爾值。如果數組中的所有元素都通過了測試，則返回“真”(true)。如果數組中的某個元素未通過測試，則返回“假” (false)。
也可以使用一個匿名函數作為測試函數：
<code>random_numbers.every((number) =>{
return number > 0
})/<code>some函數與every函數的工作原理幾乎完全相同。兩個函數只有一個主要區別：some函數測試的是數組中是否至少有一個元素通過了測試。
回顧上述實例，如果使用some函數而不是every函數，那麼兩個數組都將返回“真”(true)，因為兩個數組都包含一個正數。
<code>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/<code>
4.有條件地設置一個變量
有條件地設置一個變量很簡單，而且能使代碼更漂亮。在應用這個技巧的時候並不需要編寫if語句——這是筆者最喜歡的JavaScript技巧之一。
所以要如何有條件地設置一個變量？
const timezone =user.preferred_timezone || 'America/New_York'
上述例子是檢查用戶是否有首選時區。如果用戶有首選時區，則使用該時區。如果用戶沒有首選時區，則使用默認時區，即“美國/紐約”(‘America/New_York’)。
這段代碼看起來比使用if語句要乾淨得多。
<code>let timezone = 'America/New_York'if(user.preferred_timezone) {
timezone = user.preferred_timezone
}/<code>更簡潔了，不是嗎？
5.將值轉換為字符串數組
有時需要將所有的值轉換為字符串數組。例如，當使用Triple equal（===）運算符檢查數組中是否存在某個數字時，可能會出現這種情況。
筆者最近遇到了一個問題，其包含multi-select控件。Select選項的HTML值是字符串而不是整數，而這是有意義的，選定值的數組如下所示：
<code>let selected_values = [ '1', '5','8' ]/<code>
問題在於，沒能成功檢查所選值的數組中是否存在某個整數。筆者使用了一個Intersect函數，它使用了triple equals(===)運算符。並且由於‘5’ !== 5 ，而必須找到一個解決辦法。
在筆者看來，最漂亮的解決方案是將數組中的所有值都轉換為整數。當筆者進行嘗試時，偶然間發現了一個極其簡單，卻又漂亮的解決辦法。
<code>selected_values = selected_values.map(Number)// [ 1, 5, 8 ]/<code>
與將所有值轉換為整數不同，可以通過簡單地更改map函數的參數，將數組中的值轉化為布爾值。
selected_values =selected_values.map(Boolean)
美好的未來在召喚你~乾巴爹~
我們一起分享AI學習與發展的乾貨
閱讀更多 讀芯術 的文章
關鍵字: 錯過 技巧 JavaScript
