JS 編碼 5 個不良習慣，如何避免？

在閱讀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 的屬性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机制，默认对象的使用。

5. 不要使用随意的编码风格，执行一个标准

有什么比阅读具有随机编码风格的代码更令人生畏的事情？ 你永远不知道会发生什么！

如果代码库包含许多开发人员的不同编码风格，该怎么办?，这种就像各色人物涂鸦墙。

整个团队和应用程序代码库都需要相同的编码风格，它提高了代码的可读性。

一些有用的编码风格的例子：

Airbnb JS 风格指南

谷歌 JS 风格指南

老实说，当我在回家前准备提交时，我可能会忘记设计代码的样式。

我自己总说:保持代码不变，以后再更新它，但是“以后”意味着永远不会。

这里建议使用 eslint 来规范编码风格。

安装eslint

使用最适合自己的编码风格配置 eslint

设置一个预提交钩子，在提交之前运行eslint验证。

总结

编写高质量和干净的代码需要纪律，克服不好的编码习惯。

JavaScript是一种宽容的语言，具有很大的灵活性。但是你必须注意你所使用的特性。这里建议是避免使用隐式类型转换，undefined 和 null 。

现在这种语言发展得相当快。找出复杂的代码，并使用最新 JS 特性来重构。

整个代码库的一致编码风格有益于可读性。良好的编程技能总是一个双赢的解决方案。

推荐教程：《JS教程》

以上是JS 編碼 5 個不良習慣，如何避免？的詳細內容。更多資訊請關注PHP中文網其他相關文章！