4個編寫短小精煉JS程式碼的小技巧（分享）

如何讓寫的JS程式碼更短？以下這篇文章就來跟大家分享4個寫短小精煉JS程式碼的小技巧，希望對大家有幫助！

短路

Javascript 裡的邏輯運算子與(&&)可以產生短路，例如

console.log(true && 0 && 2); // 0
console.log(true && 'test' && 2) // 2

即程式碼從左往右，如果遇到undefined，null，0等等會轉換成false的值時就不再繼續運作。

x == 0 && foo()
// 等价于
if( x == 0 ){
  foo()
}

鏈判斷運算子'?'

假設有一個物件

const student = {
    name : {
      firstName : 'Joe'
  }
}

我們希望firstname存在的情況下做一些事情, 我們不得不一層一層檢查

if(student && student.name && student.name.firstName){
    console.log('student First name exists')
}

採用鏈判斷運算子會在某一層取不到值的時候停止並傳回undefined

if(student?.name?.firstName){
    console.log('student First name exists')
}

空值合併運算子'? ?'

我們有時候會使用三元運算來簡化if...else... 或傳回一個預設值

const foo = () => {
    return student.name?.firstName 
        ? student.name.firstName 
        : 'firstName do not exist'
}
console.log(foo())

這種情況，我們可以透過空值合併進一步簡化程式碼

const foo = () => {
    return student.name?.firstName ?? 'firstName do not exist'
}
console.log(foo())

很像或||運算符，但??只對undefined 和null起作用，可以避免值是0麻煩

#盡量避免if else 巢狀

例如

const foo = () => {
    if(x<1) {
      return &#39;x is less than 1&#39;
    } else {
      if(x > 1){
          return &#39;x is greater than 1&#39;
      } else {
          return &#39;x is equal to 1&#39;
      }
  }
}

透過刪除else 條件可以讓if else 巢狀變得不那麼複雜，因為return 語句將停止程式碼執行並傳回函數

const foo = () => {
    if(x<1){
        return &#39;less than 1&#39;
    }
    if(x>1){
        return &#39;x is greater than 1&#39;
    }
    return &#39;x is equal to 1&#39;
}

好的程式碼不一定要追求盡可能的短，有時過於精簡的程式碼會讓debug的過程更加麻煩，所以可讀性才是最重要的，特別是在多人協作的情況下。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是4個編寫短小精煉JS程式碼的小技巧（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！