在這篇文章中，我將與你分享一些關于JS的技巧，可以提高你的JS技能。
1.避免if過長
如果判斷值滿足多個條件，我們可能會這么寫：
if (value === 'a' || value === 'b' || value === 'c') { ... }
像這樣如果有多個條件，if 條件就會很我，可讀性降低，我們可以這樣簡化：
if (['a', 'b', 'c'].includes(value)) { ... }
2.雙!操作符將任何變量轉換為布爾值
!(NOT)運算符可以使用兩次!!，這樣可以將任何變量轉換為布爾值(像布爾函數)，當你需要在處理它之前檢查某個值時非常方便。
const toto = null
!!toto // false
Boolean(toto) // false
if (!!toto) { } // toto is not null or undefined
3.可選項 (?)
在 JS 中，我們需要經常檢查對象的某些屬性是否存在，然后才能再處理它，不然會報錯。早期我們可能會這么干：
const toto = { a: { b: { c: 5 } } }
if (!!toto.a && !!toto.a.b && !!toto.a.b.c) { ... } // toto.a.b.c exist
如果對象嵌套很深，我們這寫法就難以閱讀，這時可以使用?來簡化：
if (!!toto.a?.b?.c) { ... } // toto.a.b.c exist
// 如果鍵不存在，返回 `undefined`。
const test = toto.a?.b?.c?.d // undefined
4. 如果if中返回值時， 就不要在寫else
經常會看到這種寫法：
if (...) {
return 'toto'
} else {
return 'tutu'
}
如果if有返回值了，可以這樣寫：
if (...) {
return 'toto'
}
return 'tutu'
5.避免forEach，多使用filter、map、reduce、every、some
作為初學者，我們使用了很多forEach函數，但 JS 為我們提供了很多選擇，而且這些函數是FP（函數式編程）。
filter
filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。
const toto = [1, 2, 3, 4]
// 過濾奇數
const evenValue = toto.filter(currentValue => {
return currentValue % 2 == 0
}) // [2, 4]
map
map() 方法創建一個新數組，其結果是該數組中的每個元素是調用一次提供的函數后的返回值。
const toto = [1, 2, 3, 4]
const valueMultiplied = toto.map(currentValue => {
return currentValue * 2
}) // [2, 4, 6, 8]
reduce
reduce() 方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果匯總為單個返回值。
const toto = [1, 2, 3, 4]
const sum = toto.reduce((accumulator, currentValue) => {
return accumulator += currentValue
}, 0) // 10
Some & Every
some() 方法測試數組中是不是至少有1個元素通過了被提供的函數測試。它返回的是一個Boolean類型的值。
every() 方法測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。
什么時候使用？
所有項目都符合一個條件可以用 every
const toto = [ 2, 4 ]
toto.every(val => val % 2 === 0) // true
const falsyToto = [ 2, 4, 5 ]
falsyToto.every(val => val % 2 === 0) // false
只要一個符合條件就行，用some
const toto = [ 2, 4, 5 ]
toto.some(val => val % 2 !== 0) // return true
6.不要使用delete來刪除屬性
從一個對象中 delete 一個屬性是非常不好的（性能不好），此外，它還會產生很多副作用。
但是如果你需要刪除一個屬性，你應該怎么做？
可以使用函數方式創建一個沒有此屬性的新對象，如下所示：
const removeProperty = (target, propertyToRemove) => {
const { [propertyToRemove]: _, ...newTarget } = target
return newTarget
}
const toto = { a: 55, b: 66 }
const totoWithoutB = removeProperty(toto, 'b') // { a: 55 }
7.僅當對象存在時才向其添加屬性
有時，如果對象已經定義了屬性，我們需要向對象添加屬性，我們可能會這樣寫：
const toto = { name: 'toto' }
const other = { other: 'other' }
// The condition is not important
const condition = true
if (condition) {
other.name = toto.name
}
?不是很好的代碼
? 可以用一些更優雅的東西!
const condition = true
const other = {
other: 'other',
...condition && { name: 'toto' }
}
8. 使用模板字符串
在 JS 中學習字符串時，我們需要將它們與變量連接起來
const toto = 'toto'
const message = 'hello from ' + toto + '!' // hello from toto!
如果還有其它變量，我們就得寫很長的表達式，這時可以使用模板字符串來優化。
const toto = 'toto'
const message = `hello from ${toto}!` // hello from toto!
9. 條件簡寫
當條件為 true 時，執行某些操作，我們可能會這樣寫：
if(condition){
toto()
}
這種方式可以用 && 簡寫:
condition && toto()
10.設置變量的默認值
如果需要給一個變量設置一個默認值，可以這么做：
let toto
console.log(toto) //undefined
toto = toto ?? 'default value'
console.log(toto) //default value
toto = toto ?? 'new value'
console.log(toto) //default value
11.使用 console timer
如果需要知道一個函數的執行時間，可以這么做：
for (i = 0; i < 100000; i++) {
// some code
}
console.timeEnd() // x ms
作者：CodeOz 譯者：前端小智 來源：dev 原文：https://dev.to/codeoz/improve-your-js-skls-with-theses-tips-52ia
