使用這11個程式碼，可以大大地簡化我們的程式碼。

前端小智發表於2021-11-24

在這篇文章中，我將與你分享一些關於JS的技巧，可以提高你的JS技能。

作者：CodeOz
譯者：前端小智
來源：dev
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

我們正在招聘，年薪：25-60萬+獎金，有興趣的可以點我瞭解詳情。

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

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://dev.to/codeoz/improve...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章