js代码优化

原文：https://dmitripavlutin.com/unlearn-javascript-bad-coding-habits/ 

一：不要使用隐式类型转换

• 大多数运算符+-*/==(不包括===)再处理不同类型的操作数时会进行隐式转换
• 语句 if(condition){};while(condition){}隐式转换为布尔值

使用隐式的一些问题

当你去判断一个对象的某一个属性值是否有值的时候，如果那个属性是有值的且那个值为falue所以if()会拿取到值，但依旧会被判断为false，所以我们会误以为是没有值

例子

现在咱们实现一个获取对象属性的函数。如果属性不存在，函数返回一个默认值

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

原谅作者建议是:尽可能不要使用隐式类型转换。相反，请确保变量和函数参数始终具有相同的类型，必要时使用显式类型转换。

解法问题一方法

• 始终使用严格的相等运算符 === 进行比较
• 不要使用松散等式运算符 ==
• 算数运算符，尤其是加法两边的超字数应该是数字或字符串

• if(condition){};while(condition){}等语句中的 condition必须是一个booler

问题二：不要使用早期的JavaScript技巧

例如：ES6 中可以使用 array.includes(item) 来代替 array.indexOf(item)!==-1

问题三：不要污染函数作用域

可以在块级中定义的变量就尽可能再块级作用域中定义

例子

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

修改后

通过引入块级作用域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;	
}

3-2：if作用域

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

3-3：for作用域

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

问题四：尽量避免undefined和null

未赋值的变量默认被赋值为 undefined

为什么直接使用 undefined是一个不好习惯？因为与 undefined进行比较时，你正在处理未初始化状态的变量。

变量、对象属性和数组在使用前必须用值初始化

JS 提供了很多避免与 undefined进行比较方式。

4-1：判断对象属性是否存在

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

这里用的是in运算符，这里不单单可以找到自身对象上的属性还可以找到原型上的，如果你不想找原型上的那么就用hasOwnProperty()方法判断是否是含有中国属性

4-2：判断对象默认属性，后的合并问题

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

直接用下面的方法，这样就算我defaultProps中添加了原来有的字段，也会被原来的对象给替换掉

4-3定义默认函数参数

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

4-4

null是一个缺失对象的指示符。应该尽量避免从函数返回 null，特别是使用 null作为参数调用函数

 

问题五：不要使用随意的编码风格，执行一个标准