「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式


原文來自 - 5 Tips to Write Better Conditionals in JavaScript(https://scotch.io/bar-talk/5-tips-to-write-better-conditionals-in-javascript)

我們在使用JavaScript的過程中,經常會和條件語句打交道,這裡有五條小技巧可以讓你寫出更好更乾淨的條件表達式。

1.使用Array.prototype.includes()來應對多重條件

讓我們先來看下代碼:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

第一眼看下來,上述代碼看起來是不錯的。但是,如果我們需要加入更多紅色水果,比如cherry和cranberries呢?我們是否應該繼續用“||”去擴展這個條件表達式呢?我們可以用Array.prototype.includes重寫上述的條件語句。

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

我們把紅色水果放進一個數組中,這樣子代碼看起來會整潔一點

2.少嵌套,早返回

讓我們把之前的例子添加兩個條件:

  • 如果沒有輸入水果,則拋出錯誤
  • 如果水果數量超過10的話就打印出數量
「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

看一下上述代碼,我們有:

  • 1個if/else判斷來篩除無效的值
  • 3層if嵌套

一個我個人提倡的普遍規則:當發現了無效值,越早返回越好!

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

這樣做的話,我們就少了一層嵌套。同時這代碼風格是好處的,尤其當你有一個非常長的if判斷的時候(想象一下你需要一直下拉下拉下拉到底部才赫然發現那裡有一個else語句,太悲催了)。

此外我們還可以通過提取條件和儘早return來減少嵌套。如下:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

通過把條件單獨提取出來,我們的代碼現在在從嵌套中解脫了。當我們有很長的邏輯需要去執行並且當條件不滿足時我們想要停止下面的代碼運行的時候這個方法是很有用的。

然而,這並不是硬性要求這樣做。問問你自己,這個樣子(沒有嵌套)的代碼是否比原來的(嵌套)的代碼更好更易讀?對於我來說,我寧願選擇無嵌套的,因為:

  • 代碼更簡短直接
  • 如果嵌套太多的話會導致更多的思考過程(增加了認知的負荷)

所以,追求少嵌套造返回但是也不能做的太過火了。這裡有一些資料是討論有關這方面話題的,如果你感興趣的話可以去看看:

  • Avoid Else, Return Early by Tim Oxley
  • StackOverflow discussion on if/else coding style

3.使用默認的函數參數和結構

我猜下面的代碼對你來說肯定很常見,我們經常需要去檢查參數是否為null/undefined並賦予一個默認值:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

實際上,我們可以這樣賦予默認值:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

是不是更簡單明瞭?童鞋們趕緊記下來 default function parameter。同樣的,我們也可以這樣 function test(fruit = 'unknown', quantity = 1) 給fruit設一個默認值。那如果fruit是一個對象呢?我們還能賦默認值嗎?

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

看一下上面的代碼,是不是很熟悉,當有水果名的時候我們要去打印出來,否則就打印’unknown’。其實我們是可以用默認參數加結構去避免這種寫法的:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

當我們需要從fruit對象中拿name屬性的時候,我們可以用{name}來結構參數,然後我們就可以在接下來的函數作用域中用name這個變量來取代fruit.name了。

注意,在這裡我們要賦個空對象{}當默認值,如果不這樣做的話,當代碼執行到這一行時會報錯。如果你不介意使用第三方庫的話,這裡還有些選擇你可以使用:

  • use Lodash getfunction
  • use Facebook open source’s idx library (with Babeljs)

這裡是一個Lodash的使用示例:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

你可以在這裡運行代碼。此外,如果你是函數式編程的粉絲的話,你也可以選擇使用Lodash fp,這是Lodash的函數式版本。

4.使用 Map 或 Object 而不是switch表達式

看一下下面的例子,我們要根據顏色來打印出水果:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

上面的代碼看起來沒問題,但是我覺得這樣實在是太囉嗦了。我們可以用對象來改造得更簡潔:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

當然,你也可以用Map來得到同樣的結果:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

我們以後是否都不用switch表達式了?也不要這麼偏激,個人而言,我能用對象結構的時候就儘量用,但是我不會給自己設限,主要的是合理運用。 相關資料可以查閱 Todd Motto 的 Replacing switch statements with Object literals。

對於上述的例子,我們也可以用Array.prototype.filter來重構之:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

總是有不止一種方法去達到同樣的目的,編程真是太有趣了!

5.用 Array.prototype.every 和 Array.prototype.some 來處理條件

最後一個技巧更多的是去利用新的(但並不是最新的)JavaScript數組方法來簡化代碼。看看下面的代碼,我們要檢查是否所有的水果都是紅色的:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

上面這代碼實在是太複雜了,我們可以這樣簡化下:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

這樣看起來是不是簡潔多了?同理,如果我們要檢查所有水果中有沒有包含紅色的水果,我們可以這樣做:

「翻譯」5個小技巧讓你寫出更好的Javascript條件表達式

結語

希望你學有所得,編程愉快!


分享到:


相關文章: