5 个 JS 不良编码习惯，你占几个呢

做者：Dmitri Pavlutin
译者：前端小智
来源：dmitripavlutin

---

阿里云最近在作活动，低至2折，有兴趣能够看看：
https://promotion.aliyun.com/...

---

在阅读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 来规范编码风格。

1. 安装eslint
2. 使用最适合本身的编码风格配置 eslint
3. 设置一个预提交钩子，在提交以前运行eslint验证。

总结

编写高质量和干净的代码须要纪律，克服很差的编码习惯。

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

如今这种语言发展得至关快。找出复杂的代码，并使用最新 JS 特性来重构。

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

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://dmitripavlutin.com/un...

交流（欢迎加入群，群工做日都会发红包，互动讨论技术）

阿里云最近在作活动，低至2折，有兴趣能够看看：https://promotion.aliyun.com/...

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq449245884/xiaozhi

由于篇幅的限制，今天的分享只到这里。若是你们想了解更多的内容的话，能够去扫一扫每篇文章最下面的二维码，而后关注我们的微信公众号，了解更多的资讯和有价值的内容。

每次整理文章，通常都到2点才睡觉，一周4次左右，挺苦的，还望支持，给点鼓励