JS 的5個不良編碼習慣,現在就改掉吧

前端小智發表於2019-07-29

原文:dmitripavlutin.com/unlearn-jav…

譯者:前端小智

為了保證的可讀性,本文采用意譯而非直譯。

在閱讀JavaScript程式碼時,你是否有過這種感覺

  • 你幾乎不明白程式碼的作用?

  • 程式碼使用了很多 JavaScript 技巧?

  • 命名和編碼風格太過隨意?

這些都是不良編碼習慣的徵兆。

在這篇文章中,我描述了JavaScript中常見的5種不良編碼習慣。重要的是,本文會給出一些可行的建議,如何的擺脫擺脫這些習慣。

1.不要使用隱式型別轉換

JavaScript是一種鬆散型別的語言。 如果使用得當,這是一個好處,因為它給你帶來了靈活性。

大多數運算子+ - * / ==(不包括 ===)在處理不同型別的運算元時會進行隱式轉換。

語句if(condition){...}while(condition){...}隱式地將條件轉換為布林值。

下面的示例依賴於型別的隱式轉換,這種有時候會讓人感到很困惑:

console.log("2" + "1");  // => "21"
console.log("2" - "1");  // => 1

console.log('' == 0);    // => true

console.log(true == []); // -> false
console.log(true == ![]); // -> false
複製程式碼

過度依賴隱式型別轉換是一個壞習慣。 首先,它使你的程式碼在邊緣情況下不太穩定。 其次,增加了引入難以重現和修復的bug的機會。

現在我們們實現一個獲取物件屬性的函式。如果屬性不存在,函式返回一個預設值

function getProp(object, propertyName, defaultValue) {
  if (!object[propertyName]) {
    return defaultValue;
  }
  return object[propertyName];
}

const hero = {
  name: 'Batman',
  isVillian: false
};

console.log(getProp(hero, 'name', 'Unknown'));     // => 'Batman'
複製程式碼

getProp() 讀取name屬性的值,即'Batman'

那麼試圖訪問isVillian屬性:

console.log(getProp(hero, 'isVillian', true)); // => true
複製程式碼

這是一個錯誤。即使 hero 的屬性isVillianfalse,函式getProp()也會返回錯誤的true

這是因為屬性存在的驗證依賴於if(!object [propertyName]){...}隱式轉換的布林值。

這些錯誤很難發現,要修復該函式,就要明確驗證值的型別:

function getPropFixed(object, propertyName, defaultValue) {
   if (object[propertyName] === undefined) {
     return defaultValue;
   }
   return object[propertyName];
}

const hero = {
  name: 'Batman',
  isVillian: false
};

console.log(getPropFixed(hero, 'isVillian', true)); // => false
複製程式碼

object[propertyName] === undefined確切地驗證屬性是否為undefined

這裡建議避免直接使用undefined。 因此,上述解決方案可以進一步改進:

function getPropFixedBetter(object, propertyName, defaultValue) {
  if (!(propertyName in object)) {
    return defaultValue;
  }
  return object[propertyName]
}
複製程式碼

原諒作者建議是:儘可能不要使用隱式型別轉換。相反,請確保變數和函式引數始終具有相同的型別,必要時使用顯式型別轉換。

最佳實踐列表:

  • 始終使用嚴格的相等運算子===進行比較

  • 不要使用鬆散等式運算子==

  • 加法運算子 operand1 + operand2:兩個運算元應該是數字或字串

  • 算術運算子 - * /%**:兩個運算元都應該是數字

  • if(condition){...}while(condition){...}等語句:condition 必須是一個布林型別值

你可能會說這種方式需要編寫更多程式碼......你是對的! 但是通過明確的方法,可以控制程式碼的行為。 此外,顯性提高了可讀性。

2. 不要使用早期的JavaScript技巧

JavaScript的有趣之處在於,它的建立者沒有料到這種語言會如此流行。

基於JavaScript構建的應用程式的複雜性比語言發展的速度還要快。這種情況迫使開發人員使用JavaScript技巧和變通方法,只是為了讓事情正常執行。

一個典型的例子是檢視陣列是否包含某個元素。 我從來不喜歡使用array.indexOf(item)!== -1來檢查。

ES6 及以後版本的功能要強大得多,可以使用新的語言特性安全地重構許多技巧。

JS 的5個不良編碼習慣,現在就改掉吧

ES6 中可以使用 array.includes(item) 來代替 array.indexOf(item) !== -1

3. 不要汙染函式作用域

在ES2015之前,你可能會養成了將所有變數宣告在函式作用域裡面。

來看看一個例子:

function someFunc(array) {
  var index, item, length = array.length;
  /*
   * Lots of code
   */
  for (index = 0; index < length; index++) {
    item = array[index];
    // Use `item`
  }
  return someResult;
}
複製程式碼

變數index、itemlength 在函式作用域內。但是這些變數會影響函式作用域,因為它們只在for()塊作用域內才被需要。

通過引入具有塊作用域 letconst,應該儘可能地限制變數的生命週期。

function someFunc(array) {
  /*
   * Lots of code
   */
  const length = array.length;
  for (let index = 0; index < length; index++) {
    const item = array[index];
    // Use `item`
  }
  return someResult;
}
複製程式碼

indexitem 變數被限制為for()迴圈塊作用域。length 被移動到使用地方的附近。

重構後的程式碼更容易理解,因為變數不會分散在整個函式作用域內,它們存在於使用地方的附近。

在使用的塊作用域定義變數

if 塊作用域

// 不好
let message;
// ...
if (notFound) {
  message = 'Item not found';
  // Use `message`
}

// 好
if (notFound) {
  const message = 'Item not found';
  // Use `message`
}
複製程式碼

for 塊作用域

// 不好
let item;
for (item of array) {
  // Use `item`
}

// 好
for (const item of array) {
  // Use `item`
}
複製程式碼

4.儘量避免 undefined 和 null

未賦值的變數預設被賦值為undefined。例如

let count;
console.log(count); // => undefined

const hero = {
  name: 'Batman'
};
console.log(hero.city); // => undefined
複製程式碼

count變數已定義,但尚未使用值初始化。 JavaScript隱式賦值給它undefined

訪問不存在的屬性hero.city時,也會返回undefined

為什麼直接使用undefined是一個不好習慣? 因為與undefined進行比較時,你正在處理未初始化狀態的變數。

變數、物件屬性和陣列在使用前必須用值初始化

JS 提供了很多避免與undefined進行比較方式。

判斷屬性是否存在

// 不好
const object = {
  prop: 'value'
};
if (object.nonExistingProp === undefined) {
  // ...
}

// 好
const object = {
  prop: 'value'
};
if ('nonExistingProp' in object) {
  // ...
}
複製程式碼

物件的預設屬性

// 不好
function foo(options) {
  if (object.optionalProp1 === undefined) {
    object.optionalProp1 = 'Default value 1';
  }
  // ...
}

// 好
function foo(options) {
  const defaultProps = {
    optionalProp1: 'Default value 1'
  };
  options = {
    ...defaultProps,
    ...options
  }
}
複製程式碼

預設函式引數

// 不好
function foo(param1, param2) {
  if (param2 === undefined) {
    param2 = 'Some default value';
  }
  // ...
}
// 好
function foo(param1, param2 = 'Some default value') {
  // ...
}
複製程式碼

null是一個缺失物件的指示符。應該儘量避免從函式返回 null,特別是使用null作為引數呼叫函式。

一旦null出現在呼叫堆疊中,就必須在每個可能訪問null的函式中檢查它的存在,這很容易出錯。

function bar(something) {
  if (something) {
    return foo({ value: 'Some value' });
  } else {
    return foo(null);
  }
}

function foo(options) {
  let value = null;
  if (options !== null) {
    value = options.value;
    // ...
  }
  return value;
}
複製程式碼

嘗試編寫不涉及null的程式碼。 可替代方法是try /catch機制,預設物件的使用。

5. 不要使用隨意的編碼風格,執行一個標準

有什麼比閱讀具有隨機編碼風格的程式碼更令人生畏的事情? 你永遠不知道會發生什麼!

如果程式碼庫包含許多開發人員的不同編碼風格,該怎麼辦?,這種就像各色人物塗鴉牆。

JS 的5個不良編碼習慣,現在就改掉吧

整個團隊和應用程式程式碼庫都需要相同的編碼風格,它提高了程式碼的可讀性。

一些有用的編碼風格的例子:

老實說,當我在回家前準備提交時,我可能會忘記設計程式碼的樣式。

我自己總說:保持程式碼不變,以後再更新它,但是“以後”意味著永遠不會。

這裡建議使用 eslint 來規範編碼風格。

  1. 安裝eslint
  2. 使用最適合自己的編碼風格配置 eslint
  3. 設定一個預提交鉤子,在提交之前執行eslint驗證。

總結

編寫高質量和乾淨的程式碼需要紀律,克服不好的編碼習慣。

JavaScript是一種寬容的語言,具有很大的靈活性。但是你必須注意你所使用的特性。這裡建議是避免使用隱式型別轉換,undefinednull

現在這種語言發展得相當快。找出複雜的程式碼,並使用最新 JS 特性來重構。

整個程式碼庫的一致編碼風格有益於可讀性。良好的程式設計技能總是一個雙贏的解決方案。

交流(歡迎加入群,群工作日都會發紅包,互動討論技術)

乾貨系列文章彙總如下,覺得不錯點個Star,歡迎 加群 互相學習。

github.com/qq449245884…

我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨,在進階的路上,共勉!

關注公眾號,後臺回覆福利,即可看到福利,你懂的。

JS 的5個不良編碼習慣,現在就改掉吧

每次整理文章,一般都到2點才睡覺,一週4次左右,挺苦的,還望支援,給點鼓勵

JS 的5個不良編碼習慣,現在就改掉吧

相關文章