第十四期：5 个 JS 不良编码习惯，你占几个呢？

本文链接：https://blog.csdn.net/weixin_43392489/article/details/102575044

在阅读JavaScript代码时，你是否有过这种感觉：你几乎不明白代码的作用？代码使用了很多 JavaScript 技巧？命名和编码风格太过随意？这些都是不良编码习惯的征兆。

在阅读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机制，默认对象的使用。