5个JavaScript不良编码习惯，你占了多少？

在阅读JavaScript代码时，你是否有过这种感觉，你几乎看不懂代码是做什么的？代码是否使用了很多JavaScript技巧？命名和编码风格是否过于随意？这些都是不良编码习惯的症状。在本文中，我描述了JavaScript中5个常见的不良编码习惯。重要的是，本文将就如何改掉这些习惯给出一些可行的建议。1.不要使用隐式类型转换JavaScript是一种松散类型的语言。如果使用得当，这是一个好处，因为它为您提供了灵活性。大多数运算符+-*/==（不包括===）在处理不同类型的操作数时会进行隐式转换。语句if(condition){...}、while(condition){...}隐式地将条件转换为布尔值。以下示例依赖于类型的隐式转换，这有时会令人困惑：console.log("2"+"1");//=>"21"console.log("2"-"1");//=>1console.log(''==0);//=>trueconsole.log(true==[]);//->falseconsole.log(true==![]);//->false过分依赖隐式类型转换是一个坏习惯。首先，它使您的代码在边缘情况下不太稳定。其次，引入难以重现和修复的错误的可能性增加。现在我们实现一个函数来获取对象的属性。如果属性不存在，则函数返回一个默认值isVillian:false};console.log(getProp(hero,'name','Unknown'));//=>'Batman'getProp()读取name属性的值，即'Batman'。然后尝试访问isVillian属性：console.log(getProp(hero,'isVillian',true));//=>true这是一个错误。即使hero的属性isVillian为false，函数getProp()也会返回falsetrue。这是因为属性存在的验证依赖于由if(!object[propertyName]){...}隐式转换的布尔值。这些错误很难发现，要修复函数，请显式验证值的类型：}consthero={name:'Batman',isVillian:false};console.log(getPropFixed(hero,'isVillian',true));//=>falseobject[propertyName]===undefined准确验证属性是否未定义。建议避免直接使用undefined。因此，上述方案还可以进一步完善：functiongetPropFixedBetter(object,propertyName,defaultValue){if(!(propertyNameinobject)){returndefaultValue;}returnobject[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)!==-13。不要污染函数作用域在ES2015之前，你可能会养成在函数作用域中声明所有变量的习惯。我们来看一个例子：functionsomeFunc(array){varindex,item,length=array.length;/**Lotsofcode*/for(index=0;indexundefinedconsthero={name:'Batman'};console.log(hero.city);//=>undefinedcount变量已定义但尚未用值初始化。JavaScript隐式地??为它赋值undefined。当访问不存在的属性hero.city时，也会返回undefined。为什么直接使用undefined是一种不好的做法？因为在与undefined进行比较时，您正在处理处于未初始化状态的变量。变量、对象属性、数组在使用前必须先用值初始化JS提供了很多方法来避免与undefined进行比较。判断属性是否存在//不好constobject={prop:'value'};if(object.nonExistingProp===undefined){//...}//好的constobject={prop:'value'};if('nonExistingProp'inobject){//...}对象的默认属性//不好functionfoo(options){if(object.optionalProp1===undefined){object.optionalProp1='Defaultvalue1';}//...}//goodfunctionfoo(options){constdefaultProps={optionalProp1:'Defaultvalue1'};options={...defaultProps,...options}}默认函数参数//badfunctionfoo(param1,param2){if(param2===undefined){param2='Somedefaultvalue';}//...}//goodfunctionfoo(param1,param2='Somedefaultvalue'){//...}null表示缺少对象.应尽可能避免从函数返回null，尤其是在以null作为参数调用函数时。一旦null出现在调用堆栈上，就必须在每个可能访问它的函数中检查它的存在，这很容易出错。functionbar(something){if(something){returnfoo({value:'Somevalue'});}else{returnfoo(null);}}functionfoo(options){letvalue=null;if(options!==null){value=options.value;//...}returnvalue;}尽量写不涉及null的代码。另一种方法是try/catch机制，它默认使用对象。5.不要使用随机的编码风格，还有什么比阅读具有随机编码风格的代码更令人生畏的标准呢？你永远不知道会发生什么！如果代码库包含许多具有不同编码风格的开发人员，我应该怎么办？这就像各种人物的涂鸦墙。整个团队和应用程序代码库需要相同的编码风格，这提高了代码的可读性。一些有用的编码风格示例：AirbnbJS风格指南GoogleJS风格指南老实说，当我在回家前准备提交时，我可能忘记了设置代码样式。我自己总是这样说：保持代码不变，稍后更新，但“稍后”意味着永远不会。推荐使用eslint规范编码风格。安装eslint使用最适合您的编码风格配置eslint设置预提交挂钩以在提交前运行eslint验证。总结编写高质量和干净的代码需要纪律和克服不良的编码习惯。JavaScript是一种宽容的语言，具有很大的灵活性。但是您必须小心使用哪些功能。这里的建议是避免隐式类型转换，undefined和null。现在这门语言发展得相当快。查找复杂代码并重构它以使用最新的JS功能。代码库中一致的编码风格有利于可读性。良好的编程技能总是双赢的解决方案。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。