JavaScript重構技巧-讓函數簡單明了
本文轉載自微信公眾號「大遷世界」,轉載本文請聯系大遷世界公眾號。
JavaScript 是一種易于學習的編程語言,編寫運行并執行某些操作的程序很容易。然而,要編寫一段干凈的JavaScript 代碼是很困難的。
在本文中,我們將研究如何讓我們的函數更清晰明了。
對對象參數使用解構
如果我們希望函數接收很多參數,那么應該使用對象。在此基礎上,我們就可以使用解構語法提取我們需要的參數。
例如,對于對象參數,我們可能會這樣使用:
- const greet = (obj) => {
- return `${obj.greeting}, ${obj.firstName}${obj.lastName}`;
- }
上面的語法,我們可以使用解構方式會更優雅:
- const greet = ({
- greeting,
- firstName,
- lastName
- }) => {
- return `${greeting}, ${firstName}${lastName}`;
- }
這樣我們可以少寫很多重復的東西,命名也會更加清晰。
命名回調函數
好的命名會使閱讀代碼更容易,回調函數的命名也是一樣的,例如下面不好的命名方式:
- const arr = [1, 2, 3].map(a => a * 2);
我們可以這樣分開命名:
- const double = a => a * 2;
- if (score === 100 ||
- remainingPlayers === 1 ||
- remainingPlayers === 0) {
- quitGame();
- }
- const arr = [1, 2, 3].map(double);
現在我們知道我們的回調函數實際上是用來加倍原始數組的每個元素的。
讓條件句具有描述性
通過在自己的函數的條件語句中編寫條件表達式,可以使條件語句更具描述性。
對于復雜的條件判斷, 我們可以單獨使用函數來表示,會讓條件語句更具描述性,例如下面代碼:
- if (score === 100 ||
- remainingPlayers === 1 ||
- remainingPlayers === 0) {
- quitGame();
- }
當條件多時,我們可以用函數來表示:
- const winnerExists = () => {
- return score === 100 ||
- remainingPlayers === 1 ||
- remainingPlayers === 0
- }
- if (winnerExists()) {
- quitGame();
- }
這樣,我們就知道這些條件是檢查游戲代碼中是否存在贏家的條件。
在第一個例子中,我們有一個很長的表達式在括號里,大多數人可能不知道它在判斷什么。但在第二個例子中,一旦我們把它放到一個命名函數中,我們就知道它大概在判斷什么了。
在條件語句中擁有一個命名函數比在擁有一堆布爾表達式要清晰得多。
用 Map 或 Object替換 switch 語句
由于 switch語句很長,這樣容易出錯。因此,如果可以的話,我們應該用較短的代碼代替它們。許多switch語句可以用map或object替換。例如,如果我們有下面的switch語句:
- const getValue = (prop) => {
- switch (prop) {
- case 'a': {
- return 1;
- }
- case 'b': {
- return 2;
- }
- case 'c': {
- return 3;
- }
- }
- }
- const val = getValue('a');
我們可以將其替換為object或map,如下所示:
- const obj = {
- a: 1,
- b: 2,
- c: 3
- }
- const val = obj['a'];
如我們所見,switch 語法很長。我們需要嵌套多個帶有多個return語句的塊,只是為了獲得給定prop值的返回值。
相反使用對象,我們僅僅需要一個對象就可以了:
- const obj = {
- a: 1,
- b: 2,
- c: 3
- }
使用對象還有一個好處,就是對于鍵不必是有效的標識符號,這樣這增加了更多的靈活性。
我們還可以使用map替換對象,如下所示:
- const map = new Map([['a', 1], ['b', 2], ['c', 3]])
- const val = map.get('a')
如我們所見,使用Map時,代碼也短很多。我們通過傳遞一個數組,數組中的每項包含鍵和值。然后,我們僅使用Map實例的get方法從鍵中獲取值。
Map優于對象的一個好處是,我們可以將數字,布爾值或對象等其他值用作鍵。而對象只能將字符串或symbol作為鍵。
總結
使用解構語法可以使對象參數更清楚,更短。這樣,可以選擇性地將屬性作為變量進行訪問。
通過將條件表達式放在它自己的命名函數中,可以使條件表達式更具描述性。同樣,我們應該為回調函數命名,以便更容易地讀取代碼。
最后,應該盡可能用Map和Object替換switch語句。