js 的5個不良編碼習慣，如今就改掉吧

時間 2019-11-07

標籤不良編碼習慣如今改掉欄目 JavaScript 简体版

原文原文鏈接

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

爲了保證的可讀性，本文采用意譯而非直譯。javascript

在閱讀JavaScript代碼時，你是否有過這種感受html

你幾乎不明白代碼的做用？
代碼使用了不少 JavaScript 技巧？
命名和編碼風格太過隨意？

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

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

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

JavaScript是一種鬆散類型的語言。若是使用得當，這是一個好處，由於它給你帶來了靈活性。git

大多數運算符+ - * / ==(不包括 ===)在處理不一樣類型的操做數時會進行隱式轉換。github

語句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的機會。安全

如今我們實現一個獲取對象屬性的函數。若是屬性不存在，函數返回一個默認值ide

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 的屬性isVillian爲false，函數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 及之後版本的功能要強大得多，可使用新的語言特性安全地重構許多技巧。

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、item和length 在函數做用域內。可是這些變量會影響函數做用域，由於它們只在for()塊做用域內才被須要。

經過引入具備塊做用域 let和const，應該儘量地限制變量的生命週期。

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;
}

index和 item 變量被限制爲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機制，默認對象的使用。